[英]Add Javascript functionality to more than one element
我有幾行Javascript定義了HTML5視頻的自定義“播放”按鈕。
我的問題是,它們只能用於一個視頻,也只能用於一個視頻。 我想在我的頁面上放幾個視頻,並且使用相同的Javascipt代碼來影響所有這些視頻。 這樣播放按鈕就可以在每個視頻上單獨使用。 目前,它僅適用於以HTML列出的第一個視頻。
我該如何工作?
JS
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';
}
}
的CSS
#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;
}
的HTML
<!-- 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>
這種方法將幫助您制作1-> n個視頻。 在小提琴中,我們首先在DOM中搜索類名稱為playpausebtn的元素,然后為每個元素添加一個onclick偵聽器。 該偵聽器獲取視頻對象(在這種情況下,該對象必須直接位於按鈕之后,您可以更改此代碼以使用遞增的ID,例如video_1,video_2等,並以此方式找到視頻對象),並將其添加到onclick事件偵聽器中。
這只是一種方法,但這是解決問題的一種方法-如果您不了解任何內容,請提出問題。
HTML:
<!-- 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>
JS
//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();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.