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();" />
			<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();" id="volume" value="50" min="0" max="100"  />
			<input type="image" id="fullscreen" src="fullscreen.png" value="FullScreen" onClick="fullScreen()" />
		</div>
	</div>

JavaScript

var video;
		var duration;
		var startDuration;
		
		

		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;
			
		}

		function PlayPauseVideo(){
    var image = document.getElementById("image");
    var imgs = new Array('pause.png','play.png'); 
    
    if(video.paused){
        video.play();
        startDuration = setInterval(initDuration,1000/66);
        image.src=imgs[0];
    } else {
        video.pause();
        clearInterval(startDuration);
        image.src=imgs[1];
    }
}
	$('document').ready(function(){
    	$('volume').on('click',function(){
   	 		alert('Привет я лох')
		});
	});
	

		 $(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;
		}