html - 一次仅播放一个视频 HTML5

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

主要要求:

1. 允许加载视频
2. 点击第一个视频
3. 点击第二个视频
4. 点击第一个视频时，暂停第一个视频。
5. 如果我点击另一个视频，我需要代码来暂停第二个视频

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