Javascript – Detect if client allows inline media playback for HTML5 video

androidhtmlhtml5-videoiosjavascript

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.

Best Answer

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;
        });
Related Topic