Content area
Full Text
(ProQuest: ... denotes formulae omitted.)
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 tum 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 (http://go2sm.com/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...