You can incorporate both standard and interactive videos into your learning content using H5P. Either format may be made fully accessible.* You can create a standalone interactive video using H5P’s Interactive Video content type, or you can incorporate an interactive or standard video into the following formats:
- Course Presentation (my personal favorite)
- Column (makes slick webpage-like content)
- Quiz (Question Set) (allows you to display a video before quiz results, but you can’t add videos to individual questions)
In the Course Presentation format and the Column format, you have the option to add either a standard video or an interactive video. Adding an interactive video will automatically add a Summary slide to the end of your Course Presentation to show the user’s total score for the tutorial. If your interactive video doesn’t have any interactions, user will see a total score of 0/0. At this time, H5P does not offer a way to convert a standard video to interactive, or vice versa, or a way to import an existing H5P video into a Course Presentation or Column.
Whichever format and features you choose, be sure to save your work often! If you accidentally close your browser, you’ll lose your unsaved changes.
Embedding Your Video
Once you’ve selected your content type, H5P makes it relatively easy to add your video. You can choose to upload a video file, or to embed a video from YouTube or another video source.
I recommend uploading a video file when you can. Content embedded from an external source is more likely to have technical issues, for instance, if the source is offline, or if the content is blocked (sometimes a learning or content management system will block unsecure content, you may want to test first if you’re not sure). However, if you want to make your video fully accessible, you will have to manually upload captions to accompany uploaded video files, whereas captions may already be incorporated into a YouTube video.
Uploading a Video File
H5P suggests loading a video as both MP4 format and in WebM format to ensure that it plays. WebM is an open media file format. The vast majority of web browsers support the MP4 format, which is an exceedingly common format for video, but the Opera browser does not. You can feel confident that your favorite video editor/converter exports to MP4. Unfortunately, my favorite video editing software Camtasia does not publish to WebM, but conversion is possible using free and open software like Miro Video Converter. You can check if a given browser supports a given format using Can I use _ ? If you upload both the MP4 and WebM formats of your video, H5P will use the WebM version as a backup in case the MP4 doesn’t work.
Embedding a Video from Another Source
One benefit of embedding a video from another source is that it may already be captioned, and you won’t have to prepare and upload additional files to make the video fully accessible. As I discussed earlier, a downside is that your H5P’s host platform may not support external content, or external content may end up being offline when it’s called to load.
In any case, adding a video from YouTube is very easy – you just have to paste in the URL. You can copy and paste the URL from your browser bar, or you can use the officially generated sharing URL.
Currently, Vimeo is not supported (though some comments online indicate that Vimeo Pro might be).
You can add MP4 videos hosted elsewhere by pasting in their URLs from your browser bar (e.g. http://lib-learning.fullerton.edu/Tutorials/Library-Research-Guide-Education.mp4).
Here’s a demo I made in H5P for you to see the different kinds of formats and captions:
Video Player Features
Whether you upload your own video, or embed from another source, H5P offers the ability to customize several features of the video player. It’s always important to give your learners control of the video, so that they can replay the parts that are unclear or pause it if they need to step away, so don’t remove any of the player’s features if you can help it.
Under accessibility guidelines*, the user must have the ability to play and pause the video. In H5P, all videos automatically have a player bar for media control. Player controls should include “play, pause, stop, jump to beginning, jump to end, scale player size (up to full screen), adjust volume, mute, captions on/off” and more (don’t panic, most of these are available by default or built into the browser, see source at w3.org. These features are availability by default in the H5P player).
Videos can be set to automatically play, or to play in a loop. Captions, subtitles, descriptions, and chapters can be added to videos. See more on this, below.
H5P is fairly unique in allowing you to take YouTube videos and add a wide variety of interactivity to them. There are commercial vendors out there, some free, that will do this as well, but H5P stands alone in being open and free. Adding interactivity is a great way to keep your learner’s attention and to reinforce understanding of important concepts. It’s also possible to create a choose-your-own-adventure type of video by incorporating Crossroads or Navigation hotspots to jump to various cue points based on the learner’s actions.
H5P’s interactivity features are very robust. These are the elements that you can add to your video:
- Media (Label, Text, Table, Link, Picture)
- Quiz question (Statement, Single choice, Multiple choice, True/false, Fill in the blanks)
- Other interactives (Drag and drop, Mark the words, Drag text)
- Crossroads (asks users to make a choice, then jumps to a cue point based on that choice)
- Navigation hotspot (Jump to a given cue point when user selects)
These elements appear at a point that you designate in the video’s timeline. You may choose to either automatically pause the video when they appear, or to show the element for a given amount of time before it disappears. You can also set the interactive element to automatically unpause the video once the user interacts.
Any interactive video that you create and host on H5P.org does not collect analytics. If you’d like to collect analytics, you’ll have to install H5P on your own server, add the relevant plugin to your own LMS or CMS, or get a paid account with H5P.com once it emerges from beta.
Make Your Video Accessible
To be fully accessible*, your video should have:
- Player control (see Video Player Features, above)
- Rarely, audio descriptions of visual content
Add a caption file to your video in the Accessibility panel. H5P allows you to add four kinds of what it calls Tracks: Captions, Subtitles, Descriptions, and Chapters. You have the option to add multiple tracks, which means that you could add multiple languages of captions, you could add subtitles, or you can add full audio descriptions.
Get more information about each of these track formats:
Text that overlays the screen that provides usability for people that are hard of hearing or deaf. Captions convert audio content into text. They should not only spell out voiceovers or dialogue, they should also include description of sound effects or music. Captions should indicate who is speaking. In addition to captions, a downloadable transcript should be provided. (For captioning best practices, see Berkeley’s Captioning Standards and Best Practices). Captions are required for 508 compliance/under WCAG 2.0, but they do not have to be provided if the video duplicates information that is already presented in text (see W3C’s explanation).
Captions benefit anyone with aural disabilities, anyone that cannot or prefers not to watch the video with sound (employees watching while working a service desk, for instance, or someone trying not to wake their baby) or anyone that just likes to have the captions on to help with focus or understanding or learning the language.
Text that overlays the screen that is in a language other than the video’s language. Subtitles benefit watchers that do not speak the language, or that just enjoy the additional understanding that comes from using subtitles. Like captions, subtitles should represent voiceovers and dialogue – any kind of verbal speech. Subtitles do not have to describe sound effects or music (though you might consider translating music lyrics should it be significant). Subtitles are not required under Section 508.
Text that describes the video and its content. Video descriptions are intended for users whose devices do not support video, or those that do not want to use a screen, or for people with visual disabilities.
Textual metadata that allows users to jump to preset points in a video.
H5P only accepts captions formatted as WebVTT. You can convert SRT (SubRip) captions to WebVTT using the copy-and-paste feature in this handy website: http://www.webvtt.org/.
Need to create captions? No problem. If you have a transcript of your video, you can upload both the video and the transcript into YouTube and sync the transcript. You can also just upload the video and have YouTube auto-generate the captions, though you will have to edit them. You can leave your video on YouTube and the captions will be accessible, or you can download the captions as SRT, convert them to WebVTT, and upload the video and captions to your H5P project.
H5P allows you to add multiple tracks to accompany your video, even to your YouTube videos (except for YouTube videos used as Interactive Videos). You can add captions or subtitles in multiple languages. You can add audio descriptions of your video for users with visual disabilities, but this is only required under accessibility guidelines in instances where there is data or content onscreen that is not covered by the voiceover/dialogue (see W3.org for more).
- Miro Video Converter (MP4 to WebM): http://www.mirovideoconverter.com/
- Captions converter (SRT to WebVTT): http://www.webvtt.org/
- Handy reference for media supported by web browsers: https://caniuse.com/
- Using YouTube to produce captions: https://lindsay-oneill.com/create-closed-captions-with-youtube/
- H5P’s official tutorial on Course Presentations: https://h5p.org/tutorial-course-presentation
- H5P’s official tutorial on Interactive Video: https://h5p.org/tutorial-interactive-video
* WCAG 2.0 AA is the accessibility standard that Section 508 requires. The guidelines in this blog post belong to this standard. If you work in a public or government institution, this is most likely the standard you have to meet.