javascript - Bootstrap 模式与youtube视频在关闭时不会暂停

Question

我在YouTube视频中有多个 bootstrap 模式，并且希望在模式关闭时不停地暂停。我已经搜索过，但是找不到有效的解决方案。一旦我关闭模态并再次打开，视频便从头开始。我的代码是

$(document).ready(function() {
  $('.modal').each(function() {
    var src = $(this).find('iframe').attr('src');

    $(this).on('click', function() {

      $(this).find('iframe').attr('src', '');
      $(this).find('iframe').attr('src', src);

    });
  });
});


function checkForYoutubeVideos(){
            if ( jQuery('.youtubeplayer').length ){
                players = {};
                var tag = document.createElement('script');
                tag.src = "https://www.youtube.com/iframe_api";
                var firstScriptTag = document.getElementsByTagName('script')[0];
                firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
            }
        }
        function onYouTubeIframeAPIReady(e){
            jQuery('iframe.youtubeplayer').each(function(i){
                var youtubeiframeClass = jQuery(this).attr('id');
                players[youtubeiframeClass] = new YT.Player(youtubeiframeClass, {
                    events: {
                        onReady: onPlayerReady,
                        onStateChange: onPlayerStateChange,
                        onError: onPlayerError
                    }
                });
            });
            pauseFlag = false;
        }
        function onPlayerError(e){
            var videoTitle = e['target']['B']['videoData']['title'];
            ga('send', 'event', 'Error', 'Youtube API', videoTitle + ' (Code: ' + e.data + ')', {'nonInteraction': 1}); //Log the API error
        }
        function onPlayerReady(e){
           //Do something when player is ready.
        }
        function onPlayerStateChange(e){
            var videoTitle = e['target']['B']['videoData']['title'];
            if ( e.data == YT.PlayerState.PLAYING ){
                ga('send', 'event', 'Youtube', 'Play', videoTitle);
                pauseFlag = true;
            }
            if ( e.data == YT.PlayerState.ENDED ){
                ga('send', 'event', 'Youtube', 'Finished', videoTitle, {'nonInteraction': 1});
            } else if ( e.data == YT.PlayerState.PAUSED && pauseFlag ){
                ga('send', 'event', 'Youtube', 'Pause', videoTitle);
                pauseFlag = false;
            }
        }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="bs-example">
  <a href="#videoModal2" target="_blank" class="ga_track wp-read" data-toggle="modal">WATCH VIDEO &nbsp; <span class="next-arrow"></span> <span class="next-arrow"></span></a>

  <!-- Modal HTML -->
  <div id="videoModal2" 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">×</button>
        </div>
        <div class="modal-body">
          <iframe class="youtubeplayer" width="100%" height="315" src="https://www.youtube.com/embed/..." frameborder="0" allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

基于this answer。
您必须使用youTube iframe API。要首先使用它，您必须通过在链接中iframe查询字符串的末尾添加＆enablejsapi = 1来启用它。例:

<iframe width="560" height="315" class="youtubeplayer" id="youtubeplayer" src="https://www.youtube.com/embed/34Na4j8AVgA?list=PLDcnymzs18LWrKzHmzrGH1JzLBqrHi3xQ&enablejsapi=1" frameborder="0" allowfullscreen></iframe>

接下来，您需要使用 bootstrap 模态事件“shown.bs.modal”和“hidden.bs.modal”，以检查模态何时打开和何时关闭。

然后，我创建了一个函数“toggleVideo”，该函数将消息发送到iframe，这是您手动嵌入iframe时与youTube API进行通信的方式。 “postMessage”是HTML5功能，尽管Internet Explorer 7不支持postMessage，但大多数现代浏览器都支持postMessage。

$(document).ready(function() {
    $('.modal').each(function() {
        $this = $(this);
        $this.on('shown.bs.modal', function() {
            toggleVideo('playVideo', $(this));
        });

        $this.on('hidden.bs.modal', function(){
           toggleVideo('pauseVideo', $(this));
        })
   });

    function toggleVideo(state, div) {
        var iframe = div.find("iframe")[0].contentWindow;
        iframe.postMessage('{"event":"command","func":"' + state + '","args":""}', '*');
    }
});