How to detect if HTML5 video can be played back without user interaction

advertisements

Detecting if it is a touch device won't be accurate, think about touchscreen laptops.

Basically I want to be able to avoid displaying a video if it cannot start playing without user interaction.

For those thinking 'you are a bad person':

  • The video will not have audio.
  • It is a decorative asset in the page, it will be a background.
  • I don't care about bandwidth, I am aiming towards the best user experience. Devices like phones won't have this video in it anyway.

What if you played a tiny transparent test video and monitored its progress? I'm also guessing this would be coupled with Modernizr.

http://modernizr.com/

function eventWindowLoaded() {

 var videoElement = document.getElementById("thevideo");

 videoElement.addEventListener('progress',makingProgress,false);
 videoElement.addEventListener('canplaythrough',playVideo,false);

}

function playVideo() {
    var videoElement = document.getElementById("thevideo");
    videoElement.play();
}

function makingProgress() {
    console.log("video can play");
}