![Page 1: Creating Interactive Video using H5P video webinar 22 May 2020.pdf · source content collaboration framework based on JavaScript. To create, share and reuse interactive HTML5 content](https://reader033.vdocument.in/reader033/viewer/2022043018/5f3a49587653e82ee2029b3d/html5/thumbnails/1.jpg)
Creating Interactive Video
using H5P
DR. MOHD MAMUR ALI
ASSISTANT PROFESSOR
DEPT. OF TEACHER TRAINING AND NON-FORMAL EDUCATION (IASE)
JAMIA MILLIA ISLAMIA, NEW DELHI
![Page 2: Creating Interactive Video using H5P video webinar 22 May 2020.pdf · source content collaboration framework based on JavaScript. To create, share and reuse interactive HTML5 content](https://reader033.vdocument.in/reader033/viewer/2022043018/5f3a49587653e82ee2029b3d/html5/thumbnails/2.jpg)
What is H5P?
H5P (= HTML5 Package) is a free and open-source content collaborationframework based on JavaScript.
To create, share and reuse interactiveHTML5 content. (CC-BY license)
Different content types – Interactivevideos– Interactive presentations –Imagehotspot- Quizzes, Games etc.
![Page 3: Creating Interactive Video using H5P video webinar 22 May 2020.pdf · source content collaboration framework based on JavaScript. To create, share and reuse interactive HTML5 content](https://reader033.vdocument.in/reader033/viewer/2022043018/5f3a49587653e82ee2029b3d/html5/thumbnails/3.jpg)
Interactive video Make your videos
more engaging by adding multiple choice and fill in the blank questions, pop-up text and other types of interactions to your videos.
![Page 4: Creating Interactive Video using H5P video webinar 22 May 2020.pdf · source content collaboration framework based on JavaScript. To create, share and reuse interactive HTML5 content](https://reader033.vdocument.in/reader033/viewer/2022043018/5f3a49587653e82ee2029b3d/html5/thumbnails/4.jpg)
Why Interactive video ?Students are actually watching video?
Provide opportunities for active participation
Students can comment and generatediscussion around the content
Using the analytics (viewing time, response etc. ) provided by interactive video platform, teacher can get insights where the learners are struggling etc.
![Page 5: Creating Interactive Video using H5P video webinar 22 May 2020.pdf · source content collaboration framework based on JavaScript. To create, share and reuse interactive HTML5 content](https://reader033.vdocument.in/reader033/viewer/2022043018/5f3a49587653e82ee2029b3d/html5/thumbnails/5.jpg)
Creating an Interactive video in H5P.org
Click “create free account” button to create an account.
![Page 6: Creating Interactive Video using H5P video webinar 22 May 2020.pdf · source content collaboration framework based on JavaScript. To create, share and reuse interactive HTML5 content](https://reader033.vdocument.in/reader033/viewer/2022043018/5f3a49587653e82ee2029b3d/html5/thumbnails/6.jpg)
Creating an Interactive video in H5P.org
Fill the information required and click on “create new account” button.
![Page 7: Creating Interactive Video using H5P video webinar 22 May 2020.pdf · source content collaboration framework based on JavaScript. To create, share and reuse interactive HTML5 content](https://reader033.vdocument.in/reader033/viewer/2022043018/5f3a49587653e82ee2029b3d/html5/thumbnails/7.jpg)
Creating an Interactive video in H5P.org
Fill the information required and click on “create new account” button.
![Page 8: Creating Interactive Video using H5P video webinar 22 May 2020.pdf · source content collaboration framework based on JavaScript. To create, share and reuse interactive HTML5 content](https://reader033.vdocument.in/reader033/viewer/2022043018/5f3a49587653e82ee2029b3d/html5/thumbnails/8.jpg)
Creating an Interactive video in H5P.org
Fill the information required and click on “create new account” button.
![Page 9: Creating Interactive Video using H5P video webinar 22 May 2020.pdf · source content collaboration framework based on JavaScript. To create, share and reuse interactive HTML5 content](https://reader033.vdocument.in/reader033/viewer/2022043018/5f3a49587653e82ee2029b3d/html5/thumbnails/9.jpg)
Creating an Interactive video in H5P.org
Login using username and password.
![Page 10: Creating Interactive Video using H5P video webinar 22 May 2020.pdf · source content collaboration framework based on JavaScript. To create, share and reuse interactive HTML5 content](https://reader033.vdocument.in/reader033/viewer/2022043018/5f3a49587653e82ee2029b3d/html5/thumbnails/10.jpg)
Creating an Interactive video in H5P.org
Click “Try out H5P” to create new content
![Page 11: Creating Interactive Video using H5P video webinar 22 May 2020.pdf · source content collaboration framework based on JavaScript. To create, share and reuse interactive HTML5 content](https://reader033.vdocument.in/reader033/viewer/2022043018/5f3a49587653e82ee2029b3d/html5/thumbnails/11.jpg)
Creating an Interactive video in H5P.org
Choose Interactive
video option from
the list of Content
types or type
“interactive video”
in search option.
Then click on
“details” button
![Page 12: Creating Interactive Video using H5P video webinar 22 May 2020.pdf · source content collaboration framework based on JavaScript. To create, share and reuse interactive HTML5 content](https://reader033.vdocument.in/reader033/viewer/2022043018/5f3a49587653e82ee2029b3d/html5/thumbnails/12.jpg)
Creating an Interactive video in H5P.org
Click on “use” button .
![Page 13: Creating Interactive Video using H5P video webinar 22 May 2020.pdf · source content collaboration framework based on JavaScript. To create, share and reuse interactive HTML5 content](https://reader033.vdocument.in/reader033/viewer/2022043018/5f3a49587653e82ee2029b3d/html5/thumbnails/13.jpg)
Three Tabs: Upload video, Add interactions and Summary task.
Step 1: Upload/embed video.
![Page 14: Creating Interactive Video using H5P video webinar 22 May 2020.pdf · source content collaboration framework based on JavaScript. To create, share and reuse interactive HTML5 content](https://reader033.vdocument.in/reader033/viewer/2022043018/5f3a49587653e82ee2029b3d/html5/thumbnails/14.jpg)
Step 1: Upload/embed video.
Press the “+” button
![Page 15: Creating Interactive Video using H5P video webinar 22 May 2020.pdf · source content collaboration framework based on JavaScript. To create, share and reuse interactive HTML5 content](https://reader033.vdocument.in/reader033/viewer/2022043018/5f3a49587653e82ee2029b3d/html5/thumbnails/15.jpg)
Step 1: Upload/embed video.
Add a video link or upload video files.
![Page 16: Creating Interactive Video using H5P video webinar 22 May 2020.pdf · source content collaboration framework based on JavaScript. To create, share and reuse interactive HTML5 content](https://reader033.vdocument.in/reader033/viewer/2022043018/5f3a49587653e82ee2029b3d/html5/thumbnails/16.jpg)
Step 2: Add interactions.
Press the Add
interactions
tab
![Page 17: Creating Interactive Video using H5P video webinar 22 May 2020.pdf · source content collaboration framework based on JavaScript. To create, share and reuse interactive HTML5 content](https://reader033.vdocument.in/reader033/viewer/2022043018/5f3a49587653e82ee2029b3d/html5/thumbnails/17.jpg)
Step 2: Add interactions.
Use the toolbar to add interactions
![Page 18: Creating Interactive Video using H5P video webinar 22 May 2020.pdf · source content collaboration framework based on JavaScript. To create, share and reuse interactive HTML5 content](https://reader033.vdocument.in/reader033/viewer/2022043018/5f3a49587653e82ee2029b3d/html5/thumbnails/18.jpg)
Step 2: Add interactions : Multiple choice item
To add multiple choice item, click on icon in the toolbar
• Display time
• Pause
• Display as
![Page 19: Creating Interactive Video using H5P video webinar 22 May 2020.pdf · source content collaboration framework based on JavaScript. To create, share and reuse interactive HTML5 content](https://reader033.vdocument.in/reader033/viewer/2022043018/5f3a49587653e82ee2029b3d/html5/thumbnails/19.jpg)
Step 2: Add interactions :Text based interaction
click on icon in the toolbar
![Page 20: Creating Interactive Video using H5P video webinar 22 May 2020.pdf · source content collaboration framework based on JavaScript. To create, share and reuse interactive HTML5 content](https://reader033.vdocument.in/reader033/viewer/2022043018/5f3a49587653e82ee2029b3d/html5/thumbnails/20.jpg)
Step 2: Add interactions :Text based interaction
![Page 21: Creating Interactive Video using H5P video webinar 22 May 2020.pdf · source content collaboration framework based on JavaScript. To create, share and reuse interactive HTML5 content](https://reader033.vdocument.in/reader033/viewer/2022043018/5f3a49587653e82ee2029b3d/html5/thumbnails/21.jpg)
Step 2: Add interactions :Text based interaction
![Page 22: Creating Interactive Video using H5P video webinar 22 May 2020.pdf · source content collaboration framework based on JavaScript. To create, share and reuse interactive HTML5 content](https://reader033.vdocument.in/reader033/viewer/2022043018/5f3a49587653e82ee2029b3d/html5/thumbnails/22.jpg)
Step 2: Add interactions :Multiple choice item
click on icon in the toolbar
![Page 23: Creating Interactive Video using H5P video webinar 22 May 2020.pdf · source content collaboration framework based on JavaScript. To create, share and reuse interactive HTML5 content](https://reader033.vdocument.in/reader033/viewer/2022043018/5f3a49587653e82ee2029b3d/html5/thumbnails/23.jpg)
Step 2: Add interactions :Multile choice item
![Page 24: Creating Interactive Video using H5P video webinar 22 May 2020.pdf · source content collaboration framework based on JavaScript. To create, share and reuse interactive HTML5 content](https://reader033.vdocument.in/reader033/viewer/2022043018/5f3a49587653e82ee2029b3d/html5/thumbnails/24.jpg)
Step 2: Add interactions : Multiple choice item
Create
question and its
choices
Check the
option correct for
answer
![Page 25: Creating Interactive Video using H5P video webinar 22 May 2020.pdf · source content collaboration framework based on JavaScript. To create, share and reuse interactive HTML5 content](https://reader033.vdocument.in/reader033/viewer/2022043018/5f3a49587653e82ee2029b3d/html5/thumbnails/25.jpg)
Step 3: Summary Task
![Page 26: Creating Interactive Video using H5P video webinar 22 May 2020.pdf · source content collaboration framework based on JavaScript. To create, share and reuse interactive HTML5 content](https://reader033.vdocument.in/reader033/viewer/2022043018/5f3a49587653e82ee2029b3d/html5/thumbnails/26.jpg)
Step 3: Summary Task : Overall feedback
![Page 27: Creating Interactive Video using H5P video webinar 22 May 2020.pdf · source content collaboration framework based on JavaScript. To create, share and reuse interactive HTML5 content](https://reader033.vdocument.in/reader033/viewer/2022043018/5f3a49587653e82ee2029b3d/html5/thumbnails/27.jpg)
Step 3: Summary Task : Behavioral settings
![Page 28: Creating Interactive Video using H5P video webinar 22 May 2020.pdf · source content collaboration framework based on JavaScript. To create, share and reuse interactive HTML5 content](https://reader033.vdocument.in/reader033/viewer/2022043018/5f3a49587653e82ee2029b3d/html5/thumbnails/28.jpg)
Finishing up
Click “save” button