Question

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

<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操纵视频的状态。例如，您可以选择具有类活动的视频标记并播放它：

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

对于任何其他视频标记，您只需使用以下代码暂停它们：

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

您需要在点击或幻灯片更改时进行此操作，并注意首先您需要停止所有视频，然后只播放带有活动类的视频。

Answer 2

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

翻译时：

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

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

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

这解决了我的问题。

HTML5视频自动播放和特定课程时的自动停止

2 个答案: