Detect if client allows inline media playback for HTML5 video

Question

Is there a good way to detect if a client browser allows inline media playback for HTML5 video?

Update

I am not trying to s

Answer 1

The solution I'm using is this:

var video = document.createElement( 'video' );
...
video.addEventListener( 'playing', function () {
  // Note: we are adding event listener for 'playing' event, not for 'play' event!
  if ( video.webkitDisplayingFullscreen ) {
    console.log( 'Inline playback is not supported' );
  } else {
    console.log( 'Inline playback is supported' );
  }
}, false );

Now there is obviously a problem with this aproach: you don't know whether inline is supported or not until after the video has started playing. Also, the event may trigger multiple times if the user pauses the video (not really a problem, but you have to be careful).

I've tested this on iPod touch, iPhone, iPad, Nexus 5 and Htc One X. It provides correct resulsts on all of this deivces.

I don't know if it's going to work on android devices that play video in fullscreen by default. Personally, I've never saw an android device that plays video in fullscreen. But running my method on nexus 5 gives an interesting console log message:

'HTMLVideoElement.webkitDisplayingFullscreen' is deprecated. Please use the 'fullscreenchange' and 'webkitfullscreenchange' events instead.

So I presume that for android you'll have to use something like that:

video.addEventListener( 'webkitfullscreenchange', function ( e ) {
    if ( document.webkitIsFullScreen ) {
        console.log( 'Inline playback is not supported' );
    } else {
        console.log( 'Inline playback is supported' );
    }
}, false );

but personally, I never saw this event being fired. Neither on android, nor on iOS.

Some other things that I've tested on several iOS devices that DOESN'T WORK:

1. property video.webkitSupportsFullscreen - always returns false
2. events 'webkitendfullscreen' and 'webkitenterfullscreen' - these are the funny ones - webkitendfullscreen works just fine, but webkitenterfullscreen never gets fired

ADDED:

I actually managed to find an android device that only shows video in fullscreen (Fly IQ245 Plus). Although its behavior is very similar to that of iOS, I was unable to detect fullscreen change by any means mentioned above.