视频自定义视频播放器的进度条答案

【问题标题】：Progress bar for video customized video player视频自定义视频播放器的进度条
【发布时间】：2012-04-26 12:51:39
【问题描述】：

我一直在尝试制作自定义视频播放器，但进度条出现问题，当我尝试单击进度条时，视频没有转到特定位置。

这是我的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;
}

【问题讨论】：

标签： javascript html css dom-events

【解决方案1】：

您需要用 e.offsetX 替换您的 e.pageX-bar.offsetLeft，这应该可以工作。甚至在您尝试更改代码之前，先了解differences between screenX/Y, clientX/Y, pageX/Y 和differences between offsetX/Y and pageX/Y

【讨论】：

哈哈哈！我以为这个问题已经死了，我什至放弃了希望有人会回答这个问题，我只是回来问另一个问题并弹出答案。谢谢，我会记住的