Question

我有youtube视频的多个bootstrap模式，我想暂停不停止当模态关闭。我已经搜索过，但无法找到一个有效的解决方案。一旦我关闭模态并再次打开，视频就从头开始。我的代码是

＆＃13;

$(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;
            }
        }

＆＃13;

<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>

＆＃13;

Answer 1

基于this answer。您必须使用youTube iframe api。要首先使用它，您必须通过在链接中的iframe查询字符串末尾添加＆amp; 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”＆amp; “hidden.bs.modal”，用于检查模态何时打开以及何时关闭。

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

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

使用youtube视频的Bootstrap模式在关闭时不会暂停

1 个答案: