Media & Entertainment Industry Trends, Technology and Research

#4 Technical Series : How to setup HTML5 video player – Part 1

Posted In New Media, OTT, Technical, Video Streaming - By Nitin Narang on Monday, May 18th, 2015 With No Comments »

HTML5 Video Player

HTML5 has brought incredible convinience to publishers wanting to put  video online and not worry about device and browser variants. Setting up a basic video on demand platform is as easy as having the content and putting together few lines of code and voila most modern browsers can play the video.  No more plugins, browser specific code and with few lines of code the job is done in no time. This one line of code is HTML5 video player in its basic form and is sufficient to play and control video in a web page.

<video controls> <source src="Hubble.mp4" type="video/mp4"> </video>

Decoding the code, we have a special <video> tag and two attributes namely controls and src

<video> : HTML5 video element
src: path of video file, multiple source files can be provided and browser uses the first format it can recognize while ignoring the rest. Codec MIME type is defined with type attribute
controls : To include basic play controls i.e play, pause, stop etc.

Some history of media players

Since the time video playback became functional on browser clients and hence typically all video we have ever consumed online has been with support of external plugins like QuickTime, RealPlayer and more recently Flash. Conversely absence of any standard and need to service video across multiple environments led to increased complexity and support issues. W3C in its 5th version of HTML commonly known as HTML5 introduced additional elements and most popular among them is video element. Almost all modern browsers, support video element which has made adding a video to your web page with just another HTML tag and as easy as adding an image. One no longer  has to worry about codecs, media frameworks, player plugins and all browsers supporting HTML5  standard magically play video using this simple element.  To know more about HTML5 video attributes, refer to W3c HTML5. In short the most important factor which has made HTML5 video element so popular is it acceptance across all major browsers to support consistent video playback for progressive download.

What is Progressive Download and Pseudo Streaming

Progressive download is a video delivery technique where web clients (browser) requests media from a web server using “HTTP Get”. It avoids the need to download the entire media file before video playback can start. The player uses the file metadata information which enable it to start playback as soon as a small part of video is download. Or simply put under a normal network condition, the video playback starts instantaneously.  In its historic form, progressive download had limitations with seeking ahead in timeline and was stickly linear download. But  today most web servers which are HTTP1.1 compliant support “accept-Ranges” enabling browser clients to support Pseudo-streaming. With Pseudo streaming, browser can requests a specific part of a file from the server using Range request header and server sends corresponding data to the client with a “206 Partial Content status code” and a content-Range header listing the range sent. This feature allows seeking to any position in the future timeline without the need to download the whole video until that point. In summary, player can jump ahead to a desired point in the timeline and play video in a non linear mode. Read here  to know more about other streaming technologies and their differences.

Coding with HTML5 video

  • One line code to get the basic video player working

Check player demogo-next-icon

<video width="600" height="400" controls> <source src="media/nature.mp4" type="video/mp4"> </video>
  •    Using multiple codec option is better

go-next-icon

Check player demo

Since there is no single codec which all browsers support , browsers unable to recognize file format will instead display a message “Video format or MIME type is not supported”.  Hence it is advisable to provide more than one source file option. When browser parses source attributes, it uses the optional type attribute to decide if it can play the file. Browser will use the first video source format it can play and will ignore the rest. To know more about commands to convert video for HTML5 supported formats, read here mp4, ogg and webm . Any text present between the <video> and </video> tags is displayed only if the browsers does not supports <video> element.

<H2> HTML5 player with multiple source options, video formats </H2>
<p>
<video width="600" height="400" controls>
  <source src="media/nature.ogv" type="video/ogg">
  <source src="media/nature.webm" type="video/webm">
  <source src="media/nature.mp4" type="video/mp4">
  Your browser is not supporting not support HTML5 video.
</video>
</p>

PS: Using the above code  Chroms, Firefox and opera will run the ogv video while Safari and IE will both ignore ogg and webm and play mp4 file.

  • Multiple codec and Flash fallback – Recommended

go-next-iconCheck player demo

While HTML5 is supported in most modern browsers recently, not all browser versions support HTML5 and same video formats. Hence it is recommended to provide a fallback option for flash for non supported clients. With this approach older browsers will show the Flash player, while modern browsers will use their native video capabilities to show whichever format video they can support.  As an example clients running IE6, IE7 and IE8 and older versions of Firefox and Opera will fall back to flash playback.

<video controls width="600" height="400">
	<source src="media/nature.mp4" type="video/mp4">
	<source src="media/nature.webm" type="video/webm">
        <source src="media/nature.ogv" type="video/ogg">

<!-- If the browser doesn't understand the <video> element, then reference a swf file -->
<object class="aligncenter" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf" width="560" height="315">
		<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf">
		<param name="allowFullScreen" value="true">
		<param name="wmode" value="transparent">
		<param name="flashvars" value="config={'clip': {'url':'media/nature.mp4','autoPlay':false, 'autoBuffering':true }}">
		<p>Your browswer does not support video...</p>
    
Download it</a> instead.</p>
	</object>
</video>

HTML5 Video Limitations

HTML5 introduction of video tag brings significant advantages to the ever fragmented and difficult to manage video player ecosystem. Today, the audience ecosystem is large and is rapidly expanding due to dependencies of new target platform, browsers, video codecs, media containers and streaming technologies.  HTML5 video element brings a standard way to embed video in a web page which works for most scenarios under progressive download for mobile and PC environments. But HTML5 video has its own set of limitations

  • HTML5 offers limited support for Adaptive streaming (except iOS which supports HLS natively with HTML5). Supports MPEG-DASH in few browsers with media source extensions
  • HTML5 supports progressive download which has limitations with content security due to local caching
  • HTML5 video cannot be used for live events and can only be used for existing stored video files
  • It has no provision to automatically adjust quality or switch streams based on client’s environment
  • HTML5 has no native support for content protection. Supports DRM with MPEG-DASH through encrypted media extensions
  • There is no universal codec and container which is supported by all browsers and hence need to create multiple renditions of the same content
  • Native support for few features like full screen mode etc. is not supported by all browsers

HTML5 Browser and Codec support

There is no single video codec which is supported by all browsers. Infact HTML5 video spec does not specifies which video formats browsers should support. Today, a majority of client environment (browser and OS combination) are covered with three video formats : MP4 (h.264 video, AAC audio), WebM (VP8 video, Vorbis audio) and Ogg (Theora video, Vorbis audio).

Browser NameInternet ExplorerChromeFirefoxSafariOpera
MP4YesYesYesYesYes
WebMNoYesYesNoYes
OGGNoYesYesNoYes

Getting video working is now easy with HTML5 video element… Check more later for some advanced video options available with HTML5

About - Digital Architect, Media Technology Consultant and Machine Learning Practitioner. I have passion for TV technology, digital convergence and changing face of Media and Entertainment industry. Currently having fun with AI and Machine Learning.