禁用 AngularJS 中的 YouTube 视频在 Bootstrap 模式中播放答案

【问题标题】：Disable YouTube video in AngularJS playing in Bootstrap modal禁用 AngularJS 中的 YouTube 视频在 Bootstrap 模式中播放
【发布时间】：2014-10-23 23:40:12
【问题描述】：

我在 Bootstrap 模式中嵌入了一个 YouTube 视频。问题是当用户点击离开模式时，它会关闭并且视频继续播放。我正在尝试添加一些东西，我可以检查模式是否关闭然后停止视频。我试过使用$scope.$watch('videoModalone'，但没有成功。

          <div class="modal fade" id="videoModalone" ng-model="youtubeVideo">
                <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>
                            <h4 class="modal-title"></h4>
                        </div>
                        <div class="modal-body">
                            <iframe width="550" height="350" src="http://www.youtube.com/embed/mwuPTI8AT7M?rel=0" frameborder="0"></iframe>
                        </div>
                    </div>
                </div>
            </div>

【问题讨论】：

标签： angularjs twitter-bootstrap bootstrap-modal video-embedding

【解决方案1】：

对于那些感兴趣的人，这就是我的工作方式：

     <div class="modal fade" id="videoModalone">
            <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>
                        <h4 class="modal-title"></h4>
                    </div>
                    <div class="modal-body">
                        <iframe width="550" height="350" src="http://www.youtube.com/embed/mwuPTI8AT7M?enablejsapi=1&version=3&playerapiid=ytplayer" frameborder="0"></iframe>
                    </div>
                </div>
            </div>
        </div>

然后在我的控制器中寻找模态关闭

$('#videoModalone').on('hide.bs.modal', function () {
    var outerDiv = document.getElementById("videoModalone");
    var youtubeIframe = outerDiv.getElementsByTagName("iframe")[0].contentWindow;
    youtubeIframe.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*'); 
});

这成功了，关键是视频的网址 ?enablejsapi=1&version=3&playerapiid=ytplayer

【讨论】：

您使用了有问题的 Angular js 并在 javascript 中给出了解决方案？

【解决方案2】：

对于 Bootstrap 5 模态

ngAfterContentChecked(): 无效 { document.getElementById('videoModalone').addEventListener('hide.bs.modal', function () { const getFrame = this.getElementsByTagName("iframe")[0].contentWindow; getFrame.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*'); }); }

【讨论】：