Videos and Firefox OS

Before HTML5

Those were dark times Harry, dark times – Rubeus Hagrid

Before HTML5, displaying video on the Web required browser plugins and Flash.

Luckily, Firefox OS supports HTML5 video so we don’t need to support these older formats.

Video support on the Web

Even though modern browsers support HTML5, the video formats they support vary:

In summary, to support the most browsers with the fewest formats you need the MP4 and WebM video formats (Firefox prefers WebM).

Multiple sizes

Now that you have seen what formats you can use, you need to decide on video resolutions, as desktop users on high speed wifi will expect better quality videos than mobile users on 3G.

At Rormix we decided on 720p for desktop, 360p for mobile connections, and 180p specially for Firefox OS to reduce the cost in countries with high data charges.

There are no hard and fast rules — it depends on who your market audience is.

Streaming?

The best streaming solution would be to automatically serve the user different videos sizes depending on their connection status (adaptive streaming) but support for this technology is poor.

HTTP live streaming works well on Apple devices, but has poor support on Android.

At the time of writing, the most promising technology is MPEG DASH, which is an international standard.

In summary, we are going to have to wait before we get an adaptive streaming technology that is widely accepted (Firefox does not support HLS or MPEG DASH).

DIY Adaptive streaming

In the absence of adaptive streaming we need to try to work out the best video quality to load at the outset. The following is a quick guide to help you decide:

Wifi or 3G

Using a certified Firefox OS app you can check to see if the user is on wifi or not.

var lock    = navigator.mozSettings.createLock();
var setting = lock.get('wifi.enabled');
 
setting.onsuccess = function () {
  console.log('wifi.enabled: ' + setting.result);
}
 
setting.onerror = function () {
  console.warn('An error occured: ' + setting.error);
}

https://developer.mozilla.org/en-US/docs/Web/API/Settings_API

There is some more information at the W3C Device API.

Detecting screen size

There is no point sending a 720p video to a user with a screen smaller than 720p. There are many ways to get the different bounds of a user’s screen; innerWidth and width allow you to get a good idea:

function getVidSize()
{
  //Get the width of the phone (rotation independent)
  var min = Math.min($(window).innerHeight(),$(window).innerWidth());
  //Return a video size we have
  if(min < 320)      return '180';
  else if(min < 550) return '360';
  else               return '720';
}

http://www.quirksmode.org/m/tests/widthtest.html

Determining internet speed

It is difficult to get an accurate read of a user’s internet speed using web technologies — usually they involve loading a large image onto the user’s device and timing it. This has the disadvantage of having to send more data to the user. Some services such as: http://speedof.me/api.html exist, but still require data downloads to the user’s device. (Stackoverflow has some more options.)

You can be slightly more clever by using HTML5, and checking the time it takes between the user starting the video and a set amount of the video loading. This way we do not need to load any extra data on the user’s device. A quick VideoJS example follows:

var global_speedcount = 0;
var global_video = null;
global_video = videojs("video", {}, function(){
//Set up video sources
});
 
global_video.on('play',function(){
  //User has clicked play
  global_speedcount = new Date().getTime();
});
 
function timer()
{
  var diff = new Date().getTime() - global_speedcount;
  //Remove this handler as it is run multiple times per second!
  global_video.off('timeupdate',timer);
}
 
global_video.on('timeupdate',timer);

This code starts timing when the user clicks play, and when the browser starts to play the video it sends timing information to timeupdate. You can also use this function to detect if lots of buffering is happening.

Detect high resolution devices

One final thing to determine is whether or not a user has a high pixel density screen. In this case even if they have a small screen it can still have a large number of pixels (and therefore require a higher resolution video).

Modernizr has a plugin for detecting hi-res screens.

if (Modernizr.highresdisplay)
{
  alert('Your device has a high resolution screen');
}

WebP Thumbnails

Not to get embroiled in an argument, but at Rormix we have seen an average decrease of 30% in file size (WebP vs JPEG) with no loss of quality (in some cases up to 50% less). And in countries with expensive data plans, the less data the better.

We encode all of our thumbnails in multiple resolutions of WebP and send them to every device that supports them to reduce the amount of data being sent to the user.

Mobile considerations

If you are playing HTML5 videos on mobile devices, their behavior differs. On iOS it automatically goes to full screen on iPhones/iPods, but not on tablets.

Some libraries such as VideoJS have removed the controls from mobile devices until their stability increases.

Useful libraries

There are a few useful HTML5 video libraries:

Mozilla links

Mozilla has some great articles on web video:

Other useful Links

About Mark Wheeler

CTO at Rormix - Music worth watching

More articles by Mark Wheeler…

About Havi Hoffman

Content wrangler & cat herder on the Developer Relations team. Also Mozilla Hacks blog editor and Mozilla Tech Speakers program co-founder.

More articles by Havi Hoffman…


6 comments

  1. Daniel Davis

    A good checklist for video on the web in general, not just Firefox OS.

    I’m curious though, why you’d use JavaScript to detect the screen size when you can use media queries within a video’s source element:
    http://www.iandevlin.com/blog/2012/08/html5/responsive-html5-video

    December 6th, 2014 at 00:38

    1. Mark Wheeler

      Daniel,

      A good point. Screen size detection is just part of the formula for working out what quality video to use, and personally I prefer to have all the code detecting the quality in the same place (in this case all in JS – rather than mixing it with CSS).

      Also, if you need to support older browsers (using Flash) then media queries in the source element wouldn’t work.

      December 8th, 2014 at 20:33

  2. Daniel Davis

    Thanks for the reply. That makes sense.

    The media queries would be in the “media” attribute of the source element rather than CSS but I get your point. It seems to be a matter of preference but I agree the JS is needed to provide responsive video for older browsers too.

    December 9th, 2014 at 07:11

  3. Benergy Sam

    nice tutorial thanks

    December 9th, 2014 at 10:47

  4. Shmerl

    Do you know if MPEG-DASH is a patent free technology or not? I didn’t find clear information on this subject.

    January 1st, 2015 at 19:29

    1. Shmerl

      Also, can’t Firefox can support MPEG-DASH using Media Source Extensions? While it’s not ready, but it’s WIP in Firefox. MPEG-DASH is a server side technology, while MSE is the client side JavaScript API which allows using MPEG-DASH.

      January 1st, 2015 at 19:31

Comments are closed for this article.