How to Create Interactive HTML5 Video
(Note: Mobile browsers typically do not allow a video clip to start automatically without the viewer interacting with the user interface. As such, test any playlist functionality you’re building on each target platform.)
After a playlist has initialized in JW Player, the viewer can choose a video from the playlist interface.
As you plan and construct a browser-based video experience for content catalogs, how you segment your video can be critical to a positive user experience. For example, do you create chapters within one video clip, or do you create separate clips and treat them as a playlist?
Depending on your streaming server and player codebase, you may be able to carve out different options on the fly. For example, with Wowza Streaming Engine 4 and JW Player 6, you can use start and duration parameters in HTTP streaming URLs to divide one video clip into independent items for a playlist, as shown in Figure 6. Alternatively, you can use a chapter track to showcase the same divisions within one clip, as shown earlier in Figure 5.
Enhancement #5: Captions
Last but not least, captions for video provide assistance for the hearing impaired, and provide an alternate means for viewers to experience the content without listening to the audio. Captions can also enhance the seek experience by enabling a viewer to scan for keywords displayed in the captions. For example, if you’re watching a how-to video on hardwood floor installation and want to jump to a section where the narrator mentions the word “fir,” you can scrub the video for that caption text. Figure 7 shows the display of caption text using JW Player 6.
Caption text displayed using JW Player 6.
(Note: In the United States, if your online video content has been aired on broadcast TV with captions, you likely need to include closed captioning capabilities with the online version. For more information on the Twenty-First Century Communications and Video Accessibility Act of 2010 (CVAA).)
00:00:11.170 --> 00:00:14.330
The Columbia is one of America’s great and useful rivers.
00:00:14.330 --> 00:00:18.350
The largest North American river to flow into the Pacific Ocean,
00:00:18.350 --> 00:00:22.920
it begins with a small mountain stream in the snow fields at the Canadian Rockies
00:00:22.920 --> 00:00:26.660
and enters the United States near the northeast corner of Washington.
Regardless of which web video player implementation you use, mobile browsers that don’t support the <track> tag will once again prevent the display of custom overlays -- including caption text -- when the video is viewed in full screen mode.
As you might expect, Apple supports specific captioning capabilities that can be directly embedded into the video stream. For video on demand (VOD) and live streaming via Apple HLS, you can use CEA-608 tracks to carry the captioning data. Streaming media servers such as Wowza Streaming Engine 4 can automatically merge caption data from SRT or WebVTT files with VOD streams delivered over HTTP streaming protocols such as Apple HLS, Adobe HDS, or MPEG-DASH.
You may also add subtitle or caption tracks to MPEG-4 video files before you store the content for delivery over standard HTTP range-request, such as Akamai NetStorage and Amazon S3. The native video player chrome of Apple iOS shows a caption button on the control bar whenever compatible tracks are loaded during playback. You may need to view the video in fullscreen mode to see the caption button enabled on the control bar.
(Note: Wowza Media Systems provides a tutorial on closed captions via HLS. The example shows how the captions button appears during VOD playback on iOS devices.)
Interactivity in Future Browsers
When Adobe Flash Player less-than-gracefully exited from the mobile space in late 2011, the onus was put on to HTML5 browser vendors to replace the interactive feature set of Flash Player-based experiences. It’s now 2014, and we’ve yet to see browser vendors rally around a true extended standard for HTML5 video.
Unfortunately, we haven’t seen support for the fullscreen API reach a critical mass of mobile devices. (Apple, you’re slowing the pace of progress here.) So, it remains impossible to create consistent interactive video landscapes across all desktop and mobile browsers.
Right now, mobile device manufacturers continue to push native apps for their platforms, as it’s in their financial interest to do so. For device manufacturers that control both a mobile operating system and a major desktop browser (think Apple and Google), building mobile browsers that support feature-rich web applications is not a high priority. Unless you are a major video outlet such as Netflix or Amazon Prime Instant Video with resources to build, maintain, and market a native app and a browser-based video experience, the cost to build enhanced interactive video players for both mobile and desktop platforms will be prohibitive.
For outlets with smaller budgets, I would recommend that you build video player enhancements with mobile browser restrictions in mind. Alternatively, if you are willing to forego cross-platform consistency in your viewing experience, you can push for a better desktop browser video experience for your audience, while recognizing the limitations of viewing on mobile devices.
This article appears in the June 2014 issue of Streaming Media magazine as "How to Create Interactive HTML5 Video."
Media source extensions, encrypted media extensions, and DASH offer new possibilities for player-based DRM and increase HTML5's appeal to video publishers.
How are viewers supposed to scan a QR code on a speeding race car? When it comes to selling with online video, even big brands miss the obvious.
We examine off-the-shelf video players MediaElement.js, Video.js, jPlayer, Flowplayer, and JW Player to show which of these five favorites is the best for any situation.
Companies and Suppliers Mentioned