Отключить видео YouTube в AngularJS, воспроизводимое в модальном режиме Bootstrap

У меня есть видео YouTube, встроенное в модальное окно Bootstrap. Проблема в том, что когда пользователь щелкает модальное окно, оно закрывается, а видео продолжает воспроизводиться. Я пытаюсь добавить что-то, где я могу проверить, закрыто ли модальное окно, чтобы остановить видео. Я пытался использовать $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
person Yeak    schedule 23.10.2014    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Для тех, кому интересно, вот как я заработал:

     <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":""}', '*'); 
});

и это помогло, теперь ключом ко всему этому является URL-адрес видео ?enablejsapi=1&version=3&playerapiid=ytplayer

person Yeak    schedule 24.10.2014
comment
Вы использовали угловой js, о котором идет речь, и дали решение в javascript? - person nishant; 23.06.2015

arrow_upward
0
arrow_downward

Для модального Bootstrap 5

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