JSFiddle - React, Tailwind, and code Playground

by rcuzcano

HTML

<header>
     <h1>HTML Audio y Video</h1>
</header>
<section>
     <h1>Video</h1>
    <video id="vid" controls poster="http://goo.gl/MFCpr">
        <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4" />
        <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg" />
        <source src="http://www.w3schools.com/html/movie.webm" type="video/webm" />
        Your browser does not support the video tag.
     </video>
    <button id="playPause">Play</button>
    <button id="stop">Stop</button>
    <button id="begin">Begin</button>
    <button id="end">End</button>
    
</section>

JavaScript

$(function(){
var video = document.getElementById("vid");
var play = $("#playPause");
var stop = $("#stop");
var begin = $("#begin");
var end = $("#end");
var rewind = $("#rewind");
var fastForward = $("#fastForward");
var volume = $("#volume");
var scrubber = $("#scrubber");
    play.click(function(){
        if (video.paused) {
            video.play();
            play.text("Pause");
        }else{
            video.pause();
            play.text("Play");
        }
 	stop.click(function (){
			video.pause();
			play.text("Play");
	});
	begin.click(function(){
			video.currentTime = 0;
	});
	end.click(function(){
			video.currentTime = video.duration;
			play.text("Play");
	});
	rewind.click(function(){
		video.currentTime -= 5;
	});
	fastForward.click(function(){
		video.currentTime += 5;
	});
	volume.click(function(){
		video.volume = this.value;
	});
	scrubber.change(function(){
		video.currentTime = this.value;
	});
     
        
    })
})