jQuery HTML5 视频停止 onClose
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2879227/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Video Stop onClose
提问by HWD
I'm using jQuery tools for an overlay. Inside the overlay I have an HTML5 video. However, when I close the overlay, the video keeps playing. Any idea how I might get the video to stop when I close the overlay? Here's the code I have:
我正在使用 jQuery 工具进行叠加。在覆盖层内，我有一个 HTML5 视频。但是，当我关闭叠加层时，视频会继续播放。知道如何在关闭叠加层时停止视频吗？这是我的代码：
$("img[rel]").overlay({ onClose: function() { <stop the video somehow> }, mask: { color: '#000', opacity: 0.7 }});
I tried using
我尝试使用
$('video').pause();
But this paused the overlay as well.
但这也暂停了覆盖。
采纳答案by Myra
The problem may be with jquery selector you've chosen
$("video")is not a selector
问题可能出在您选择的 jquery 选择器
$("video")不是选择器上
The right selector may be putting an idelement for videotag i.e.
Let's say your video element looks like this:
正确的选择器可能会为视频标签放置一个id元素，即
假设您的视频元素如下所示：
<video id="vid1" width="480" height="267" oster="example.jpg" durationHint="33">
<source src="video1.ogv" />
<source src="video2.ogv" />
</video>
Then you can select it via $("#vid1")with hash mark(#), id selector in jquery.
If a video element is exposed in function,then you have access to HtmlVideoElement(HtmlMediaElement).This elements has control over video element,in your case you can use pause()method for your video element.
然后，您可以通过选择它$("#vid1")以hash符号（＃），在jQuery的id选择。如果在函数中公开了视频元素，则您可以访问HtmlVideoElement(HtmlMediaElement)。此元素可以控制视频元素，在您的情况下，您可以使用pause()视频元素的方法。
Check reference for VideoElement here.
Also check that there is a fallback reference here.
回答by Ulrik H. Kold
If you want to stop every movie tag in your page from playing, this little snippet of jQuery will help you:
如果您想停止播放页面中的每个电影标签，这个 jQuery 小片段将帮助您：
$("video").each(function () { this.pause() });
回答by Alain Saurat
Starting Video with different browsers
使用不同的浏览器启动视频
For Opera 12
歌剧 12
window.navigator.getUserMedia(param, function(stream) {
video.src =window.URL.createObjectURL(stream);
}, videoError );
For Firefox Nightly 18.0
对于 Firefox Nightly 18.0
window.navigator.mozGetUserMedia(param, function(stream) {
video.mozSrcObject = stream;
}, videoError );
For Chrome 22
铬 22
window.navigator.webkitGetUserMedia(param, function(stream) {
video.src =window.webkitURL.createObjectURL(stream);
}, videoError );
Stopping video with different browsers
使用不同的浏览器停止视频
For Opera 12
歌剧 12
video.pause();
video.src=null;
For Firefox Nightly 18.0
对于 Firefox Nightly 18.0
video.pause();
video.mozSrcObject=null;
For Chrome 22
铬 22
video.pause();
video.src="";
回答by jantoine
The following works for me:
以下对我有用：
$('video')[0].pause();
回答by George
Someone already has the answer.
有人已经有了答案。
$('video') will return an array of video items. It is totally a valid seletor!
$('video') 将返回一组视频项目。它完全是一个有效的选择器！
so
所以
$("video").each(function () { this.pause() });
will work.
将工作。
回答by Halsafar
For a JQM+PhoneGap app the following worked for me.
对于 JQM+PhoneGap 应用程序，以下对我有用。
The following was the minimum I had to go to get this to work. I was actually experiencing a stall due to the buffering while spawning ajax requests when the user pressed the back button. Pausing the video in Chrome and the Android browser kept it buffering. The non-async ajax request would get stuck waiting for the buffering to finish, which it never would.
以下是我必须去让它工作的最低限度。当用户按下后退按钮时，我实际上在产生 ajax 请求时由于缓冲而遇到停顿。在 Chrome 和 Android 浏览器中暂停视频使其保持缓冲。非异步 ajax 请求会卡住等待缓冲完成，而这永远不会。
Binding this to the beforepagehide event fixed it.
将此绑定到 beforepagehide 事件修复了它。
$("#SOME_JQM_PAGE").live("pagebeforehide", function(event)
{
$("video").each(function ()
{
logger.debug("PAUSE VIDEO");
this.pause();
this.src = "";
});
});
This will clear every video tag on the page.
这将清除页面上的每个视频标签。
The important part is this.src = "";
重要的部分是 this.src = "";
回答by Jase in ATL
My experience with Firefox is that adding the 'id' attribute to a video element causes Firefox to crash completely...as in asking you to submit a bug report. Remove the idelement and it works fine. I am not sure if this is true for everyone, but I thought I'd share my experience in case it helps.
我使用 Firefox 的经验是，将“ id”属性添加到视频元素会导致 Firefox 完全崩溃……就像要求您提交错误报告一样。删除id元素，它工作正常。我不确定这是否适用于每个人，但我想我会分享我的经验，以防万一。
回答by Matth
To save hours of coding time, use a jquery plug-in already optimized for embedded video iframes.
要节省数小时的编码时间，请使用已针对嵌入式视频 iframe 进行优化的 jquery 插件。
I spent a couple days trying to integrate Vimeo's moogaloop API with jquery tools unsuccessfully. See this listfor a handful of easier options.
我花了几天时间尝试将 Vimeo 的 moogaloop API 与 jquery 工具集成，但未成功。有关一些更简单的选项，请参阅此列表。
回答by DustyDigits
Try this:
尝试这个：
if ($.browser.msie)
{
// Some other solution as applies to whatever IE compatible video player used.
}
else
{
$('video')[0].pause();
}
But, consider that $.browser is deprecated, but I haven't found a comparable solution.
但是，考虑到 $.browser 已被弃用，但我还没有找到类似的解决方案。
