在播放另一个时暂停YouTube iframe嵌入

3 回答

• 14

  您实际上想要使用iFrame Player API，而不是使用iframe . 根据您实际想要嵌入的视频数量，您可能希望使这个javascript更具动态性，但是这个工作示例应该足以让您开始使用 .

  基本上我在这里做的是初始化两个玩家，并在玩家状态改变播放时暂停相反的视频 .

  您可以在http://jsfiddle.net/mattkoskela/Whxjx/播放以下代码

  <script>
  var tag = document.createElement('script');
  tag.src = "//www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  
  var player;
  function onYouTubeIframeAPIReady() {
      player1 = new YT.Player('player1', {
          height: '293',
          width: '520',
          videoId: 'zXV8GMSc5Vg',
          events: {
              'onStateChange': onPlayerStateChange
          }
      });
      player2 = new YT.Player('player2', {
          height: '293',
          width: '520',
          videoId: 'LTy0TzA_4DQ',
          events: {
              'onStateChange': onPlayerStateChange
          }
      });
  }
  
  function onPlayerStateChange(event) {
      if (event.data == YT.PlayerState.PLAYING) {
          stopVideo(event.target.a.id);
      }
  }
  
  function stopVideo(player_id) {
      if (player_id == "player1") {
          player2.stopVideo();
      } else if (player_id == "player2") {
          player1.stopVideo();
      }
  }
  

  回复于 2024-04-28T00:22:20+08:00
• 5

  这是@Matt Koskela版本的高级版本 . 它不要求您通过JavaScript创建视频 . 例如，如果视频是在PHP端生成的（想想Wordpress） .

  JsFiddle demo here .

  <script>
      var tag = document.createElement('script');
      tag.src = "//www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  
      function onYouTubeIframeAPIReady() {
          var $ = jQuery;
          var players = [];
          $('iframe').filter(function(){return this.src.indexOf('http://www.youtube.com/') == 0}).each( function (k, v) {
              if (!this.id) { this.id='embeddedvideoiframe' + k }
              players.push(new YT.Player(this.id, {
                  events: {
                      'onStateChange': function(event) {
                          if (event.data == YT.PlayerState.PLAYING) {
                              $.each(players, function(k, v) {
                                  if (this.getIframe().id != event.target.getIframe().id) {
                                      this.pauseVideo();
                                  }
                              });
                          }
                      }
                  }
              }))
          });
      }
  </script>
  
  One: 
  <iframe frameborder="0" allowfullscreen="1" title="YouTube video player" width="160" height="100" src="http://www.youtube.com/embed/zXV8GMSc5Vg?enablejsapi=1&amp;origin=http%3A%2F%2Ffiddle.jshell.net"></iframe>
  
  
  Two:
  <iframe frameborder="0" allowfullscreen="1" title="YouTube video player" width="160" height="100" src="http://www.youtube.com/embed/LTy0TzA_4DQ?enablejsapi=1&amp;origin=http%3A%2F%2Ffiddle.jshell.net"></iframe>
  

  Edit: 如果您的视频以缩略图开头，请查看Jennie Sadler's fine-tuned version below .

  回复于 2024-04-28T00:22:20+08:00
• 7

  vbence 's solution is really close, but there' s我会建议的一个编辑 . 您应该在暂停之前检查其他玩家是否正在播放，否则，播放页面上的第一个嵌入将播放/暂停页面上的所有其他嵌入，删除预览缩略图并创建令人吃惊的副作用 .

  <script>
  var tag = document.createElement('script');
  tag.src = "//www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  
  function onYouTubeIframeAPIReady() {
      var $ = jQuery;
      var players = [];
      $('iframe').filter(function(){return this.src.indexOf('http://www.youtube.com/') == 0}).each( function (k, v) {
          if (!this.id) { this.id='embeddedvideoiframe' + k }
          players.push(new YT.Player(this.id, {
              events: {
                  'onStateChange': function(event) {
                      if (event.data == YT.PlayerState.PLAYING) {
                          $.each(players, function(k, v) {
                              if (this.getPlayerState() == YT.PlayerState.PLAYING # checks for only players that are playing
                                    && this.getIframe().id != event.target.getIframe().id) { 
                                  this.pauseVideo();
                              }
                          });
                      }
                  }
              }
          }))
      });
  }
  </script>
  
  One: 
  <iframe frameborder="0" allowfullscreen="1" title="YouTube video player" width="160" height="100" src="http://www.youtube.com/embed/zXV8GMSc5Vg?enablejsapi=1&amp;origin=http%3A%2F%2Ffiddle.jshell.net"></iframe>
  
  
  Two:
  <iframe frameborder="0" allowfullscreen="1" title="YouTube video player" width="160" height="100" src="http://www.youtube.com/embed/LTy0TzA_4DQ?enablejsapi=1&amp;origin=http%3A%2F%2Ffiddle.jshell.net"></iframe>
  

  回复于 2024-04-28T00:22:20+08:00