Detect if browser / device can play HTML5 video inline before playing

Question

I know I can check through navigator.userAgent if the device is an iPhone, but there are other devices and some I'm not aware of which will play the video in it's own player.

There can be made a list of all browsers/devices which don't play a video inline, but I wonder if there is another solution.

Is it possible in JavaScript to detect if a browser, for example Safari on iPhone, plays a video in it's own player instead of inline? So it can be possible to show an alternative, like an image, instead of the video.

Answer 1

I know this is an old question, but it's a big issue for me and there isn't a lot of information online. But I can answer your question after I found Alexey's answer in this thread: Detect if client allows inline media playback for HTML5 video.

No, you can't detect if the browser/device supports inline video before playing it.

That's the bad news. The problem is that the only reliable check for browsers like iOS Safari on iPhone is to start the video playing and then sniff if it instantly went to full screen native mode. Even that would fail if you made a player that automatically went to fullscreen on when the play event was triggered.

The okay news, at least for me, is that by detecting it as soon as it starts playing along with using CSS media queries to detect screen size I should be able to accomplish what I'm trying to do.

Here's the relevant bits taken from my player JS, very much derived from this link above.

This Only Detects Inline Support After The Video Starts Playing

// Expose useful properties of the video
var vid = (function(){
    var elem = document.getElementsByTagName('video')[0];
    return {elem:elem};
})();
// Test for inline playback support
var inlineTest = (function() {
    if ( vid.elem.webkitFullscreenchange || vid.elem.mozFullscreenchange || vid.elem.MSFullscreenChange || vid.elem.fullscreenchange ) {
        return 'inline-no';
    } else {
        return 'inline-yes'
    }
});
// play() functions
vid.elem.onplay = function(){
        var inlineSupport = inlineTest();
        document.body.className += ' ' + inlineSupport;
};