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

Question

我想用 javascript 来做这件事。我正在使用 Hakim El Hattab 的 Reveal.js 作为基础来构建演示文稿。

Reveal.js 的工作方式是您正在查看的当前幻灯片有一个 .present 类，任何以前的幻灯片都有一个 .past 类，任何尚未显示的幻灯片都有一个 .future 类。

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

我该怎么办？

提前致谢！

************更新**************

因此，多亏了一些指导，我克服了 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：猜猜这行不通，因为过去未来的类名不仅设置为视频元素？！

我不知道显示如何工作以及您使用的是哪种播放器！但我的方式是这样的：

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

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()

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