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 simply detect video support.

I am trying to detect if a video can only play fullscreen or also inline. Because on the iPhone safari iOS videos only play in fullscreen, but on iPad videos may be played inline. And by inline I mean in the page without switching to fullscreen.

Answer 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' in document.createElement('video')) : true;
        });

Answer 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 here
var 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.