正如标题所说,我的视频中只有第一个视频可以播放而后两个视频不播放。为简洁起见,我已经编写了一次HTML,每个视频的代码相同但视频源对应于每个文件,我已经确认这不是问题。任何关于为什么我的代码按预期运行的指针都将非常感激。
HTML
<div id="video_player_box">
<button id="bigplaybtn">
<img src="assets/css/images/BB.png">
</button>
<div id="transpausebutton"></div>
<video id="my_video" width="540px" height="360px" poster="assets/css/images/poster-big-buck-bunny.png">
<source src="assets/css/Video/1.mp4">
</video>
<div id="video_controls_bar">
<button id="playpausebtn"></button>
<input id="seekslider" type="range" min="0" max="100" value="0" step="1">
<span id="curtimetext">00:00</span>
<span id="cross">/</span>
<span id="durtimetext">00:00</span>
<button id="mutebtn"></button>
<input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
</div>
</div>
JS
var vid, playbtn, bigplaybtn, seekslider, curtimetext, durtimetext, mutebtn, volumeslider;
function intializePlayer(){
vid = document.getElementById("my_video");
playbtn = document.getElementById("playpausebtn");
bigplaybtn = document.getElementById("bigplaybtn");
transpausebutton = document.getElementById("transpausebutton");
seekslider = document.getElementById("seekslider");
curtimetext = document.getElementById("curtimetext");
durtimetext = document.getElementById("durtimetext");
mutebtn = document.getElementById("mutebtn");
volumeslider = document.getElementById("volumeslider");
playbtn.addEventListener("click",playPause,false);
bigplaybtn.addEventListener("click",playPause,false);
transpausebutton.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 = intializePlayer;
function playPause(){
if(vid.paused){
vid.play();
playbtn.style.background = "url(assets/css/images/Pause.png)";
playbtn.style.backgroundSize = "20px 20px";
bigplaybtn.style.display = "none";
transpausebutton.style.display = "inline";
}
else {
vid.pause();
playbtn.style.background = "url(assets/css/images/Play.png)";
playbtn.style.backgroundSize ="20px 20px";
bigplaybtn.style.display = "inline";
transpausebutton.style.display = "none";
}
}
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"+durmins; }
curtimetext.innerHTML = curmins+":"+cursecs;
durtimetext.innerHTML = durmins+":"+dursecs;
}
function vidmute(){
var userVolume;
if(vid.muted){
vid.muted = false;
mutebtn.style.background = "url(assets/css/images/UM.png)";
mutebtn.style.backgroundSize ="20px 20px";
volumeslider.value = 100;
}
else {
vid.muted = true;
mutebtn.style.background = "url(assets/css/images/M.png)";
mutebtn.style.backgroundSize ="20px 20px";
volumeslider.value = 0;
}
}
function setvolume(){
vid.volume = volumeslider.value / 100;
}