我一直在尝试制作自定义视频播放器，但是进度栏出现问题，当我尝试单击进度栏时，视频无法转到特定位置。
这是我的html代码:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
<body>
<section id="skin">
<video id="myVideo" width="640" height="360">
<source src="My Google Android.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>
</body>
</html>
这是javascript代码:
function doFirst(){
barSize=600;
myVideo=document.getElementById('myVideo');
playButton=document.getElementById('playButton');
defaultBar=document.getElementById('defaultBar');
progressBar=document.getElementById('progressBar');
playButton.addEventListener('click', playOrPause, false);
defaultBar.addEventListener('click', clickedBar, false);
}
function playOrPause(){
if(!myVideo.paused && !myVideo.ended){
myVideo.pause();
playButton.innerHTML='Play';
window.clearInterval(updateBar);
} else{
myVideo.play();
playButton.innerHTML='Pause';
updateBar=setInterval(update, 500);
}
}
function update(){
if(!myVideo.ended){
var size=parseInt(myVideo.currentTime*barSize/myVideo.duration);
progressBar.style.width=size+'px';
} else{
progressBar.style.width='0px';
playButton.innerHTML='Play';
window.clearInterval(updateBar);
}
}
function clickedBar(e){
if(!myVideo.paused && !myVideo.ended){
var mouseX=e.pageX-bar.offsetLeft;
var newtime=mouseX*myVideo.duration/barSize;
myVideo.currentTime=newtime;
progressBar.style.width=mouseX+'px';
}
}
window.addEventListener('load', doFirst, false);
还有css代码:
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;
}
最佳答案
您需要用e.offsetX替换e.pageX-bar.offsetLeft，这应该可以工作。甚至在尝试更改代码之前，请先了解differences between screenX/Y, clientX/Y, pageX/Y和differences between offsetX/Y and pageX/Y
关于javascript - 视频进度栏不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10333794/