Question

我有一个简单的模态窗口，里面有一个视频（使用Video.js）。我打开它并在点击时使用jquery关闭它。如果用户在任何时候关闭窗口，我需要暂停/停止视频。出于某种原因，我无法让它发挥作用。我一直在寻找一段时间并得到相同的答案，所以它应该很简单，但有些东西导致它不起作用。任何帮助将不胜感激！

<a href="#" class="video1"></a>

<div class="modal" id="video1" style="display:none;">
    <div class="modalBg"></div>
    <div class="videoContainer">
        <div class="closeBtn"></div>
        <div class="video">
            <video id="vid1" class="video-js vjs-default-skin" controls preload="none" width="auto" height="auto" data-setup="{}">
                <source src="video/video.mp4" type='video/mp4' />
            </video>
        </div>
    </div>
</div>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function() {

        $(".closeBtn").click(function() {
            $(".modal").hide();
            $("#vid1").player().pause();
        });

        $(".video1").click(function() {
            $("#video1").show();
        });

        $('video').on('ended',function(){
            $(".modal").hide();
        });
    });
</script>

我已将所有必要的video.js文件包含在脑中，不认为在这里包含这些引用很重要。

Answer 1

想出来......

这适用于暂停所有视频：

$('video').each(function() {
    $(this).get(0).pause();
});

这适用于播放特定视频：

$("#video1 video").get(0).play();

Answer 2

Video.js将原始video元素替换为包含播放器技术，海报元素，控件等的div元素。播放器中的播放器技术元素可能是视频元素，但也可以是使用Flash后备的情况下的对象。在任何一种情况下，tech元素本身都不会有原始的id。

您的解决方案针对新的视频元素，但这仅适用于使用HTML技术的情况。相反，使用video.js的api暂停视频：

$.each(videojs.players, function(index, player) {
  player.pause();
});

对于单个视频：

videojs('video1').pause();

Answer 3

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

暂停video.js播放器上的播放

3 个答案: