JSFiddle - React, Tailwind, and code Playground

by Nimeshka Srimal

HTML

<video id="video" controls preload="metadata">
			<source src="http://iandevlin.github.io/mdn/video-player-with-captions/video/sintel-short.mp4" type="video/mp4">
			<source src="http://iandevlin.github.io/mdn/video-player-with-captions/video/sintel-short.webm" type="video/webm">
			<track label="English" kind="subtitles" srclang="en" src="http://iandevlin.github.io/mdn/video-player-with-captions/subtitles/vtt/sintel-en.vtt" default>
		</video>
		<div id="video-controls" class="controls" data-state="hidden">
			<button id="playpause" type="button" data-state="play">Play/Pause</button>
			<button id="stop" type="button" data-state="stop">Stop</button>
			<div class="progress">
				<progress id="progress" value="0" min="0">
					<span id="progress-bar"></span>
				</progress>
			</div>
			<button id="mute" type="button" data-state="mute">Mute/Unmute</button>
			<button id="volinc" type="button" data-state="volup">Vol+</button>
			<button id="voldec" type="button" data-state="voldown">Vol-</button>
			<button id="fs" type="button" data-state="go-fullscreen">Fullscreen</button>
			<button id="subtitles" type="button" data-state="subtitles">CC</button>
		</div>