Detect If Client Allows Inline Media Playback For Html5 Video

Is there a good way to detect if a client browser allows inline media playback for HTML5 video? Update I am not trying to simply detect video support. I am trying to detect if a vi

Solution 1:

In iOS10 you can now have a video play inline if the playsinline attribute is added to the video tag.

You can detect this with ('playsInline' in document.createElement('video')).

However this isn't sufficient because this won't exist on desktop browsers - where obviously playing inline is a standard feature.

So this is what I came up with : If not iPhone / iPad then we just assume video can be played inline (this may fail for certain android devices). Otherwise run the test above to check for iOS10

Here is my Modernizr test.

Modernizr.addTest('inpagevideo', function ()
        {
            return navigator.userAgent.match(/(iPhone|iPod)/g) ? ('playsInline'indocument.createElement('video')) : true;
        });

Solution 2:

Whereas the document iOS-Specific Considerations says:

Currently, Safari optimizes video presentation for the smaller screen on iPhone or iPod touch by playing video using the full screen—video controls appear when the screen is touched, and the video is scaled to fit the screen in portrait or landscape mode. Video is not presented within the webpage. The height and width attributes affect only the space allotted on the webpage, and the controls attribute is ignored. This is true only for Safari on devices with small screens. On Mac OS X, Windows, and iPad, Safari plays video inline, embedded in the webpage.

iOS

var videoIsFullscreen = screen.width < 320 &&
                        navigator.userAgent.indexOf("Safari") > -1 &&
                        navigator.userAgent.indexOf("Chrome") == -1 &&
                        navigator.userAgent.match(/(iPhone|iPod)/);

Note that im not sure if small screen is of 320px, you should adjust this value.

EDIT

Take a look at this post.

Summarizing:

var isSmallScreen = screen.width <= 320;
/// the shadows herevar isWideScreen = screen.width >= 568;

---

After all, I found this post that may help you much

Can I avoid the native fullscreen video player with HTML5 on iPhone or android?

ANDROID

How to play inline html5 video in Android Browser

Note that is for native Android Browser not for Android Chrome.

Solution 3:

Starting from iOS 10 video fullscreen option will be available for phones as well, when adding attribute playsinline to video element.

For earlier versions webkit-playsinline can be used, but it will only be respected on iPhones when page is pinned to home screen.

<video webkit-playsinline playsinline></video>

To detect whether inline playback is available canplay event listener can be used, to check whether video is in full screen. If phone doesn't support inline playback it will go straight to fullscreen when starting playback.

var inlinePlaybackSupported = true;
var elem = document.querySelector('video');

elem.addEventListener('canplay', function () {

    //if in fullscreen here, then inline playback is not supported;if (elem.webkitDisplayingFullscreen) {
        inlinePlaybackSupported = false;
    }
});

Solution 4:

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.