VideoJS:停止视频模态关闭和不嵌入页面

VideoJS: Stopping video on modal close and not embedding in page

本文关键字：视频 模态 VideoJS      更新时间：2023-09-26

我一直在使用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>

我有两个问题:

1)如果视频正在播放，用户关闭视频弹出窗口，视频仍将在后台播放…我该如何阻止这一切?

2)我注意到在网站上，如:http://www.apple.com/imac/features.html，视频弹出以相同的方式使用标签和id来显示内容，但不像在我的例子中视频不在页面中…他们是怎么做到的?因为他们没有加载外部网页。我很想看到一些如何用jQuery做到这一点的例子，因为我将有多个视频，所以将是伟大的，只是拉他们基于标签上的链接!

谢谢

有两种方法可以做到这一点。

  1. 当弹出窗口关闭时，删除整个视频。使用$(video).remove()

  2. 使用videojs javascript方法

    VideoJS.DOMReady(function(){
  var myPlayer = VideoJS.setup("example_video_1");
  myPlayer.pause();  
});

http://help.videojs.com/discussions/suggestions/9-play-and-pause-video-via-jquery

在"jquery.reveal.js"中加入你想要视频暂停的函数

$(".video-js")[0].player.pause();

此代码防止多个播放器在视频库中运行:

$(".video-js").each(function() {
    $(this).player.pause();
});
相关文章：