JSFiddle - React, Tailwind, and code Playground

by lmcdevloper

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   

<p data-fullscreen="false" id="id_playerDiv1" class="videoContentId" align="center"><video data-click="true" id="scormplayerplayerDiv1" class="video-sub linkObligatorio" style="width:100%;max-width:640px;" autoplay=""><source class="" src="http://iandevlin.github.io/mdn/video-player-with-captions/video/sintel-short.mp4" type="video/mp4"><track class="" src="http://iandevlin.github.io/mdn/video-player-with-captions/subtitles/vtt/sintel-de.vtt" label="Español" kind="subtitles" srclang="es" default=""></video>
    <div
        class="video-controls"><span class="actual-time">2:35</span><span class="barra-time">/</span><span class="total-time">2:35</span><button type="button" class="play play-pause" title="Reproducir vídeo"><img class="img-1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAATElEQVR4AWMYmUCAWgY9AGIHahj0H4rXU+q6/0j4PRDHU24QAu8HYgXKDUK4rp4aBn0A4gZKDTpAvtcQrkigNLA3gKJ/4BMk3BWjAAA8rCr7cYjSfAAAAABJRU5ErkJggg=="></button>
        <input
            class="seek-bar" value="99.99999999999999" title="Barra de progreso" type="range"><button type="button" class="mute" title="Desactivar sonido"><img class="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAQAAAD8x0bcAAAAhElEQVR4AbXRIQxBARQF0EMlGXrvIole0CudrFd6EugNSbKpeo/EH+wpiu3/J5j76glv9/p7LqbqKrMCJ+GsVUUC0Hd30ygnAaDnaVNOAmzVsFNoA8THQZhjKIwzdERXWGTo8EbLDM0wEibkj+8VOt8rWOdlDjzcNLNZjtksANdk4B/yAqWtTB5BB+CFAAAAAElFTkSuQmCC"></button><input class="volume-bar" min="0" max="1" step="0.1" value="0.5" title="Barra de sonido" type="range">
            <button
                type="button" class="subtitles" title="Desactivar subtitulos"><img class="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAVUlEQVR4AWMY/kAWiF8B8X8S8SuIXgSoAEmQiSuRDWqgwKCGkWUQAsAV4QH4DGoAYwT/AIKPienoNQQg2fuVMEE8+ACmGswEKQPEL8nw1ktwFhneAADWyJIFBU5taQAAAABJRU5ErkJggg=="></button><button...

CSS

[data-fullscreen='true'] .video-controls {
	transition: opacity 0.3s ease 0s !important;
	background-image: -moz-linear-gradient(center bottom , #0371A8 13%, #08C 100%) !important;
	height: 20px !important;
	overflow: hidden !important;
	bottom: 0px !important;
	z-index: 2147483647 !important;
	opacity: 0 !important;
	font-size: initial !important;
	line-height: 1em !important;
	max-width: 100% !important;
	margin: 0px !important;
	position: fixed !important;
	padding: 10px 0 !important;
}
[data-fullscreen='true'] .video-controls:hover {
	opacity: 0.9 !important;
}
[data-fullscreen='true'] .video-controls > *:first-child {
	margin-left:0;
}
[data-fullscreen='true'] html:-ms-fullscreen {
	width:100%;
}
[data-fullscreen='true'] :-webkit-full-screen {
	background-color:transparent;
}
[data-fullscreen='true'] video:-webkit-full-screen + .video-controls {
	background:#ccc;
}
[data-fullscreen='true'] video::-webkit-media-video-controls {
	display:none !important;
}
[data-fullscreen='true'] .video-controls {
	position:absolute;
	bottom:2%;
	width:100%;
	z-index:2147483647;
}

JavaScript

window._video = document.getElementById("scormplayerplayerDiv1");
	$("#id_playerDiv1").attr("data-click","false").addClass("linkObligatorio");
	_video.controls = false;
	window.playButton = $("body").find(".play-pause");
	window.muteButton = $("body").find(".mute");
	window.fullScreenButton = $("body").find(".full-screen");
	window.subtitles = $("body").find(".subtitles");
	window.seekBar = $("body").find(".seek-bar");
	window.volumeBar = $("body").find(".volume-bar");
	_video.volume = 0.5;
	$(playButton).on("click", function() {
		if (_video.paused == true) {
			_video.play();
			$(playButton).attr("title","Pausar vídeo");
		} else {
			_video.pause();
			$(playButton).attr("title","Reproducir vídeo");			
		}
	});

	function hideTracks(_video) {
	  for (var i = 0; i < _video.textTracks.length; i++) {
		_video.textTracks[i].mode = 'hidden';
	  }
	}	
	function showTracks(_video) {
	  for (var i = 0; i < _video.textTracks.length; i++) {
		_video.textTracks[i].mode = 'showing';
	  }
	}	
	window.flagSubtitles = false;
	$(subtitles).on("click", function() {
		if (!flagSubtitles) {
			flagSubtitles = true;
			hideTracks(_video);
			$(subtitles).attr("title","Activar subtitulos");
		} else {
			flagSubtitles = false;
			showTracks(_video);
			$(subtitles).attr("title","Desactivar subtitulos");
		}
	});


	$(muteButton).on("click", function() {
		if (_video.muted == false) {
			_video.muted = true;
			$(muteButton).attr("title","Activar sonido");
		} else {
			_video.muted = false;
			$(muteButton).attr("title","Desactivar sonido");	
		}
	});
	

	document.addEventListener("mozfullscreenchange", function () {
		(document.mozFullScreen) ? _video.parentNode.setAttribute("data-fullscreen","true") : _video.parentNode.setAttribute("data-fullscreen","false");
		(document.mozFullScreen) ? $(".full-screen").attr("title","Salir pantalla completa") : $(".full-screen").attr("title","Pantalla completa");		
	}, false);
	
	document.addEventListener("webkitfullscreenchange", function ()...