Geek asks and answers

How to determine if html5 inline video will play

I have an HTML5 video with a splash of the image on top. On desktop devices, I want to click a splash image so that the image disappears and the video plays. On a mobile phone, clicking on the image will cause the video to play in a separate application, so when the user clicks on the back link to return to the web page, I want the splash image to still be (a simple video component, at least on my Android -phone, pretty ugly).

How can I find out if a video will play inline or run in a new application? If it is displayed in a line, I will hide the splash image, and if it will be launched in a new application, I will not.

One way is to sniff the user agent to see if it has a phone. This is not a good idea for obvious reasons (it may break when a new phone comes out, it will have to be tested on 100 devices). Another possibility may be to catch some kind of event when we leave the page to go to the video player or return from the video player. But I'm not sure what to catch. Another possibility that I considered is to set a timer to check some properties of the video component ... see if it plays ... or something like that.

I use jQuery if that matters.

+5
source share
2 answers

iOS webkitDisplayingFullscreen, , :

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

, , - false. , , , , .

Android, webkitfullscreenchange, , . , , , iOS.

, , , -!

+3

oncanplay. , , , null.

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


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

: , - . , (Windows: Chrome 42, IE11, FF36, Opera 29, Safari. Android: Chrome. IPad iPhone 4S: Safari)

0

More articles:


All Articles