How to Create Interactive HTML5 Video
Slowly but surely, HTML5 browsers have come to enable rich video experiences. In this article, you’ll learn how to go beyond basic video playback by adding playlists, chapter markers, poster frames, scrub bar thumbnails, and more.
Today, most web-based video is delivered in basic “press play” experiences; viewer controls tend to be limited to a play/pause button, a seek bar, and possibly a volume control.
If you just use the <video> tag’s native controls, your video experience will likely vary depending on the browser. Increasingly, though, your viewers expect to have a consistent playback experience, one that includes the options commonly found on social media video portals, such as Facebook or YouTube.
Thankfully, you don’t need to break the bank to turn a basic HTML5 video player into an enhanced playback experience that can meet your viewers’ expectations.
In the January/February issue of Streaming Media, I reviewed five off-the-shelf HTML5 video players. While most of those players can be adapted with custom HTML, JavaScript, and CSS to accommodate all of the features discussed in this article, I picked JW Player 6 as the standard by which enhanced interactivity can be applied without requiring too much billable time from a web developer. (You can find more information and examples related to my last article and this article at videorx.com/players.)
Limitations of Mobile Browsers
The No. 1 factor to keep in mind with any HTML5 video experience is that mobile browsers, by and large, will not permit any customization while viewing in fullscreen mode. When playing video in fullscreen, both smartphone and tablet screens usually play browser-based video with the native video playback “chrome” specific to the operating system or browser.
Further, on many smartphones, video will only play in fullscreen mode, with native chrome -- on these platforms, there is no way to playback video inline, inside of a webpage. (Inline playback is defined as playback within the web page region where the video is initialized.)
In one sense, this built-in functionality renders all browser-based video playback equal, from your content to your competitor’s content. However, this negates the possibility of implementing any custom functionality in fullscreen mode. The only way around this current limitation is to build a native application for mobile deployment -- but at the cost of building the software and deploying it to an app store.
Mobile browsers on tablets generally permit inline video playback with customized player interfaces and overlays, as do some newer Android browsers. For example, if you want to display a graphic on top of your video, the iPad’s Safari Mobile browser will display the overlay while you’re watching the video on the page. However, if you view the video in full screen mode, the browser will remove the overlay.
Enhancement #1: Poster Frames
Many videos on the web do not include a simple poster frame, or a still image from the video clip, to indicate to the viewer the nature of the content. HTML5’s <video> tag supports a poster attribute, which enables you to display any browser-compatible graphic as an initial preview or representation of your video clip (Figure 1).
An example of a simple poster frame, something lacking from most web videos but easily delivered via an HTML5 player.
Typical formats for poster images include JPEG and PNG, although you can also use a GIF or SVG. The default behavior of the poster frame is consistent across all browsers in that the image is displayed on initial page load. When the user clicks the play button, the poster frame disappears and the video begins to play.
If your preferred approach to implement a video player is the use of a static <video> tag, you can specify the image in the poster attribute. Figure 1 shows how the native video player of Apple Safari Mac 6.1.1 displays a poster frame.
<video id=”player” src=”video.mp4” poster=”image.jpg” controls></video>
Off-the-shelf web video players will differ in their JavaScript APIs for specifying a poster frame. JW Player 6 refers to the poster frame as an image property in the initial setup call:
jwplayer(“player”).setup({
image: “http://example.com/poster.jpg”,
file: “http://example.com/video.mp4”,
width: 640,
height: 360
});
Poster frames can also improve your video’s metadata for search engines. For this reason, regardless of your approach of inserting a video player on a web page, I recommend including a static <video> tag wherever video is displayed. (OTS players such as JW Player can dynamically replace <div> targets with customized <video> markup.) Also, if a single piece of video is the primary content of a page, you can add OpenGraph markup to the <head> section of your HTML page indicating a poster frame, such as:
<meta property=”og:image” content=”http://example.com/poster.jpg”/>
Note that the URL for the content attribute should be an absolute URL with the full path to the image. OpenGraph data is utilized by sites such as Facebook to provide summary information about a link that is embedded in a post.
Enhancement #2: Scrub Bar Thumbnails
Just as a poster frame provides context for a video that is available for playback, preview frames of the entire video displayed while scrubbing the seek bar provide instant feedback to a viewer looking to jump ahead to a specific section of the video, as shown in Figure 2. Any long-form content, from elearning videos to sport fishing videos, will benefit from this enhancement. Some content, such as videos that must be watched in a testing scenario or a live event, will not need scrub bar thumbnails.
Preview frames that are displayed while scrubbing the seek bar provide instant feedback to a viewer looking to jump ahead to a specific section of the video.
The HTML5 video tag does not currently support a thumbnail capability for the seek bar. However, more and more off-the-shelf web video players support scrub bar thumbnails, including JW Player 6 and Video.js. JW Player 6’s API natively supports the thumbnail capability, while Video.js requires a small separate JavaScript plug-in file for the additional feature. If you’re building your own custom HTML5/JavaScript/CSS player, you can mimic this behavior as well by loading thumbnail images over your custom scrub bar.
There are two approaches to loading thumbnail images for video scrubbing:
In the first approach, create individual preview image files, sized around 80x45 (16:9) or 80x60 (4:3), from a preferred interval across the duration of your video. I prefer to create a thumbnail for every 10 seconds of video. For example, with a 60-second video, six thumbnails are generated: one at the start, another at 10 seconds, another at 20 seconds, and so on. Each thumbnail image is a separate image file, as shown in Figure 3.
One approach to creating scrub bar thumbnails is to generate images at particular intervals, such as every 10 seconds, across the duration of a video.
In the second approach, create a thumbnail sprite sheet, containing all of the thumbnail images, as shown in Figure 4. The player only loads one file in memory, and selectively carves out and displays the appropriate region of the sprite sheet as the viewer scrubs the video. Thankfully, FFmpeg can create this type of image very easily. This method is my preferred approach, as it reduces the number of files to store along with the rest of your video files. A reference file (or JavaScript code) is also necessary to “instruct” the player where to find the appropriate thumbnail within the image. JW Player 6 refers to this reference file as a thumbnail track, and uses WebVTT formatting for the data. Video.js, via the Javascript plug-in mentioned earlier, uses a similar formatting for the data specified directly in the JavaScript that accompanies the Video.js player.
Another way to generate scrub bar thumbnails is to create a sprite sheet containing all of the thumbnail images.
Perhaps future implementations of metadata for video formats will enable an automatic thumbnail cache that can be loaded directly from the video file at the start of playback, freeing us from the tasks of creating additional media files to accompany the video playback process.
Enhancement #3: Chapter Markers
Chapter markers can also improve the interactivity of your HTML5 video player, as shown in Figure 5. While some HTML5 browsers such as Internet Explorer 10+ and Google Chrome natively support a <track> node within a <video> tag structure, most chapter implementations rely on customized video player JavaScript code to overlay chapter visuals within the player’s controls. Many OTS video players, including MediaElement.js, Video.js, and JW Player 6, support chapter tracks.
Chapter markers offer navigational cues that help viewers find particular parts of a video clip.
Both Video.js and JW Player 6 can use a WebVTT file to delineate chapter positions and titles for a video clip. Here’s the text of a sample WebVTT file containing four chapters:
WEBVTT
Chapter 1
00:00:09.743 --> 00:01:13.506
Introduction
Chapter 2
00:01:13.506 --> 00:01:55.315
Grand Coulee Dam
Chapter 3
00:01:55.315 --> 00:02:20.340
Irrigation
Chapter 4
00:02:20.340 --> 00:02:31.518
Barges
Enhancement #4: Playlists
If you have several video clips to be played sequentially and perhaps continuously, you can build a video player that supports playlists. Playlists are useful in a wide range of video applications, from e-learning courseware to episodic live action content. You can also use playlist functionality to inject promotional or advertising content between video clips.
Related Articles
Media source extensions, encrypted media extensions, and DASH offer new possibilities for player-based DRM and increase HTML5's appeal to video publishers.
17 Jul 2015
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.
22 Aug 2014
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.
13 Jan 2014
Companies and Suppliers Mentioned