0

私は HTML5 コントローラーを作成していて、クロージャーの問題に遭遇しています (私はそう思います)。「単純さ」のために getElementByID を実行するときに例が提供するものとは対照的に、すべてのビデオタグで一般的なループを使用して 1 つを実行する方法がわかりません。

具体的には、これらすべてを一般化して、各ビデオのコントロールがそれらに対してのみ機能するようにするにはどうすればよいですか。

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

1 に答える 1

0

各ビデオ要素にコントロールの参照を配置できます。ループ内の
呼び出しの前に以下のステートメントを追加します。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";
    }
}

関連するコントロールにアクセスする必要があるその他のビデオ機能には、上記のcontrolBox、muteControl、 などを使用します。playControl

controlsBox関連するオブジェクトにアクセスする必要がある場合は、ビデオ要素とコントロールの参照を要素に入れることもできます。以下のステートメントをループに追加するだけです。

controlsBox.video = vid;
controlsBox.muteControl = mute;
controlsBox.playControl = play;
于 2012-10-21T18:41:58.390 に答える