HTML5-video - autoplay

by luwes

HTML

<video controls preload="none">
  <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>

<button>Delay Play</button>

CSS

html {padding: 20px 0; background-color: #efefef;}
body {width: 400px; padding: 40px; margin: 0 auto; background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.5);}

video {
    width: 400px; 
    display: block;
}

JavaScript

var $video = $('video');
var video = $video[0];
var $button = $('button');

$button.on('click', () => {

	videoPlay()
  video.pause();

});

$video.on('loadstart progress suspend abort error emptied stalled loadedmetadata loadeddata canplay canplaythrough playing waiting seeking seeked ended durationchange timeupdate play pause ratechange resize volumechange', log);

var track = video.addTextTrack('metadata');
track.mode = 'hidden';

track.addEventListener('cuechange', function(e) {
	[...e.target.activeCues].forEach((cue) => {
  	console.log(99, cue);
  })
});

track.addCue(new VTTCue(2, 2.25, '{}'));


function log(e) {
	console.log(e);
  console.log('paused', video.paused);
}

function error(e) {
	log(e.name);
	console.error(e);
}

function videoPlay() {

	return video.play()
  	.then(() => log('played'))
    .catch((err) => error(err));
}

setTimeout(() => videoPlay(), 1000);