# สร้างวิดีโอ Interactive ด้วย H5P

ระบบ moodle มีส่วนที่รองรับวิดีโอแบบ Interactive ที่สร้างบน H5P ได้ ในระบบ Mango Canvas เองก็รองรับวิดีโอ Interactive ด้วยเช่นกัน ซึ่งอาจารย์สามารถ Embed คอนเทนต์ H5P ใน Assignment หรือหน้า Page ภายในคอร์สของอาจารย์ได้

## การนำ H5P มาใช้งานบน Mango

สำหรับอาจารย์ที่ใช้การสร้างวิดีโอโดยตรงบนระบบของ H5P หรือมีวิดีโอในระบบอยู่แล้ว สามารถนำโค้ด Embed วิดีโอมาใส่ไว้ในคอร์ส Mango ได้เลย

<figure><img src="https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2FhGpmyEjs1XHXeEimKXoQ%2Fimage.png?alt=media&#x26;token=b1b1db3a-623d-4587-b60d-6f0c42fa439e" alt=""><figcaption></figcaption></figure>

Copy Embed Code จาก H5P

<figure><img src="https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2Fm7yqtxIVlHEsU1OAtGXX%2Fimage.png?alt=media&#x26;token=603f0036-0bcd-4f68-bd6b-a58200da7e74" alt=""><figcaption></figcaption></figure>

สร้าง Page ใหม่บน Mango

<figure><img src="https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2FNgW4ElxnlnsYRDnNbKUE%2Fimage.png?alt=media&#x26;token=aa9679fa-daa7-42c2-aa00-67bffd3b5609" alt=""><figcaption></figcaption></figure>

เปิด HTML Editor

<figure><img src="https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2FlZuHh2kdyTUrU0Qyln6Q%2Fimage.png?alt=media&#x26;token=0aabc468-228e-488a-9150-18766abaaec4" alt=""><figcaption></figcaption></figure>

วางโค้ดลงไปใน Text Editor และลบข้อความหลัง \</iframe> ออกทั้งหมด

<figure><img src="https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2FENYxZtd40cmnOBoOl4rN%2Fimage.png?alt=media&#x26;token=b93cede6-d3f7-459e-a65e-cd021558cde3" alt=""><figcaption></figcaption></figure>

กดกลับไปที่ Rich Text Editor เพื่อดูการแสดงผลของ Interactive Video

<figure><img src="https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2FnOAw6XrUtI7cQE3fAFic%2Fimage.png?alt=media&#x26;token=cd4d71cd-daaa-4b27-8db8-d666ffb15513" alt=""><figcaption></figcaption></figure>

คอนเทนต์ H5P ของโค้ด Embed ที่นำมาวางจะแสดงผลใน Rich Text Editor กดทดลองเล่นได้ หรือเขียนเนื้อหาเพิ่มเติม

<figure><img src="https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2FeZpaSkG29IkdoEPU5Z0M%2Fimage.png?alt=media&#x26;token=97e30eff-d7ee-492d-96ef-4b4e8f8fc605" alt=""><figcaption></figcaption></figure>

เมื่อเรียบร้อยแล้วกด Save

<figure><img src="https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2FjM9kmeG101dEs6hOaPRz%2Fimage.png?alt=media&#x26;token=39e31dc3-c801-4b92-97e5-6b708d55b879" alt=""><figcaption></figcaption></figure>

ได้หน้า Page ที่มีวิดีโอ Interactive ฝังอยู่เพื่อให้ผู้เรียนมีส่วนร่วมกับเนื้อหาได้

## การสร้างวิดีโอ Interactive

สำหรับอาจารย์ที่ต้องการสร้างวิดีโอ Interactive หรือคอนเทนต์ Interactive อื่นๆที่สามารถใช้งานกับ Mango Canvas ได้ รวมถึงการย้ายคอนเทนต์ Interactive จากระบบ kc moodle มาใช้งานต่อบน Mango Canvas สามารถใช้งานโปรแกรม Lumi เพื่อสร้างวิดีโอ Interactive เพื่อใช้งานกับ Mango Canvas ได้

<figure><img src="https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2FXR5E8UiA57JzLstt7Cjw%2Fimage.png?alt=media&#x26;token=c30ce7d7-c157-460b-b891-9b3bc2f18edb" alt=""><figcaption></figcaption></figure>

ดาวน์โหลดโปรแกรม Lumi : <https://app.lumi.education/>

<figure><img src="https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2F6MJtZ9AMi1PcTvXTmILM%2Fimage.png?alt=media&#x26;token=1287bdb9-665e-400e-81fd-09c7a0350dbb" alt=""><figcaption></figcaption></figure>

สร้างวิดีโอใหม่เลือก H5P Editor กดที่ START

<figure><img src="https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2FWOtVc9PhGXJQ9V6b7yal%2Fimage.png?alt=media&#x26;token=34583c87-b238-42ad-a918-bdd4876a4f7a" alt=""><figcaption></figcaption></figure>

สร้างวิดีโอใหม่ที่ new H5P เลือกคอนเทนท์ที่ต้องการ

<figure><img src="https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2FRQEP0xS8eFvzhq2Ec1v4%2Fimage.png?alt=media&#x26;token=b2307862-9822-4a2d-9857-d932743a5908" alt=""><figcaption></figcaption></figure>

อัปโหลดวิดีโอแล้วสร้าง interactions และ task ตามต้องการ

<figure><img src="https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2Fh30mPIbcI8lLpQZV0ikr%2Fimage.png?alt=media&#x26;token=a559aaa1-b666-46c7-9d48-c579e7038836" alt=""><figcaption></figcaption></figure>

เมื่อสร้างวิดีโอเสร็จ กด File >> Export >> เลือก SCORM package >> EXPORT NOW

<figure><img src="https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2FVeEdVPnGw4xeJC9WKktH%2Fimage.png?alt=media&#x26;token=90ba8a94-73df-470d-bd00-c019cb8b0f97" alt=""><figcaption></figcaption></figure>

ไปที่คอร์ส Mango Canvas >> SCORM >> ปุ่มจุด 3 จุด >> Enable >> Save

<figure><img src="https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2FPTr0VNQJJVMcPLFWcOou%2Fimage.png?alt=media&#x26;token=85b2fdde-71bc-45e9-998c-0f5f199fe486" alt=""><figcaption></figcaption></figure>

ไปที่ SCORM ในแถบเมนูด้านซ้าย เลือก Upload

<figure><img src="https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2FXXhosM5Vl0gCMuTAw3GP%2Fimage.png?alt=media&#x26;token=42778a52-8fb2-4ea2-ade8-779095b5f2dc" alt=""><figcaption></figcaption></figure>

เลือกไฟล์ที่ Export จาก Lumi

<figure><img src="https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2FWcmccFIqgTldxjyVy5Vs%2Fimage.png?alt=media&#x26;token=b119db85-e174-424b-b743-072ad2e45a12" alt=""><figcaption></figcaption></figure>

เมื่ออัปโหลดเสร็จจะปรากฏเมนูดังภาพ เลือก Choose Import type... เพื่อนำเข้าวิดีโอสู่คอร์สในรูปแบบต่างๆ

* Import as graded assignment นำเข้าคอร์สเป็น Assignment แบบเก็บคะแนน
* Import as ungraded assignment นำเข้าคอร์สเป็น Assignment แบบไม่เก็บคะแนน
* Import as page นำเข้าคอร์สเป็น page

เมื่อเลือกแล้วกด Go ปุ่มสีเขียว

<figure><img src="https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2FolQgurzvmpqU7Kr0mab9%2Fimage.png?alt=media&#x26;token=51b42e8c-38d1-444a-8574-c8810c968ca0" alt=""><figcaption></figcaption></figure>

* รูปแบบที่ Import
* A+ กดเพื่อไปยังหน้าที่ Import ไว้ในคอร์สเพื่อแก้ไขต่อ
* Preview ดูวิดีโอนั้นๆ
* ถังขยะ ลบวิดีโอออกจากระบบ

<figure><img src="https://3470142670-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSgE1vEnY4YfAcopihK%2Fuploads%2FLLBouHIbzp7zIf1t0yh2%2Fimage.png?alt=media&#x26;token=acd5bcf6-cde7-4600-bc16-2ba333d4b8e3" alt=""><figcaption></figcaption></figure>

สามารถนำวิดีโอดังกล่าวไปใช้งานบนคอร์สต่อได้ทันที


---

# 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/cmucanvas-manual/add-content/interactive-h5p.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.