CODEWITHSUNDEEP
javascripthtmlvideomobile
mhenry1384
mhenry1384

Reputation: 7688

how to detect if html5 video will be played inline

I have a HTML5 video with a splash image over the top. On desktop devices, I want clicking the splash image to make the image disappear and the video to play. On mobile phone, clicking on the image will make the video play in a separate application, so when the user clicks back to go back to the web page I want the splash image to still be there (the plain video component, at least on my Android phone, is pretty fugly).

How can I tell if the video will be played "inline" or launched into a new app? If it's displayed inline, I will hide the splash image and if it's launched into a new app I will not.

One way is to sniff the user agent to see if it's a phone. That's not a good idea for obvious reasons (could break when a new phone comes out, would have to test on 100s of devices). Another possibility might be to catch some kind of event when we leave the page to jump to the video player, or come back from the video player. But I'm not sure what to catch. Another possibility I've considered is to set a timer to check some properties of the video component... to see if it's playing... or something.

I'm using jQuery, in case it matters.

Upvotes: 6

Views: 1701

Answers (2)

Henrik Christensen
Henrik Christensen

Reputation: 534

Check for oncanplay. For videos that play inline, it seems to be preset to null.

var playsInline = typeof document.getElementByID('myVid')['oncanplay'] !== 'undefined';

or as a function

function playsInLine(vidId) {
    return typeof document.getElementByID(vidId)['oncanplay'] !== 'undefined';
}

Warning: this method may not give the correct output in all browsers on all devices, and it may also give unwanted results due to future changes. But at the time of writing, this worked for me everywhere I checked (Windows: Chrome 42, IE11, FF36, Opera 29, Safari. Android: Chrome. iPad and iPhone 4S: Safari)

Upvotes: 0

Adrien Delessert
Adrien Delessert

Reputation: 1360

On iOS your video element will have the webkitDisplayingFullscreen property, so you can check it and find out if the video is inline or fullscreen: 

var videoFullscreenStatus = document.getElementById("myVideo").webkitDisplayingFullscreen;

The property is true when a video is playing fullscreen, false otherwise. So, in theory, you could check this as soon as the video starts to play, and set your poster image accordingly.

I'm much less familiar with Android, but there is an event, webkitfullscreenchange, that you may be able to listen for to pick up when it goes fullscreen. No idea if that will work on mobile, I don't believe it works for iOS.

I know this is an old question, but I hope this helps someone!

Upvotes: 4

Related Questions