Fullscreen Traps for HTML5 Video (on mobile)

2014-03-13 | #android, #ios, #webdev

Yes, it generally works ... BUT:

Not from an iFrame ... if you don't use these experimental iframe-attributes: allowFullScreen="true" webkitAllowFullScreen="true" mozAllowFullScreen="true"

Not without a clear user interaction such as a click on a button.

So, no auto playing video in fullscreen for you!

Example implementation with video.js:

var touchEventsPresent = 'createTouch' in document;
var ua = navigator.userAgent;
var isMobileDevice =
  touchEventsPresent 
  && (
    ua.match(/(iPhone|iPod|iPad)/i)
    || ua.match(/(BlackBerry|PlayBook)/i)
    || ua.match(/Android/i)
    || ua.match(/IE\sMobile\s[0-9]{0,2}/i)
    || ua.match(/Opera Mobi/i)
    || ua.match(/Kindle/i)
  )
;
if( isMobileDevice ){
  vjs.el().addEventListener('click', function(){
    if( vjs.paused() && !vjs.isFullScreen() ){
      vjs.requestFullScreen();
    }
  });
}