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

Posted 2023-05-07

【中文标题】JavaScript 通过具有相同类的播放按钮播放具有相同类控制的视频

【英文标题】：JavaScript play videos with same class control by play buttons with same class

【发布时间】：2018-06-11 20:44:25

【问题描述】：

我正在尝试为 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>

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

谢谢:)

【问题讨论】：

最近的视频是什么意思？

播放按钮上方的视频

【参考方案1】：

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

您可以使用 parentNode 获取h3 和previousElementSibling 获取video 标签

你可以修改videoPlay方法为

function videoPlay( event ) 

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