Generalising adding controls to a video
<p>I am writing a HTML5  controller and running into a problem with closures (I think). I am not sure how to do one with a generic loop on all the video tags as opposed to what the examples offer when they do getElementByID for 'simplicity'.</p>

<p>Specifically how do I generalise all this so that each video has the controls work only for them.</p>

<p>PS This is about learning so libraries to sove this problem is not really what I am after.</p>

<pre><code>'use strict';
var videos = document.getElementsByTagName('video'), i, vid, controlsBox, play, mute, posterpic;

function playPause(video) {
    if (!(video.paused || video.ended || video.seeking || video.readyState &lt; video.HAVE_FUTURE_DATA)) {
        video.pause();
        play.innerHTML = "Play";
    } else {
        video.play();
        play.innerHTML = "Pause";
    }
}

function myAppend(appendTo, toAppend) {
    if (appendTo.nextSibling) {
        appendTo.parentNode.insertBefore(toAppend, appendTo.nextSibling);
    } else {
        appendTo.parentNode.appendChild(toAppend);
    }
}

for (i = 0; i &lt; videos.length; i += 1) {
    vid = videos[i];
    vid.controls = false;

    vid.addEventListener('click', function () {
        playPause(this);
    }, false);

    // Controls box to display while video is playing
    controlsBox = document.createElement('div');
    controlsBox.setAttribute("class", 'videoControls');

    play = document.createElement('button');
    play.type = "Button";
    play.setAttribute("class", 'playButton');
    play.innerHTML = "Play";

    play.addEventListener('click', function () {
        playPause(vid);
    }(), false);

    controlsBox.appendChild(play);

    mute = document.createElement('button');
    mute.type = "Button";
    mute.setAttribute("class", 'muteButton');
    mute.innerHTML = "Mute";

    mute.addEventListener('click', function () {
        vid.volume = 0;
    }(), false);

    controlsBox.appendChild(mute);

    myAppend(vid, controlsBox);
    //Finished with controls box
}
</code></pre>
