JavaScript 通过具有相同 class 的播放按钮以相同的 class 控制播放视频

Question

我正在尝试为 3 个视频制作 3 个 play/pause 按钮。每个 play/pause 按钮控制最近的视频。

(function () {
    var play = document.querySelectorAll('.video_play_button'),
        video = document.querySelectorAll('.timeline_video');

    function videoPlay() {
        video.forEach(function (videoItem) {
            if (videoItem.paused) {
                videoItem.play();
            } else {
                videoItem.pause();
            }
        });
    }

    play.forEach(function (playItem) {
        playItem.addEventListener('click', videoPlay, false);
    })
})();

<section>
<video class="timeline_video"></video>
<h3><span class="video_play_button"></span></h3>
</section>

<section>
<video class="timeline_video"></video>
<h3><span class="video_play_button"></span></h3>
</section>

<section>
<video class="timeline_video"></video>
<h3><span class="video_play_button"></span></h3>
</section>

当我现在点击播放按钮时，它会播放所有视频。如何让它只播放最近的视频？

谢谢:)

Answer 1

When I hit the play button now, it will play all the videos. How do I make it only plays the closest video?

您可以使用 parentNode 到达 h3 和 previousElementSibling 到达 video 标签

您可以将videoPlay方法修改为

function videoPlay( event ) 
{
    var videoItem = event.currentTarget.parentNode.previousElementSibling;
    videoItem.paused ? videoItem.play() : videoItem.pause();
}

JavaScript 通过具有相同 class 的播放按钮以相同的 class 控制播放视频

JavaScript play videos with same class control by play buttons with same class

javascript

dom

selector

html5-video