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进行每个循环时，函数中的上下文（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/）

关闭所有HTML5视频

1 个答案: