> For the complete documentation index, see [llms.txt](https://docs.tlic.cmu.ac.th/cmu-mango-canvas-manual/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.tlic.cmu.ac.th/cmu-mango-canvas-manual/tips-and-tricks-for-mango-canvas/interactive-video.md).

# 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.