🧠 What is an H5P Interactive Video?
An H5P Interactive Video takes a regular video—whether uploaded or from platforms like YouTube—and turns it into a dynamic, engaging learning tool by layering interactive elements on top. These could include:
- Labels that introduce characters or visuals
- Questions that test comprehension mid-video
- Information pop-ups, images, or even navigation paths that guide or challenge the viewer
Think of it as a way to stop passive watching and turn it into active learning—where the viewer responds, explores, and reflects as they watch.
🔧 Getting Started – Setting Up the Video
Step 1: Installing & Launching the Module
- In WordPress, navigate to H5P > Add New.
- Choose Interactive Video from the content types list. If not installed, click “Get” to download it.
Step 2: Adding the Video
You can:
- Upload a video file from your computer
- Use a YouTube URL (easiest, but limited in control)
- Paste it and click Insert to load it into your project
Note: YouTube videos come with branding and suggestion overlays—great for simplicity, but a bit messy visually.
🏗 Structuring Your Interactive Video
Once the video is in place, you move on to building the interaction. The process involves three core layers:
1. Basic Settings
You define key attributes like:
- Title of the activity
- Start time (e.g. skip an intro and start at 00:07)
- Autoplay, looping, or preventing fast-forward
- Chapters/bookmarks, if you want users to navigate by section
You can also enable global behavior like:
- Allowing retries on questions
- Showing the “Show solution” button
- Opening the chapter/bookmark menu on start
🧱 Building Interactions – What You Can Add
This is where the video comes alive. You pause at specific moments and overlay interactive tools.
🔖 1. Labels
- Simple floating text boxes to point out names, items, or details.
- Example: Label “Becky” appears when she’s introduced, from 00:07 to 00:17.
- These don’t pause the video—just annotate it.
❓ 2. Questions
Add learning checkpoints with various question types:
- Single Choice Set: One correct answer from a list. You can show it with a button that the user clicks.
- Multiple Choice: More than one correct answer.
- True or False
- Fill in the Blanks
- Drag & Drop, Mark the Words, etc.
You control:
- Whether they pause the video
- If users can retry
- Whether they need the correct answer to continue
🖼 3. Posters
Instead of a button, a poster pops up automatically, pausing the video. You can:
- Add images (e.g. US flag)
- Pose questions or notes without needing clicks
🧩 4. Text & Tables
- Text boxes: Informational pop-ups—e.g. “Mark and Todd enter the room.”
- Tables: Display quick-reference info, like character comparisons or timelines.
You can customize:
- Background color, opacity
- Text size, boldness, alignment
- Timing and visual style
🔗 Adding Links and Navigation
🌐 Links
- Add clickable links to external sites (e.g. Google, YouTube)
- Display as overlay text or embedded buttons
- Useful for extended reading or related videos
🧭 Navigation Hotspots
- Add clickable shapes (e.g. a blue circle) that transport the user:
- To a specific time in the video
- Or to a web URL
Great for letting users explore content out of order or branch into bonus material.
🔀 Crossroads – Branching Choices
Unique to H5P Interactive Video, Crossroads allow users to make decisions:
- Show a question like: “Where do you want to go next?”
- Offer paths like:
- “Go back to the beginning” (timestamp: 00:07)
- “Review the middle” (timestamp: 01:00)
- “Jump to the end” (timestamp: 01:45)
This gives learners autonomy in their journey—ideal for revision, non-linear narratives, or gamified scenarios.
📽 Preview & Test
Once everything is in place:
- Click Create to generate the interactive video
- Play through it to test each interaction
- Make sure:
- Labels appear and disappear at the right times
- Questions pause the video and respond properly
- Navigation and links work as expected
🧩 Summary of Elements You Can Add
| Type | Use Case | Example |
|---|---|---|
| Label | Name characters or items | “Becky”, “New York” |
| Text | Add narration or instructions | “Mark and Todd enter the room” |
| Table | Present structured info | “People vs Places” comparison |
| Questions | Check understanding | Fill in the blank, multiple choice |
| Poster | Auto-popup for focus moments | Image + question combo |
| Link | External resource | “Visit Google.com” |
| Navigation Hotspot | Clickable link on video | Circle to go to another timestamp |
| Crossroads | Choose your path | “Go back to start / end / middle” |
🏁 Final Thoughts
H5P’s Interactive Video tool transforms any basic video into an interactive, learner-driven experience. It’s especially powerful for:
- Language learning
- Online courses
- Training scenarios
- Educational storytelling
By combining video with embedded questions, branching paths, and rich overlays, it becomes more than just a viewing experience—it becomes active learning.
📢 Want more interactive content tutorials?
👉 Subscribe to Ed-Hermit on YouTube for weekly deep dives into H5P, WordPress, and other education technology for building engaging digital content: youtube.com/@edu-hermit
Got questions or creative ways you’re using H5P? Drop them in the comments—I’d love to hear what you’re building!
Leave a Reply