为什么我的视频栏没有完成到底？

我有一个视频栏（#progressBar），随着视频的播放而移动。该功能正常工作和更新。但是一旦视频完成，视频栏没有完成。这是什么样子：为什么我的视频栏没有完成到底？

HTML

<div id="skin"> 
      <video id="myMovie" width="640" height="360" autoplay> 
       <source src="videos/Queen - Killer Queen.mp4"> 
      </video> 
      <nav> 
       <div id="buttons"> 
        <i class="fa fa-pause" aria-hidden="true" id="playButton"></i> 
       </div> 

       <span id='current'>0:00/</span> <span id='duration'> 0:00</span> 
       <div id="defaultBar"> 
        <div id="progressBar"></div> 
       </div> 
       <div style="clear:both"></div> 
      </nav> 
     </div>

CSS

body { 
    text-align: center; 
    display: block; 
} 

nav { 
    margin: 5px 0px; 
} 

#myMovie { 
    width: 850px; 
    height: 480px; 
} 

#myMovie::-webkit-media-controls { 
    display: none; 
} 

#playButton { 
    position: relative; 
    top: -47px; 
    left: -294px; 
    padding: 10px; 
    padding-bottom: 13px; 
    padding-left: 20px; 
    padding-right: 20px; 
    color: white; 
    cursor: pointer; 
} 

#skin { 
    position: relative; 
} 

#defaultBar { 
    position: relative; 
    float: left; 
    top: -90px; 
    left: 481px; 
    width: 622px; 
    height: 3px; 
    background-color: #C2C2C2; 
} 
#progressBar { 
    position: absolute; 
    width: 0; 
    height: 3px; 
    background-color: #CA241E; 
} 

#current, #duration { 
    position: relative; 
    top: -77px; 
    left: -540px; 
    color: white; 
    font-family: Open Sans; 
    font-size: 13px; 
} 

#duration { 
    left: -540px; 
}

$(document).ready(function() { 

    $("#myMovie").on(
    "timeupdate","play", 
    function(event) { 

     function format(s) { 
    m = Math.floor(s/60); 
    m = (m >= 10) ? m : "0" + m; 
    s = Math.floor(s % 60); 
    s = (s >= 10) ? s : "0" + s; 
    return m + ":" + s; 
    } 

    var time = format(Math.floor(this.currentTime) + 1); 
    var duration = format(Math.floor(this.duration) + 1); 

     onTrackedVideoFrame(time,duration); 
    }); 
}); 

function onTrackedVideoFrame(currentTime, duration){ 
    $("#current").text(currentTime + "/"); 
    $("#duration").text(duration); 
} 

$("#myMovie").on("ended", 
function(event) { 
    alert("f"); 
}); 

function doFirst(){ 
    barSize=575; 
    myMovie=document.getElementById('myMovie'); 
    playButton=document.getElementById('buttons'); 
    defaultBar=document.getElementById('defaultBar'); 
    progressBar=document.getElementById('progressBar'); 

    playButton.addEventListener('click', playOrPause, false); 
    defaultBar.onclick=clickedBar('click', clickedBar, false); 
} 

function playOrPause(){ 
    if(!myMovie.paused && !myMovie.ended){ 
    myMovie.pause(); 
    playButton.innerHTML='<i class="fa fa-play" aria-hidden="true" id="playButton"></i>'; 
    window.clearInterval(updateBar); 
    }else{ 
    myMovie.play(); 
    playButton.innerHTML='<i class="fa fa-pause" aria-hidden="true" id="playButton"></i>'; 
    updateBar=setInterval(update, 500); 
    } 
} 

function update(){ 
    var size=parseInt (myMovie.currentTime*barSize/myMovie.duration); 
    if(!myMovie.ended){ 
    progressBar.style.width=size+'px'; 
    }else{ 
    progressBar.style.width=size+'px'; 
    playButton.innerHTML='<i class="fa fa-play" aria-hidden="true" id="playButton"></i>'; 
    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);

来源

2017-04-22 user6902601

我无法确定，因为代码对我来说根本不起作用，当我将它复制到1：1时。

但它看起来像你正在初始化变量barSize与错误的值。

function doFirst(){ 
    barSize=575; 
    ...

“#defaultBar” 似乎是进度本身因此与初始化barSize正确的值应该是622：

function doFirst(){ 
    barSize=622; // this should work 
    ...

来源

2017-04-22 04:49:37 Milos

为什么我的视频栏没有完成到底？

回答

相关问题