向多个元素添加Javascript功能
我有几行Javascript为HTML5视频定义了一个自定义的“播放”按钮 我的问题是,它们可以很好地用于一个视频,并且只能用于一个视频。我想在我的页面上有几个视频,使用相同的Javascipt代码影响所有视频。因此,播放按钮在每个视频上单独工作。目前,它只适用于HTML中列出的第一个视频 我该怎么做 JS CSS HTML向多个元素添加Javascript功能,javascript,html,controls,Javascript,Html,Controls,我有几行Javascript为HTML5视频定义了一个自定义的“播放”按钮 我的问题是,它们可以很好地用于一个视频,并且只能用于一个视频。我想在我的页面上有几个视频,使用相同的Javascipt代码影响所有视频。因此,播放按钮在每个视频上单独工作。目前,它只适用于HTML中列出的第一个视频 我该怎么做 JS CSS HTML 此方法将帮助您拥有一个->n个视频。在fiddle中,我们首先在DOM中搜索类名为playpausebtn的元素,然后为每个元素添加一个onclick侦听器。此侦听器获取视
此方法将帮助您拥有一个->n个视频。在fiddle中,我们首先在DOM中搜索类名为playpausebtn的元素,然后为每个元素添加一个onclick侦听器。此侦听器获取视频对象(在本例中,该对象必须直接位于按钮之后,您可以将此代码更改为使用递增id,例如video_1、video_2等,并以此方式查找视频对象)并将其添加到onclick事件侦听器中 这只是一种方法,但它是解决您的问题的一种方法-如果您有任何不理解的地方,请提问 HTML:
玩
玩
JS
//为按钮设置侦听器
函数init(){
//获取所有按钮
var buttons=document.getElementsByClassName('playpausebtn');
//为每个按钮设置onclick侦听器
对于(变量i=0;i
id必须是唯一的。使用类并按类获取元素而不是IDID应该是唯一的,使用类,就像Popleak所说的。不能有两个ID相同的元素。是否可以使用.class来实现这一点?如果我说同一页上有10个视频,并且每个视频都需要一个唯一的id,那么代码似乎太多了。这确实解决了播放按钮的问题!我试图实现其他按钮,我在球员,但没有运气。我有关闭播放器、最小化播放器、全屏和时间更新的操作。请看下面的例子,如果这回答了您的问题,请勾选答案旁边的复选标记以接受它。接下来,我试图找出如何解释发生了什么,而不是为您编写代码。代码中的第一个问题是,您添加的每个方法都依赖于方法外部的变量,而不是传递到方法中的参数(这使得每个方法都是独立的)。第二个是GetElementsByCassName将返回一个DOM对象数组,而不是单个对象-因此您必须循环遍历它们并使用单个实例,而不是数组。由于您有多个按钮,我可能会重构HTML,为每个包装DIV指定一个特定类,然后找到它们并使用其中的按钮(而不是每个按钮一个循环)。
var vid, playbtn;
function intializePLayer(){
vid = document.getElementById("my_video");
playbtn = document.getElementById("playpausebtn");
playbtn.addEventListener("click",playPause,false);
}
window.onload = intializePLayer;
function playPause(){
if(vid.paused){
vid.play();
playbtn.style.opacity = '0';
}else{
vid.pause();
playbtn.style.background = "url('http://i61.tinypic.com/xm8qdu.png')";
playbtn.style.backgroundSize = "105px 105px";
playbtn.style.opacity = '1';
}
}
#video_container{
position:relative;
width:480px;
height:264px;
}
button#playpausebtn{
background:url('http://i61.tinypic.com/xm8qdu.png') no-repeat;
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin:auto;
border:none;
outline:none;
width:105px;
height:105px;
cursor:pointer;
background-size: 105px 105px;
}
<!-- Video #1 -->
<div id="video_container">
<button id="playpausebtn"></button>
<video id="my_video" width="480" loop>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
<!-- Video #2 -->
<div id="video_container">
<button id="playpausebtn"></button>
<video id="my_video" width="480" loop>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
<!-- Video #1 -->
<div>
<button class="playpausebtn">Play</button>
<video width="480" loop>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>
</div>
<!-- Video #2 -->
<div>
<button class="playpausebtn">Play</button>
<video width="480" loop>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>
</div>
//set up listeners for buttons
function init() {
//get all buttons
var buttons = document.getElementsByClassName('playpausebtn');
//for each button set up the onclick listener
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = (function () {
//the video needs to be right after the button
var video = buttons[i].nextSibling.nextSibling;
return function () {
if (video.paused) {
video.play();
} else {
video.pause();
}
};
})();
}
}
init();