JSFiddle - React, Tailwind, and code Playground

by lemonlimelike

HTML

<video id="video" src="69P.mp4"  width="800" height="400" onClick="PlayPauseVideo()"></video>
	<div id="video_panel">
		<div class="panel">
			<input id="image" type="image" src="play.png" onClick="PlayPauseVideo(); imgsrc();" />
			<input type="range" id="ratio" style="width:600px; cursor: pointer;" onMouseDown="clearAnimateRange()" onMouseUp="movedRange()" />
			<img src="speakerON.png" class="img_volume" />
			<input type="range" onMouseMove="changeVolume(); imgvolume();" id="volume" value="50" min="0" max="100" onclick="volumimg()" />
			<input type="image" id="fullscreen" src="fullscreen.png" value="FullScreen" onClick="fullScreen()" />
		</div>
	</div>

JavaScript

var video;
		var duration;
		var startDuration;
		var volume;
		

		window.onload = function(){
			video = document.getElementById("video");
			duration = document.getElementById("ratio");
			volume = document.getElementById("volume");
			duration.value = 0;
			duration.min = 0;
			duration.max = video.duration;

		}
		var i = 0;
		var image = document.getElementById("image");
		var imgs = new Array('play.png','pause.png'); 
		function imgsrc(){
			i++;
			image.src=imgs[i%imgs.length];
		}
		
		function PlayPauseVideo(){
			if(video.paused){
				video.play();
				startDuration = setInterval(initDuration,1000/66);

			}
			else{
				video.pause();
				clearInterval(startDuration);
			}
			
		}

		 $(document).ready(function () {

        $("#video").dblclick(
            function () {
                fullScreen();
            }            
        );

    });

		function fullScreen(){
			video.webkitEnterFullscreen();
		}


		
		 


		function initDuration(){
			duration.value = video.currentTime;
		}
		function clearAnimateRange(){
			clearInterval(startDuration);
			if(video.paused){

			}
			else{
			PlayPauseVideo();
			}
		}
		function movedRange(){
			video.currentTime = duration.value;
			PlayPauseVideo();
		}

		function changeVolume(){
			video.volume = volume.value/100;
		}