JSFiddle - React, Tailwind, and code Playground

by bgmort

HTML

<p>
   <button id="play" onclick="play()">Play</button>
   <button onclick="deferredPlay()">Deferred Play</button>
   <button onclick="deferredAutoPlay()">Deferred Auto-Play</button>
   <button onclick="pause()">Pause</button>
</p>

<video controls="" style="width:640px;height:360px;">
   <source src="http://www.html5rocks.com/en/tutorials/video/basics/devstories.webm" type="video/webm;codecs=&quot;vp8, vorbis&quot;">
   <source src="http://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4" type="video/mp4;codecs=&quot;avc1.42E01E, mp4a.40.2&quot;">
   <!--track src="http://www.html5rocks.com/en/tutorials/video/basics/devstories-en.vtt" label="English subtitles" kind="subtitles" srclang="en" default=""></track-->
</video>

CSS

button {
   font-size: 18px;
}

video {
   max-width: 100%;
}

JavaScript

var video = document.querySelector('video');

var queue = [];

function play() {
   video.play();
}

function deferredPlay() {
   queue.push(play);
}

function deferredAutoPlay() {
   queue.push(function() {
      simulateClick(document.querySelector('#play'));
   });
}

function pause() {
   video.pause();
}

function simulateClick(element) {
	/*
	var event = new MouseEvent('click', {
      'view': window,
      'bubbles': true,
      'cancelable': true
   });
	*/
	var event = document.createEvent("MouseEvents");
	event.initMouseEvent("click", true, true, window,
		0, 0, 0, 0, 0, false, false, false, false, 0, null);

	var notCanceled = element.dispatchEvent(event);
   return notCanceled;
}

function poll() {
   while (queue.length) queue.shift()();
}

setInterval(poll, 100);