HTML5 视频停止关闭答案

【问题标题】：HTML5 Video Stop onCloseHTML5 视频停止关闭
【发布时间】：2011-02-22 04:21:06
【问题描述】：

我正在使用 jQuery 工具进行叠加。在叠加层内，我有一个 HTML5 视频。但是，当我关闭叠加层时，视频会继续播放。知道当我关闭叠加层时如何让视频停止吗？这是我的代码：

$("img[rel]").overlay({ onClose: function() { <stop the video somehow> }, mask: { color: '#000', opacity: 0.7 }});

我尝试过使用

$('video').pause();

但这也暂停了覆盖。

【问题讨论】：

标签： jquery html html5-video

【解决方案1】：

如果你想阻止页面中的每个电影标签播放，这个 jQuery 的小 sn-p 将帮助你：

$("video").each(function () { this.pause() });

【讨论】：

【解决方案2】：

使用不同浏览器启动视频

对于 Opera 12

window.navigator.getUserMedia(param, function(stream) {
                            video.src =window.URL.createObjectURL(stream);
                        }, videoError );

对于 Firefox Nightly 18.0

window.navigator.mozGetUserMedia(param, function(stream) {
                            video.mozSrcObject = stream;
                        }, videoError );

对于 Chrome 22

window.navigator.webkitGetUserMedia(param, function(stream) {
                            video.src =window.webkitURL.createObjectURL(stream);
                        },  videoError );

使用不同的浏览器停止视频

对于 Opera 12

video.pause();
video.src=null;

对于 Firefox Nightly 18.0

video.pause();
video.mozSrcObject=null;

对于 Chrome 22

video.pause();
video.src="";

【讨论】：

这似乎并不是专门针对所提出的问题

【解决方案3】：

以下对我有用：

$('video')[0].pause();

【讨论】：

【解决方案4】：

问题可能出在您选择的 jquery 选择器上 $("video") 不是选择器

正确的选择器可能会为 video 标签放置一个 id 元素，即
假设您的视频元素如下所示：

<video id="vid1" width="480" height="267" oster="example.jpg" durationHint="33"> 
    <source src="video1.ogv" /> 
    <source src="video2.ogv" /> 
</video>

然后你可以通过$("#vid1") 用hash mark (#) 选择它，jquery 中的id 选择器。如果视频元素在函数中公开，则您可以访问 HtmlVideoElement (HtmlMediaElement)。此元素可以控制视频元素，在您的情况下，您可以对视频元素使用 pause() 方法。

检查 VideoElement here 的参考。
还要检查是否有后备参考 here。

【讨论】：

如果你可以拥有 N 个视频，那么使用 ID 是相当烦人的。
如果我想停止播放所有个视频怎么办？（例如通配符）
$("video") 是一个选择器，但是你必须使用$("video")[0]来获得第一个匹配，比如：$("video")[0].pause()

【解决方案5】：

有人已经有了答案。

$('video') 将返回一个视频项数组。它完全是一个有效的选择器！

所以

$("video").each(function () { this.pause() });

会起作用的。

【讨论】：

【解决方案6】：

对于 JQM+PhoneGap 应用程序，以下内容对我有用。

以下是我必须去让它工作的最低限度。当用户按下后退按钮时，由于在产生 ajax 请求时缓冲，我实际上遇到了停顿。在 Chrome 和 Android 浏览器中暂停视频使其保持缓冲。非异步 ajax 请求会卡住等待缓冲完成，而它永远不会。

将此绑定到 beforepagehide 事件修复它。

 $("#SOME_JQM_PAGE").live("pagebeforehide", function(event)
 {
           $("video").each(function () 
           { 
               logger.debug("PAUSE VIDEO");
               this.pause();
               this.src = "";
           });
 });

这将清除页面上的每个视频标签。

重要的部分是this.src = "";

【讨论】：

我使用了 $('video').each(function(k,v){ jQuery('video')[k].pause(); });这对我有用，从这个线程和@jantoine线程得到了这个想法。没有用 IE 测试。

【解决方案7】：

我对 Firefox 的体验是，将“id”属性添加到视频元素会导致 Firefox 完全崩溃……就像要求您提交错误报告一样。删除 id 元素，它工作正常。我不确定这是否适用于每个人，但我想我会分享我的经验以防万一。

【讨论】：

【解决方案8】：

要节省数小时的编码时间，请使用已针对嵌入式视频 iframe 优化的 jquery 插件。

我花了几天时间尝试将 Vimeo 的 moogaloop API 与 jquery 工具集成，但没有成功。请参阅this list 了解一些更简单的选项。

【讨论】：

【解决方案9】：

试试这个：

if ($.browser.msie)
{
   // Some other solution as applies to whatever IE compatible video player used.
}
else
{
   $('video')[0].pause();
}

但是，考虑到 $.browser 已被弃用，但我还没有找到类似的解决方案。

【讨论】：

由于 $.broswer 已被弃用，也许这不是一个好的解决方案 - 特别是因为已经有一个公认的答案？