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


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.

function eventWindowLoaded() {

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



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

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