HTML5 best strategies

August 20, 2014 at 4:52 pm

As many probably already know HTML5 support for video  formats varies from browser to browser.

Most popular format, currently supported by majority browsers and mobile devices is MP4  h264 encoded. However if you set HTML5 player as default player for desktop browsers it will not play MP4/h264 in such important browsers like Firefox and Opera.

H.264/MPEG-4 video compression format  is patented  algorythm and commercial users of it are expected to pay patent high licensing fee. Firefox and Opera are not happy with it.

Both, Opera and Firefox support free WEBM format. As Nuevoplayer for single playback allows to define multiple videos of different format it’s possible to provide at least 2 formats: one video h264/MPEG-4 and one of WEBM format. In such situation browser will autoomatically decides which format is valid and possible to play.

This is what we use on Nuevolab demo pages. For each presented video we define at least 2 video files, mp4 and webm.

See example setup code:

<script type="text/javascript" id="nuevo" src="/nuevo/player.js">
<script type="text/javascript">
nvplayer.start( {
      id:'player',	// same as div id container
      regkey: xxxx,	// your registration key for flash player
      file: 'http.www.yourdomain.com/example.mp4',
      webm: 'http.www.yourdomain.com/example.webm',
      image: 'http.www.yourdomain.com/example.jpg',
      width:'740',	// player width
      height:'464'	// player height
}); 
</script>

And what if we want to have HD version of video in HTML4 player? It’s possible if you define a link to HD video in both froats. See example:

<script type="text/javascript" id="nuevo" src="/nuevo/player.js">
<script type="text/javascript">
nvplayer.start( {
      id:'player',	// same as div id container
      regkey: xxxx,	// your registration key for flash player
      file: 'http.www.yourdomain.com/example.mp4',
      filehd: 'http.www.yourdomain.com/example_hd.mp4',
      webm: 'http.www.yourdomain.com/example.webm',
      webmhd: 'http.www.yourdomain.com/example_hd.webm',
      image: 'http.www.yourdomain.com/example.jpg',
      width:'740',	// player width
      height:'464'	// player height
}); 
</script>

And finally, what if your main video is FLASH type (FLV)? Most of video script still use such format as default one. Using Nuevoplayer still you can support HTML5 playback if you additionally provide links to html5 compliant video files. You can even support HD option. Below you will find example setup code where default video to play is FLV (flash) format, HD video is h264/MP4 format, lower quality h264/MP4 video id for HTML5 playback and finally 2 webm (normal and HD) defined.

<script type="text/javascript" id="nuevo" src="/nuevo/player.js">
<script type="text/javascript">
nvplayer.start( {
      id:'player',	// same as div id container
      regkey: xxxx,	// your registration key for flash player
      file: 'http.www.yourdomain.com/example.flv',
      filehd: 'http.www.yourdomain.com/example_hd.mp4',
      mp4: 'http.www.yourdomain.com/example.mp4',
      webm: 'http.www.yourdomain.com/example.webm',
      webmhd: 'http.www.yourdomain.com/example_hd.webm',
      image: 'http.www.yourdomain.com/example.jpg',
      width:'740',	// player width
      height:'464'	// player height
}); 
</script>

Summarizing:
HTML5 player is basically for mobile/tablet playback. However if you have mp4/h264 encoded video and alternative in WEBM format, this should work fine for most important desktop browsers too (IE, Firefox, Opera, Safari).

Once you have both, mp4 and webm video files defined for Nuevoplayer, you can use option fallbackOrder: ‘html5,flash’ and have advantage or fast HTML5 playback also on desktop browsers, just like on our HTML5 demo page