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:

• HTML5 video tag support
• Browser support
• File format support

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:

• Video JS
• Media Element JS
• Kaltura and some others

Mozilla links

Mozilla has some great articles on web video:

• Live streaming web audio and video
• Setting up adaptive streaming media sources
• Audio and video delivery
• Cross browser video player

Other useful Links

• iOS-Specific Considerations
• Apple Airplay