Знать, в котором он уезжает, кликнули

Я реализую собственного производителя, чего мне не хватает, состоит в том, чтобы мочь двигать меня из-за видео с click's в бруске прогресса, здесь брусок прогресса:

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

Возможно знать с jQuery или javascript, в котором он исходит из бруска прогресса, кликнули?. Спасибо

0
задан 27.06.2017, 17:49
1 ответ

Ты, должно быть, вычисляешь click здесь пример:

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>
1
ответ дан 24.11.2019, 07:57