Question

我目前正在创建一个HTML5视频播放器，但我遇到了一些问题。我的第一个问题是我的视频的结束时间没有正确显示。我已经创建了javascript来显示我的视频播放的当前和持续时间，并且它没有正确显示。

其次，volumelider功能在Mozilla Firefox中不起作用，但它可以在Internet Explorer和Chrome中使用。

第三，在我的if / else语句中，我说如果vid.muted和volumeslider == 0，设置vid.volume = volumeslider.value / 100 else set vid.volume = volumeslider.value / 100并且没有任何工作所以我摆脱了那段代码。

下面是我的视频播放器的所有代码

<!doctype html>
<html>
<meta charset="utf-8">
<head>
<style type="text/css">
div#video_player_box {  width: 550px; 
                        background: #000;
                        margin: 0px auto; }

div#videos_controls_bar{ background: #333; 
                         padding: 10px; 
                         color: #CCC}

input#seekslider{width: 170px;}

input#volumeslider{width: 80px;}

</style>
<script> 
var vid, playbtn, seekslider, curtimetext, durtimetext, mutebtn, volumeslider; 

function initializePlayer () { 
    //set object references
    vid = document.getElementById("my_video");
    playbtn = document.getElementById("playpausebtn");
    seekslider = document.getElementById("seekslider");
    curtimetext = document.getElementById("curtimetext");
    durtimetext = document.getElementById("durtimetext");
    mutebtn = document.getElementById("mutebtn");
    volumeslider = document.getElementById("volumeslider");
    //Add event listeners
    playbtn.addEventListener("click", playPause, false);
    seekslider.addEventListener("change", vidSeek, false);  
    vid.addEventListener("timeupdate", seektimeupdate, false);
    mutebtn.addEventListener("click", vidmute, false);
    volumeslider.addEventListener("change", setvolume, false);


} 
window.onload = initializePlayer; 

function playPause() { 
    if (vid.paused) { 
        vid.play();
        playbtn.innerHTML = "Pause";  
    } else { 
        vid.pause(); 
        playbtn.innerHTML = "Play"; 
    }

}

function vidSeek () {
    var seekto = vid.duration * (seekslider.value / 100); 
    vid.currentTime = seekto; 

}

function seektimeupdate () { 
    var nt = vid.currentTime * (100 / vid.duration); 
    seekslider.value = nt;
    var curmins = Math.floor(vid.currentTime / 60); 
    var cursecs = Math.floor(vid.currentTime - curmins * 60); 
    var durmins = Math.floor(vid.duration / 60); 
    var dursecs = Math.floor(vid.duration - durmins * 60); 
    if(cursecs < 10) { cursecs = "0"+cursecs; }
    if(dursecs < 10) { dursecs = "0"+dursecs; }
    if(curmins < 10) { curmins = "0"+curmins; }
    if(durmins < 10) { durmins = "0"+dursecs; }
    curtimetext.innerHTML = curmins+":"+cursecs; 
    durtimetext.innerHTML = durmins+":"+dursecs;
}
function vidmute () { 
    if (vid.muted) { 
        vid.muted = false;
        mutebtn.innerHTML = "Mute"; 

    } else { 
        vid.muted = true; 
        mutebtn.innerHTML = "Unmute"; 
    }


}

function setvolume () {
    vid.volume = volumeslider.value / 100;

}
</script>

<title>HTML5 Video Player</title>
</head>

<body>
 <div id = "video_player_box">
   <video id="my_video"  width="550" height="320" autoplay> 
     <source src="videos/Tom_and_Jerry.mp4">
   </video>
  <div id="videos_controls_bar">
    <button id="playpausebtn">Pause</button>
    <input id="seekslider" type="range" min="0" max="100" value="0" step="1">
    <span id ="curtimetext"></span> / <span id ="durtimetext"></span>
    <button id="mutebtn">Mute</button>
    <input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
  </div>
 </div>
</body>
</html>

我无法将zip文件附加到此处，所以如果有人需要我的电子邮件地址，那就是ghaynes109@gmail.com

HTML5视频播放器功能和问题

0 个答案: