Question

我有它所以你点击图像，视频在模态对话框中打开，然后你必须点击播放。如果您单击视频，它将继续播放，除非它已完成或已暂停。

如果我将视频设置为自动播放，则会在页面加载时自动播放，而不是在对话框打开时自动播放。

以下代码：

<img class="img-responsive portfolioImages center-block"     src="images/church1.jpg" alt="" data-toggle="modal" data-target="#1">
<div id="1" class="modal fade" tabindex="-1" role="dialog">
    <video controls class="center-block video">
        <source src="videos/big_buck_bunny.mp4" type="video/mp4">
        Your browser does not support HTML5 video.
    </video>
</div>

Answer 1

由于您使用的是Bootstrap模式，因此可以挂钩其hidden.bs.modal事件来暂停视频：

$('.modal').on('hidden.bs.modal', function () {
    $('.video')[0].pause();
});

以下是此方法的演示：

＆＃13;

$('.modal').on('hidden.bs.modal', function () {
    $('.video')[0].pause();
});

＆＃13;

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<img class="img-responsive portfolioImages center-block" src="http://lorempixel.com/100/100" alt="" data-toggle="modal" data-target="#1">
<div id="1" class="modal fade" tabindex="-1" role="dialog">
  <video controls class="center-block video" style="width: 500px;">
    <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4"> Your browser does not support HTML5 video.
  </video>
</div>

＆＃13;

Answer 2

这个很好用，但你需要在你的src中有enablejsapi=1，例如：

<iframe src="https://www.youtube.com/embed/YOUR_VIDEO_CODE?rel=0&amp;controls=0&amp;showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>


function playStopVideo() {
    var youtubeFunc ='';
    var outerDiv = $("#myModal");
    var youtubeIframe = outerDiv.find("iframe")[0].contentWindow;
    outerDiv.on('hidden.bs.modal', function (e) {
        youtubeFunc = 'stopVideo';
        youtubeIframe.postMessage('{"event":"command","func":"' + youtubeFunc + '","args":""}', '*');
    });
    outerDiv.on('shown.bs.modal', function (e) {
        youtubeFunc = 'playVideo';
        youtubeIframe.postMessage('{"event":"command","func":"' + youtubeFunc + '","args":""}', '*');
    });
}

playStopVideo();

模态打开时播放视频，关闭时暂停播放

2 个答案: