# Interactive Video

Mongo Canvas, similar to Moodle, supports interactive video using H5P. Instructors can embed H5P content in 'Assignments' or on pages within the course.

## Adopting H5P on Mango

For instructors who have created videos directly using the H5P system, or who already have video content, the embed code of the content can be integrated into the course.

<figure><img src="/files/XODe2EyKQsc6HZNSFFvm" alt=""><figcaption></figcaption></figure>

Copy embed code from H5P

<figure><img src="/files/4UbVYyVrpjBg81gwjWrI" alt=""><figcaption></figcaption></figure>

Create new page on Mango

<figure><img src="/files/D0YPl3SUngMynefk2l2S" alt=""><figcaption></figcaption></figure>

Open HTML Editor

<figure><img src="/files/E7en07SRwaF2ziseBypu" alt=""><figcaption></figcaption></figure>

Paste the code into the Text Editor and remove all the text that follows the `</iframe>` tag.

<figure><img src="/files/1kVTS73wcKNC29RrX5SJ" alt=""><figcaption></figcaption></figure>

Switch back to Rich Text mode to display the results of the interactive video.

<figure><img src="/files/gdQCU9g5fxz4vR5t1dnM" alt=""><figcaption></figcaption></figure>

The H5P content from the embed code will appear in the Rich Text Editor, which can be previewed or added additional text.

<figure><img src="/files/c2jiKvQR6x0NdwfHXw5x" alt=""><figcaption></figcaption></figure>

Hit 'Save'.

<figure><img src="/files/D7Q9vul26f59P6iuAofx" alt=""><figcaption></figcaption></figure>

This will create a page containing an interactive video with which students can actively engage.

## Creating Interactive Video

Instructors looking to create interactive videos or content compatible with Mango Canvas, or to transfer interactive content from KC-Moodle to Mango Canvas, can utilize Lumi to develop interactive materials specifically for Mango Canvas.

<figure><img src="/files/2u7C6cY1FsC3NRKK7Bx3" alt=""><figcaption></figcaption></figure>

Download Lumi: <https://app.lumi.education/>

<figure><img src="/files/FNKao8jD873gWScL4DtN" alt=""><figcaption></figcaption></figure>

To create a new video, click START at H5P Editor.

<figure><img src="/files/92naPDGsXhH2ykVdyZNx" alt=""><figcaption></figcaption></figure>

Create new H5P interactive video and choose desired content.

Upload the video and create interactions and tasks.

<figure><img src="/files/T3G1PwsZk5LNjQJFAgKE" alt=""><figcaption></figcaption></figure>

After finalizing, click File >> Export >> select SCORM package >> EXPORT NOW.

<figure><img src="/files/78hqTbfmT4onDsbFngso" alt=""><figcaption></figcaption></figure>

Goto Mango Canvas >> SCORM >> three-dot button >> Enable >> Save.

<figure><img src="/files/O5PqVivED0PRB8TgbAE1" alt=""><figcaption></figcaption></figure>

Go to SCORM in the left menu panel, and choose Upload.

<figure><img src="/files/Aksi19NQQw9l3vdSmZ1U" alt=""><figcaption></figcaption></figure>

Choose the exported file from Lumi.

<figure><img src="/files/Rpg6ENKE86KETl160ZQn" alt=""><figcaption></figcaption></figure>

After uploading, choose import type as follows.

* Import as graded assignment&#x20;
* Import as ungraded assignment&#x20;
* Import as page&#x20;

Click on the green 'Go' button.

<figure><img src="/files/SDJB9gMQJJK0HtlHPzXc" alt=""><figcaption></figcaption></figure>

Functions of the menu above

* Import types
* Click A+ to go to the import page to edit
* Preview&#x20;
* Delete

<figure><img src="/files/SomnIfU8Lu7qRORpKErh" alt=""><figcaption></figcaption></figure>

The contents can be employed instantly.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.tlic.cmu.ac.th/cmu-mango-canvas-manual/tips-and-tricks-for-mango-canvas/interactive-video.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.