Question

我已经使用HTML中的类和视频播放器的Javascript替换了所有ID，但它仍然无法正常工作。我是一个javascript的新手，所以我需要一些帮助来弄清楚为什么它没有以应有的方式运行。

Chris Ferdinandi建议的更新后的JS仍然无效。 JS粘贴在下面：我完全替换了添加事件侦听器代码并删除了代码的setobject引用部分，仍然没有骰子。任何进一步的帮助将不胜感激。

//----------------------------Video Player--------------------------------------

var vid, playbtn, seekslider, curtimetext, durtimetext, mutebtn, volumeslider, fullscreenbtn; 

//--------Functions------------------------------

// Initialize Player

function intializePlayer(){ 

window.onload = intializePlayer; 

// Play/Pause Function
function playPause(){ 
if(vid.paused){ 
vid.play(); 
playbtn.style.background = "url(pause.png)"; 
} else { vid.pause(); 
playbtn.style.background = "url(play.png)"; 
} 
}

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


// Seektime Update

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; 
} 


// Mute Function
function vidmute(){ 
if(vid.muted){ 
vid.muted = false; 
mutebtn.innerHTML = "Mute"; 
} else { 
vid.muted = true; 
mutebtn.innerHTML = "Unmute";
 } 
 }

 // Set Volume Function
function setvolume(){ vid.volume = volumeslider.value / 100; } 


 // Full Screen Function
function toggleFullScreen(){ 
if(vid.requestFullScreen){ 
vid.requestFullScreen(); 
} else if(vid.webkitRequestFullScreen){ 
  vid.webkitRequestFullScreen(); 
  } else if(vid.mozRequestFullScreen){ vid.mozRequestFullScreen(); 
  } 
}


 // ------------Add event listeners-----------------------------------------

 var i;

for (i = 0; i < playbtn.length; i++) {
    playbtn[i].addEventListener("click",playPause,false); 
}
for (i = 0; i < seekslider.length; i++) {
    seekslider[i].addEventListener("change",vidSeek,false); 
}

for (i = 0; i < vid.length; i++) {
    vid[i].addEventListener("timeupdate",seektimeupdate,false); 
}
for (i = 0; i < seekslider.length; i++) {
   mutebtn[i].addEventListener("click",vidmute,false); 
}

for (i = 0; i < vid.length; i++) {
    volumeslider[i].addEventListener("change",setvolume,false); 
}
for (i = 0; i < seekslider.length; i++) {
  fullscreenbtn[i].addEventListener("click",toggleFullScreen,false); 
}

}

The Original JS：

//----------------------------Video Player--------------------------------------

var vid, playbtn, seekslider, curtimetext, durtimetext, mutebtn, volumeslider, fullscreenbtn; 

//--------Functions------------------------------

// Initialize Player

function intializePlayer(){ 

window.onload = intializePlayer; 

// Play/Pause Function
function playPause(){ 
if(vid.paused){ 
vid.play(); 
playbtn.style.background = "url(pause.png)"; 
} else { vid.pause(); 
playbtn.style.background = "url(play.png)"; 
} 
}

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


// Seektime Update

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; 
} 


// Mute Function
function vidmute(){ 
if(vid.muted){ 
vid.muted = false; 
mutebtn.innerHTML = "Mute"; 
} else { 
vid.muted = true; 
mutebtn.innerHTML = "Unmute";
 } 
 }

 // Set Volume Function
function setvolume(){ vid.volume = volumeslider.value / 100; } 


 // Full Screen Function
function toggleFullScreen(){ 
if(vid.requestFullScreen){ 
vid.requestFullScreen(); 
} else if(vid.webkitRequestFullScreen){ 
  vid.webkitRequestFullScreen(); 
  } else if(vid.mozRequestFullScreen){ vid.mozRequestFullScreen(); 
  } 
}




//----------------Set object references-------------------------------------
 vid = document.getElementsByClassName("my_video"); 

playbtn = document.getElementsByClassName("playpausebtn"); 

seekslider = document.getElementsByClassName("seekslider"); 

curtimetext = document.getElementsByClassName("curtimetext"); 

durtimetext = document.getElementsByClassName("durtimetext"); 

mutebtn = document.getElementsByClassName("mutebtn"); 

volumeslider = document.getElementsByClassName("volumeslider"); 

fullscreenbtn = document.getElementsByClassName("fullscreenbtn"); 




 // ------------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); 

fullscreenbtn.addEventListener("click",toggleFullScreen,false); 

}

HTML：

 <div id="evid">

 <video class="videogunshots" width="550" height="300"> 
<source src="file:///C|/Users/Godsnake/Desktop/July14/content/gunshots.mp4" type="video/mp4">
<source src="file:///C|/Users/Godsnake/Desktop/July14/content/gunshots.webm" type="video/webm">
<source src="file:///C|/Users/Godsnake/Desktop/July14/content/gunshots.ogg" type="video/ogg"> 
  </video> 


 <div class="videocontrols"> 
 <button class="playpausebtn" onclick="playPause()">Play</button> 
 <input class="seekslider" type="range" min="0" max="100" value="0" step="1">
 <span class="curtimetext">00:00</span> / <span class="durtimetext">00:00</span>
 <button class="mutebtn">Mute</button>
 <input class="volumeslider" type="range" min="0" max="100" value="100" step="1">
 <button class="fullscreenbtn">[ &nbsp; ]</button>
 </div>


</div>

另一方面，我播放的视频似乎不适合使用Object-fit的容器：填写任何想法为什么？

Answer 1

document.getElementsByClassName返回元素集合，而不仅仅是单个元素。为了附加事件监听器，您需要遍历每个事件并单独附加。

这样的事情：

var i;

for (i = 0; i < playbtn.length; i++) {
    playbtn[i].addEventListener("click",playPause,false); 
}
for (i = 0; i < seekslider.length; i++) {
    seekslider[i].addEventListener("change",vidSeek,false); 
}
...

<强>更新

我刚刚看了你的JSFiddle。您正在调用无法在Web上访问的本地资源（计算机上的内容）。按钮，甚至文件本身，都需要存在于可以访问它们的服务器上。在此之前，这一切都不会奏效。

在我学习时帮助我的最重要的事情之一就是弄清楚如何在Chrome开发者工具中使用控制台（Firefox也有一套很好的工具）。任何错误都会在那里发生争执。

使用HTML5视频控件的类替换Javascript ID

1 个答案: