how to detect if html5 video will be played inline

Question

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.

Answer 1

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!