Question

我使用下面的代码一次只播放一个视频，但它无法正常工作。请建议。

document.getElementById("vid1").addEventListener('play', dimBack1, false);
document.getElementById("vid2").addEventListener('play', dimBack2, false);
document.getElementById("vid3").addEventListener('play', dimBack3, false);
document.getElementById("vid4").addEventListener('play', dimBack4, false);
document.getElementById("vid5").addEventListener('play', dimBack5, false);
document.getElementById("vid6").addEventListener('play', dimBack6, false);


function dimBack1() {
document.getElementById("vid2").pause();
document.getElementById("vid3").pause();
document.getElementById("vid4").pause();
document.getElementById("vid5").pause();
document.getElementById("vid6").pause();
document.getElementById("vid1").play();
}
function dimBack2() {
document.getElementById("vid1").pause();
document.getElementById("vid3").pause();
document.getElementById("vid4").pause();
document.getElementById("vid5").pause();
document.getElementById("vid6").pause();
document.getElementById("vid2").play();
}
function dimBack3() {
document.getElementById("vid3").play();
document.getElementById("vid1").pause();
document.getElementById("vid2").pause();
document.getElementById("vid4").pause();
document.getElementById("vid5").pause();
document.getElementById("vid6").pause();
}
function dimBack4() {
document.getElementById("vid4").play();
document.getElementById("vid1").pause();
document.getElementById("vid2").pause();
document.getElementById("vid3").pause();
document.getElementById("vid5").pause();
document.getElementById("vid6").pause();
}
function dimBack5() {
document.getElementById("vid5").play();
document.getElementById("vid1").pause();
document.getElementById("vid2").pause();
document.getElementById("vid3").pause();
document.getElementById("vid4").pause();
document.getElementById("vid6").pause();
}
function dimBack6() {
document.getElementById("vid6").play();
document.getElementById("vid1").pause();
document.getElementById("vid2").pause();
document.getElementById("vid3").pause();
document.getElementById("vid4").pause();
document.getElementById("vid5").pause();
}
</script>

以上代码在http://www.confesstalk.com/cl/test.html

上线

主要要求：

允许加载视频
点击第一个视频
点击第二个视频
点击第一个视频，暂停第一个视频。
如果我点击另一个视频我需要代码暂停第二个视频

Answer 1

有一些“戏剧”以不同的顺序添加。

确实没有必要将.play();与.addEventListener('play', ...)一起使用，因为这可能会导致“事件”中出现“循环”。

使用array在元素中运行事件，请参阅：

(function () {
    var videos = [
        document.getElementById("vid1"),
        document.getElementById("vid2"),
        document.getElementById("vid3"),
        document.getElementById("vid4"),
        document.getElementById("vid5"),
        document.getElementById("vid6")
    ];

    function stopOthers () {
        var id = this.id, i = 0;
        for (var j = videos.length; i < j; i++) {
            if (videos[i].id !== id) {
                videos[i].pause();
            }
        }
    }

    var i = 0;
    for (var j = videos.length; i < j; i++) {
        videos[i].addEventListener("play", stopOthers, false);
    }
})();

一次只播放一个视频HTML5

1 个答案: