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

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

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

代码如下：

<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>

您的浏览器不支持HTML5视频。

由于您使用的是引导模式，因此可以挂接到其事件以暂停视频：

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

以下是此方法的演示：

$（'.modal'）.on（'hidden.bs.modal'，function（）{
$（'.video'）[0]。暂停（）；
});

您的浏览器不支持HTML5视频。
这一个非常有效，但您需要在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();


函数playStopVideo（）{
var youtubeFunc=''；
var outerDiv=$（“#myModal”）；
var youtubeIframe=outerDiv.find（“iframe”）[0].contentWindow；
outerDiv.on（'hidden.bs.modal'，函数（e）{
youtubeFunc='stopVideo'；
postMessage（“{”事件“：”命令“，”函数“：”+youtubeFunc+”，“参数“：”}'，“*”）；
});
outerDiv.on（'show.bs.modal'，函数（e）{
youtubeFunc=‘播放视频’；
postMessage（“{”事件“：”命令“，”函数“：”+youtubeFunc+”，“参数“：”}'，“*”）；
});
}
播放停止视频（）；
如何打开模式对话框？如何关闭？解决方案可能是一个简单的javascript函数，用户单击按钮时告诉视频播放，模式关闭时暂停单击图像打开对话框，然后单击关闭视频关闭对话框。