javascript - HTML5 视频在特定类别时自动播放和自动停止

Question

我有一个视频 slider ，我想在可见时自动播放，不可见时自动停止。保持可见时的可见视频有一个标识它的类(事件)。

<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 操纵视频的状态。例如，对于播放，您可以选择具有 active 类的视频标签并播放它:

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

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

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

您将需要在单击或幻灯片更改时进行此操作，并且还要注意，首先您需要停止所有视频，然后只播放事件类的视频。