JSFiddle - React, Tailwind, and code Playground

by josekerekes

HTML

<video id="video">
  <source type="video/mp4" src="http://www.w3schools.com/html/mov_bbb.mp4">
</video>

<input type="button" value="play" id="play" />

<input type="button" value="pause" id="stop" />

<input type="button" value="restart" id="restart" />

<input type="button" value="rewind" id="rewind" />

<input type="button" value="forward" id="forward" />

<input type="button" value="slower" id="slower" />

<input type="button" value="faster" id="faster" />

<input type="button" value="reverse" id="reverse" />

JavaScript

//video.volume, video.paused, video.muted

var video = document.getElementsByTagName('video')[0];

document.getElementById('play').addEventListener('click',function() {
	video.play() 
});

document.getElementById('stop').addEventListener('click',function() {
	video.pause();
});

document.getElementById('restart').addEventListener('click',function() {
	video.currentTime=0;
});

document.getElementById('rewind').addEventListener('click',function() {
	move(-.5);
});

document.getElementById('forward').addEventListener('click',function() {
	move(.5);
});

document.getElementById('faster').addEventListener('click',function() {
	video.playbackRate += 0.5
});

document.getElementById('slower').addEventListener('click',function() {
	video.playbackRate -= 0.5
});

document.getElementById('reverse').addEventListener('click',function() {
	video.playbackRate = -1
});



function move(value) {
	var video =  document.getElementsByTagName('video')[0];
  video.currentTime += value;
}