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();

}

});

}