Блог

У меня есть несколько строк 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>
  

Этот подход поможет вам получить одно-> n видео. В скрипте мы сначала ищем в DOM элементы с именем класса playpausebtn , затем добавляем прослушиватель onclick для каждого. Этот прослушиватель берет объект video (который должен быть непосредственно после кнопки в этом случае, вы можете изменить этот код, чтобы использовать увеличивающийся идентификатор, например, video_1, video_2 и т.д., и таким образом находить видеообъекты) и добавляет его в прослушиватель событий onclick.

Это только один подход, но это способ решить ваши проблемы — пожалуйста, задавайте вопросы, если есть что-то, чего вы не понимаете.

http://jsfiddle.net/tL5ZU/1/

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