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="faster" id="faster" />

JavaScript

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 = 3
})

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