如何在播放单个iframe视频时阻止播放多个iframe YouTube视频

时间:2014-01-05 05:52:52

标签: php jquery youtube-api

我正在播放基于youtube播放器api的倍数,当我点击单人播放器播放时,当点击第二个播放器时,第一个播放器正在显示并与第二个播放器同时播放,

任何人都可以告诉我如何在播放单个视频时阻止播放多个视频

这是我的代码:

    <!DOCTYPE html>
    <html>
      <body>
    <?php
        for($i=1;$i<10;$i++)
        {
        ?>
            <div class="youtubeplayer" playerid='player<?=$i?>' style="cursor:pointer">
                <div id="player<?=$i?>">player<?=$i?></div>
            </div>
        <?php
        }
    ?>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;

 $(function()
      {
          $('.youtubeplayer').click(function()
          {         
            var playerid=$(this).attr('playerid');
            player = new YT.Player(playerid , 
            {
              height: '390',
              width: '640',
              videoId: 'kK42LZqO0wA',
              events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
              }
            });

          });
      });

 function onPlayerReady(event) {
        event.target.playVideo();
      }
      function onPlayerStateChange(event)
      { 
        if(event.data == YT.PlayerState.PLAYING)
        {
            alert('playing');
        }
        else
        {
            alert('paused');
        }
      }

 function stopVideo() {
        player.stopVideo();
      }
    </script>
     </body>
     </html>

1 个答案:

答案 0 :(得分:0)

这个 DEMO 适用于我而不使用三个静态html div同时播放

<div class="youtubeplayer" playerid='player1' style="cursor:pointer">
      <div id="player1">player</div>
</div>