HTML5 视频在特定 class 时自动播放和自动停止

Question

我有一个视频滑块，我想在可见时自动播放，在不可见时自动停止。保持可见时的可见视频有一个 class（活动）来标识它。

<video class="item active" controls autoplay poster="" width="640" height="360">
<video class="item" controls autoplay poster="" width="640" height="360">
<video class="item" controls autoplay poster="" width="640" height="360">

我该怎么做？

Answer 1

您可以使用 javascript 操纵视频的状态。例如，为了播放，您可以 select 激活 class 的视频标签并播放它：

document.querySelector('video.active').play();

对于任何其他视频标签，您可以使用此代码暂停它们：

var videos = document.querySelectorAll('video.item');
for(var i = 0; i < videos.length; i++) {
    videos[i].pause();
}

您需要在点击或幻灯片切换时进行此操作，同时请注意，首先您需要停止所有视频，然后播放处于活动状态的视频 class。

Answer 2

我在翻译初始化幻灯片然后执行这些功能时触发滑块上的事件：

翻译时：

function(){
           $('.item').find('video').each(function(){
               this.pause();
           });

初始化新幻灯片时（自动播放）：

function(){
           $('.active').find('video').each(function(){
               this.play();
           });

这解决了我的问题。

HTML5 视频在特定 class 时自动播放和自动停止

HTML5 video autoplay and autostop when specific class on it

html

javascript

video

jquery

slider