Question

我确实有一个嵌入式youtube iframe视频，该视频可以在点击时自动播放。现在，我必须在单击外部（窗口）或关闭按钮时停止自动播放iframe视频。我已经尝试了多种方法，但是两种情况都无法正常工作，例如，如果视频停止播放，则自动播放将无法正常工作，反之亦然。以下是我的代码。

//在这种情况下，视频因在外部单击而停止，但自动播放不起作用

<div id="modalVideo" class="modal fade">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"
                                    aria-hidden="true">&times;</button>
                                <img alt="Brand" src="{{ 'logo@2x.png' | asset_url }}" height="20">
                            </div>
                            <div class="embed-responsive embed-responsive-16by9">
                                <iframe class="embed-responsive-item" width="560" height="315"
                                    src="https://www.youtube.com/embed/aqkGCzcx34A?enablejsapi=1&version=3&playerapiid=ytplayer&autoplay=1"
                                    frameborder="0"
                                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                                    allowfullscreen></iframe>
                            </div>
                        </div>
                    </div>
                </div>

<script>
$(window).click(function () {
        $('.embed-responsive-item')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
    });
</script>

//这是自动播放有效但视频没有停止的情况

<div id="modalVideo" class="modal fade">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"
                                    aria-hidden="true">&times;</button>
                                <img alt="Brand" src="{{ 'logo@2x.png' | asset_url }}" height="20">
                            </div>
                            <div class="embed-responsive embed-responsive-16by9">
                                <iframe class="embed-responsive-item" width="560" height="315"
                                    src="https://www.youtube.com/embed/aqkGCzcx34A?autoplay=1"
                                    frameborder="0"
                                    allow="autoplay"
                                    allowfullscreen></iframe>
                            </div>
                        </div>
                    </div>
                </div>

<script>
$(window).click(function () {
        $('.embed-responsive-item')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
    });
</script>

如果你们遇到类似的情况或问题，请帮助我。

如何停止自动播放YouTube iframe视频？

0 个答案: