关闭所有HTML5视频

Question

我正在寻找一种方法，以关闭一个单一的视频网站上的所有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中，它抛出一个错误，表明由于元素被隐藏，它不再可用。有谁知道如何可靠地停止所有视频？

谢谢!

Answer 1

首先，您应该了解一些关于jQuery的知识。每次调用$() (带有一些参数)时，都会创建一个新的jQuery对象，这对性能很不利。如果使用相同的参数调用$()，则应该缓存结果，因此在本例中应该是：

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

其次，当您使用jQuery执行each循环时，函数中的上下文(this)和第二个参数是html对象。因此，将它们包装在$()-method中，然后执行.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/)