javascript - 关闭模式后视频继续播放

Question

我希望我的代码播放视频，但是当我关闭模式时，视频中的音乐仍然在后台播放。

<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>       
                <!-- 16:9 aspect ratio -->
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="" id="video"  allowscriptaccess="always" allow="autoplay"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

我尝试使用 jquery 来修复它，但没有任何反应。

 $(document).ready(function () {
    var $videoSrc;
    $('.btn-play').click(function () {
        $videoSrc = $(this).data("src");
    });
    console.log($videoSrc);

    $('#videoModal').on('shown.bs.modal', function (e) {
        $("#video").attr('src', $videoSrc + "?autoplay=1&modestbranding=1&showinfo=0");
    })

    $('#videoModal').on('hide.bs.modal', function (e) {
        $("#video").attr('src', $videoSrc);
    })
});

Answer 1

要执行您需要的操作，您可以在 hide.bs.modal 事件触发时停止或暂停视频播放。

您可以通过向包含嵌入式 Youtube 播放器的 iframe 发送 postMessage 来完成此操作。请注意，必须将 enablejsapi=1 参数包含在嵌入 URL 中才能发挥作用。

这是一个简化的示例:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div><a href="#" class="play-video">Play Video</a></div>
<div><a href="#" class="stop-video">Stop Video</a></div>
<div><a href="#" class="pause-video">Pause Video</a></div>

<iframe class="embed-responsive-item" id="video" width="560" height="315" src="https://www.youtube.com/embed/LDU_Txk06tM?enablejsapi=1&version=3&playerapiid=ytplayer" allowscriptaccess="always" allow="autoplay"></iframe>

let videoIframeContent = $('#video')[0].contentWindow;

// stop 
videoIframeContent.postMessage(JSON.stringify({"event": "command", "func": "stopVideo" }), '*');

// pause
videoIframeContent.postMessage(JSON.stringify({"event": "command", "func": "pauseVideo" }), '*');

这是 jsFiddle 中的工作演示并且代码片段编辑器已沙盒化，不允许播放视频。