JavaScript通过具有相同类的播放按钮播放具有相同类控件的视频

Question

我正在尝试为3个视频制作3个播放/暂停按钮。每个播放/暂停按钮控制最近的视频。

(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

  

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

您可以使用parentNode访问h3和previousElementSibling以转到video代码

您可以将videoPlay方法修改为

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