Add Javascript functionality to more than one element

Question

I have a few lines of Javascript that define a custom 'play' button for HTML5 video.

The issue I have is that they work fine for one video, and for one video only. I want to have several videos on my page with the same Javascipt code affecting all of them. So that the play button works individually on each video. At the moment it only works on the first video listed in HTML.

How do I make this work?

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>

Answer 1

This approach will help you have one->n videos. In the fiddle we first search the DOM for elements with a class name of playpausebtn, then add an onclick listener for each. This listener takes the video object (which has to be directly after the button in this case, you could change this code to use an incrementing id eg video_1, video_2 etc and find the video objects that way) and adds it to the onclick event listener.

This is only one approach, but it is a way to resolve your issues - please ask questions if there is anything you don't understand.

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