9

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.

Markus
  • 3,225
  • 6
  • 35
  • 47
Dairo
  • 822
  • 1
  • 9
  • 22
  • Did you ever find a solution to this problem? – JSuar Oct 23 '14 at 12:37
  • @JSuar I haven't found a solution and think it's not possible at this moment to check in JavaScript if a video will be played automatically in the native player. I think browser builders need to add some extra information to the browser so something like reading "navigator.video.playsInBrowser" could be possible. – Dairo Oct 24 '14 at 09:58
  • If you still need help with this, I have the code to detect an iPhone browser as an if, else statement if you need it. Naturally, the iPhone plays it in its own video player, not the browser. – shaun Feb 10 '15 at 17:23
  • take a look at this question: http://stackoverflow.com/questions/14616453/image-placeholder-fallback-for-html5-video – Ofer Herman Apr 28 '15 at 19:47
  • @OferHerman Thank you for commenting. Only the question you shared shows how a fallback for non videotag supported browsers can be used. The problem I am facing is that for example both safari on iphone and chrome on desktop support the videotag, but safari on iPhone decides to play the video outside the browser in it's own player. Detection is needed so for exmple overlays over the video can only be applied to browsers which play the video in browser and videotag supported browsers which decide to play video outside browser can have a fallback like an image. – Dairo Apr 29 '15 at 08:07
  • @Dairo looks like the only option is to use the userAgent property because the spec is built only for inline video play, the external player is device dependent. – Ofer Herman Apr 30 '15 at 06:49

1 Answers1

5

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;
};
Community
  • 1
  • 1
avaunt
  • 93
  • 1
  • 9
  • If this question is an exact duplicate of the question you've linked, please flag it as a duplicate instead of leaving an answer to that effect. If it is not a duplicate, please leave a complete answer to this question instead of a link-only answer. – josliber Sep 08 '15 at 19:13
  • It is not a duplicate, because the solution in the linked question only works once the video is playing. Honestly, what I left is actually a comment. Except because I haven't yet hit 50 reputation points, I can't comment. So the only way to provide information to the original poster and others who find this the way I did was to put it in as an Answer. – avaunt Sep 08 '15 at 22:52
  • I just greatly expanded it. If you don't accept it as an answer now, please just say so instead of downvoting it and I'll just delete it. – avaunt Sep 09 '15 at 05:23