Javascript VideoJS：在模态关闭时停止视频而不嵌入页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6909477/
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
VideoJS: Stopping video on modal close and not embedding in page
提问by Cameron
I have been using the JavaScript script VideoJS: http://videojs.com/to build some video players that can be shown to the user in a popup. I have built the popup as follows:
我一直在使用 JavaScript 脚本 VideoJS：http://videojs.com/来构建一些可以在弹出窗口中向用户显示的视频播放器。我已经按如下方式构建了弹出窗口：
<script type="text/javascript">
VideoJS.setupAllWhenReady();
jQuery(document).ready(function ()
{
// videos have video js applied to them
//$("video").VideoJS()
$(".show-video").click(function ()
{
$(".video-background").show();
$(".video-container").fadeIn("fast");
});
$(".close-video").click(function ()
{
$('.video-background').fadeOut();
$('.video-container').fadeOut();
});
});
</script>
<a class="show-video">Show Video</a>
<div class="video-background">
<div class="video-container">
<div class="video-js-box vim-css">
<video id="video1" class="video-js" poster="wallpaper.png" controls="controls" width="1024" height="768">
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<object id="flash_fallback_1" class="vjs-flash-fallback" width="1024" height="768" type="application/x-shockwave-flash"
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["poster.png", {"url": "video.mp4","autoPlay":false,"autoBuffering":true}]}' />
</object>
</video>
</div>
<a class="close-video">Close Video</a>
</div>
</div>
I have two problems:
我有两个问题：
1) If the video is playing and the user closes the video popup, the video will still be playing in the background... how do I stop this?
1）如果视频正在播放并且用户关闭了视频弹出窗口，视频仍将在后台播放......我该如何停止？
2) I've noticed on sites like: http://www.apple.com/imac/features.htmlthat the videos popup in the same way by using a hashtag and id to show content but unlike in my example the video isn't in the page... any ideas on how they do this? As they arn't loading an external webpage. Would love to see some examples of how to do this with jQuery as I will be having multiple videos so would be great to just pull them in based on the hashtag on the link!
2）我在以下网站上注意到：http: //www.apple.com/imac/features.html视频以相同的方式弹出，使用主题标签和 id 来显示内容，但与我的示例不同的是，视频不是不在页面上......关于他们如何做到这一点的任何想法？因为他们没有加载外部网页。很想看到一些关于如何使用 jQuery 执行此操作的示例，因为我将有多个视频，因此根据链接上的主题标签将它们拉入会很棒！
Thanks
谢谢
回答by vinay
There are 2 ways you can do this.
有两种方法可以做到这一点。
- Remove the whole video when the popup is closed. Use
$(video).remove() Use the videojs javascript method
VideoJS.DOMReady(function(){ var myPlayer = VideoJS.setup("example_video_1"); myPlayer.pause(); });
- 当弹出窗口关闭时删除整个视频。用
$(video).remove() 使用 videojs javascript 方法
VideoJS.DOMReady(function(){ var myPlayer = VideoJS.setup("example_video_1"); myPlayer.pause(); });
回答by Paul
http://help.videojs.com/discussions/suggestions/9-play-and-pause-video-via-jquery
http://help.videojs.com/discussions/suggestions/9-play-and-pause-video-via-jquery
Put in function where you want your video to pause in "jquery.reveal.js"
在“jquery.reveal.js”中放置您希望视频暂停的功能
$(".video-js")[0].player.pause();
回答by Hossein Ghaem
This code prevents several players from running in a video gallery:
此代码可防止多个播放器在视频库中运行：
$(".video-js").each(function() {
$(this).player.pause();
});
