关闭所有 HTML5 视频答案

【问题标题】：Turn off All HTML5 Video关闭所有 HTML5 视频
【发布时间】：2011-12-20 23:18:58
【问题描述】：

我正在寻找一种方法来关闭具有单个视频的网站上的所有 HTML5 视频。我正在开发一个使用模式窗口来显示内容的应用程序。其中一些内容是 HTML5 视频。当用户播放视频然后决定关闭包含该视频的模式窗口时，我希望视频停止。

我尝试过如下方法：

function stopVideo() {
    // Make sure to turn off and reset the video
    $( '.html5-video' ).each( function( index, element ) {
        $( this ).get( 0 ).currentTime = 0;
        $( this ).get( 0 ).pause();
    } );
}

这在 Safari 中运行良好；但是，在 FireFox 和 Chrome 中，它会抛出一个错误，提示由于该元素被隐藏，它不再可用。有谁知道如何可靠地停止所有视频？

谢谢！

【问题讨论】：

标签： html5-video

【解决方案1】：

首先，您应该了解一些有关 jQuery 的知识。每次调用 $() （带有一些参数）都会创建一个新的 jQuery 对象，这对性能不利。如果您使用相同的参数对 $() 进行调用，则应缓存结果，因此在您的情况下，这将是：

var video_object = $(this).get(0);
video_object.currentTime = 0;
video_object.pause();

其次，当您使用 jQuery 进行每个循环时，函数中的上下文 (this) 和第二个参数是 html-objects。所以将它们包装在 $() 方法中然后执行 .get(0) 是没有意义的。

所以这和你的方法是一样的：

function stopVideo() {
    // Make sure to turn off and reset the video
    $( '.html5-video' ).each( function( index, element ) {
      element.currentTime = 0;
      element.pause();
    } );
}

现在回到你的问题。你能举个例子或更多细节吗，因为上面的代码对我来说似乎没有错误（http://jsfiddle.net/klaascuvelier/fypAR/）

【讨论】：

感谢您的提示！我确实需要在这里做一些优化。在我举个例子之前，你能看看它是否适用于 Firefox 和 Chrome 吗？它在 Safari 中对我来说很好用。此外，问题似乎是 HTML5 视频元素被包裹在一个隐藏元素中，因此我得到错误的原因。
我意识到之前的评论听起来好像我没有在 FF 或 Chrome 中检查过。我有，这就是发生错误的地方。它不会在 Safari 中发生。
检查我之前帖子中的 jsfiddle 链接，这就是我在 Chrome 和 Firefox 中尝试过的，两者都适合我。