Know which part was clicked

Question

Know which part was clicked

Navigation

#1 by (1 votes)

0

I am making a player of my own, what I need is to be able to move through the video with clicks in the progress bar, here the progress bar:

<player-progress-bar>
    <div style='width:100%'>
        <div class='hr-yt-played' style='width: 0%;'/>
        <div class='hr-yt-loaded' style='width: 0%;'/>          
    </div>                                      
</player-progress-bar>

Is it possible to know with jQuery or javascript in which part of the progress bar was clicked? Thanks

javascript jquery

asked by Patricio 27.06.2017 в 16:35

source

1 answer

Error with file_get_contents and https Problems With Xcode ... storyboard & ViewController

score 1 · Answer 1

You must calculate the click here an example:

function doFirst(){
	barSize=600;
	myMovie=document.getElementById('myMovie');
	playButton=document.getElementById('playButton');
	bar=document.getElementById('defaultBar');
	progressBar=document.getElementById('progressBar');
 
	playButton.addEventListener('click', playOrPause, false);
	bar.addEventListener('click', clickedBar, false);
}

function playOrPause() {
	if (!myMovie.paused && !myMovie.ended){
		myMovie.pause();
		playButton.innerHTML='Play';
		window.clearInterval(updateBar);
	} else {
		myMovie.play();
		playButton.innerHTML='Pause';
		updateBar=setInterval(update, 500);
	}
}

function update() {
	if (!myMovie.ended) {
		var size=parseInt(myMovie.currentTime*barSize/myMovie.duration);
		progressBar.style.width=size+'px';
	} else {
		progressBar.style.width='0px';
		playButton.innerHTML='Play';
		window.clearInterval(updateBar);
	}
}

function clickedBar(e){
	if(!myMovie.paused && !myMovie.ended){
		var mouseX=e.pageX-bar.offsetLeft;
		var newtime=mouseX*myMovie.duration/barSize;
		myMovie.currentTime=newtime;
		progressBar.style.width=mouseX+'px';
	}
}
window.addEventListener('load',doFirst,false);

body {
	text-align: center;
}
 
header,section,footer,aside,nav,article,hgroup {
	display: block;
}
#skin {
	width:700px;
	margin:10px auto;
	padding:5px;
	background:red;
	border:4px solid black;
	border-radius:10px;
}
nav {
	margin: 5px 0px;
}
#buttons {
	float:left;
	width:70px;
	height:22px;
}
#defaultBar {
	position:relative;
	float:left;
	width:600px;
	height:16px;
	padding:4px;
	border: 2px solid black;
	background:yellow;
}
#progressBar {
	position:absolute;
	width:0px;
	height:16px;
	background:blue;
}

<section id="skin">
	<video id="myMovie" width="640" height="360">
		<source src="http://zencoder-demo.s3.amazonaws.com/trailer_test.mp4"/>
	</video>
	<nav>
		<div id="buttons">
			<button type="button" id="playButton">Play</button>
		</div>
		<div id="defaultBar">
			<div id="progressBar"></div>
		</div>
		<div style="clear:both"></div>
	</nav>
</section>