当视频播放器不在视野范围内时，将 HTML5 视频设置为暂停

Question

我想用 JavaScript 来做到这一点。我正在使用 Hakim El Hattab 的 Reveal.js 作为基础来构建演示文稿。

Reveal.js 的工作方式是，您正在查看的当前幻灯片具有 .present 类，任何先前的幻灯片都具有 .past 类，而任何尚未进入视图的幻灯片都具有 .future 类。

我希望它自动暂停设置为 .past 或 .future 的幻灯片内的任何视频。

我该怎么办？

提前致谢！

***********< em>*更新******* *******

所以，多亏了我在css-tricks forums 我能够使用 getElementById 让它在单个视频上工作。

下面是我用来添加 .past 和 .future 类并同时暂停视频的 javascript。

if( i < index ) {
    // Any element previous to index is given the 'past' class
    slide.setAttribute('class', 'past');
    document.getElementById('vid').pause();
}
else if( i > index ) {
    // Any element subsequent to index is given the 'future' class
    slide.setAttribute('class', 'future');
    document.getElementById('vid').pause();
}

我现在遇到的问题是如何将其应用于标签名称（即：视频）或可能的类。

Answer 1

现在您已经发布了代码，修复起来更加容易：

if( i < index ) {
    // Any element previous to index is given the 'past' class
    slide.setAttribute('class', 'past');
    var vids = document.getElementsByClassName("past");
    for (var i = 0; i < vids.length; i++) {
        vids[i].pause();
    }
}
else if( i > index ) {
    // Any element subsequent to index is given the 'future' class
    slide.setAttribute('class', 'future');
    var vids = document.getElementsByClassName("future");
    for (var i = 0; i < vids.length; i++) {
        vids[i].pause();
    }
}

看看是否有帮助。如果没有，您使用的是现代且符合标准的浏览器吗？ getElementsByClassName() 是一个相对较新的功能。它适用于我的最新版本的 Chrome。

Answer 2

我不知道 setTimeout 在这里是否有效，但您可以尝试以下操作：

function PauseVids() {
    var vids = document.getElementsByClassName("past");
    var vids2 = document.getElementsByClassName("future");
    for (var i = 0; i < vids.length; i++) {
        vids[i].pause();
    }
    for (var i = 0; i < vids2.length; i++) {
        vids2[i].pause();
    }
}

// Within onLoad or $(document).ready()
setTimeout("PauseVids()", 1000);

告诉我这是否有效。

Answer 3

@petschekr：猜猜这行不通，因为过去未来的类名不仅设置为 videoelements？！

我不知道揭示是如何工作的以及你使用的是什么类型的播放器！但我的方式是这样的：

当前类只有一个文件，右侧（当前幻灯片）

a）定义像onChange函数一样的东西（例如在每个更改页面+按键的按钮上）

b）在你之前触发该函数切换页面

function onChange(){
       var currentSlice = document.getElementByClassName('present')  //get current html elemen
       var videoObjects = currentSlice.getElementsByTag('video')  //get videoelements here html5 video
       for each videoObj      
            videoObj.pause()

编辑：伪代码让您有一个想法！