Javascript 向视频添加控件的一般化

我正在编写一个HTML5控制器，并且遇到了闭包问题（我想）。我不知道如何在所有视频标签上使用通用循环，而不是示例中为“简单性”而使用getElementByID时提供的方法

具体来说，我如何概括所有这些，使每个视频的控件只对它们起作用

PS这是关于学习的，所以图书馆解决这个问题并不是我真正想要的

'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 < 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 < 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
}

“严格使用”；
var videos=document.getElementsByTagName（“视频”），i，vid，controlsBox，play，mute，posterpic；
功能播放暂停（视频）{
如果（！（video.paused | | | | video.end | | | | video.seeking | | video.readyState

您可以在每个视频元素上放置控件的引用。
在循环中调用

myAppend

之前添加以下语句

vid.controlsBox = controlsBox;
vid.muteControl = mute;
vid.playControl = play;

然后，

playPause

功能应如下所示：

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

controlsBox.video = vid;
controlsBox.muteControl = mute;
controlsBox.playControl = play;