HTML5-video - autoplay

by juberti

HTML

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<video id="video" autobuffer playsinline>
  <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>
</body>
</html>

CSS

html {background-color: black;}
body {width: 100%; }
video {width: 100%; display: block;}

JavaScript

var video = document.getElementById("video");
document.onclick = () => {
  if (video.paused)
    video.play();
  else
    video.pause();
  console.log(video.state);
}

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === 'visible') {
   // video.play();
  } else {
    //video.pause();
  }
});