Question

有些人可以帮我理清为什么我不能在同一页面上拥有多个Youtube API Iframe？当我尝试将此代码复制并粘贴为另一个实例时，不会出现其中一个或另一个。我已经尝试删除此代码的一些第一行，因为我怀疑这是问题所在，但我相对较新的Javascript，我不知道该怎么做才能继续。

我需要在我的页面上安装大约6个Youtube剪辑，并且需要使用API，以便在隐藏包含DIV时使用stopVideo（）。

帮助！请！如果我的代码很丑或者说不必要的东西，请原谅我。我已经在这24小时内抛出代码试图让它工作。

每位玩家都拥有自己的绝对分区。然后使用Youtube API创建Youtube div。

例如，这是一个实例...

<div id="notes1"  style="position:absolute; z-index:0; width:541px; left: 363px; top: 224px; height: auto; overflow:auto; overflow-x: hidden; background-color: #FFFFFF; layer-background-color: #FFFFFF; visibility: hidden;"> 

    <div id="notesplayer"></div>
   <script>

      var tag = document.createElement('script');
      tag.src = "http://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      var notesplayer;
      function onYouTubeIframeAPIReady() {
        notesplayer = new YT.Player('notesplayer', {
          height: '365',
          width: '425',
          videoId: 'cmIg9MWhVss',
          playerVars: {
            modestbranding: 1,
            wmode: "opaque",
            autoplay:0,
        },
          events: {
            'onReady': onPlayerReady,

          }
        });
      }


      function onPlayerReady(event) {
        notesplayer.stopVideo();
      }


     function stop() {
  if (notesplayer) {
    notesplayer.stopVideo();
  }
     }
    </script>
</div>

这是另一个例子......

<div id="married"  style="position:absolute; z-index:0; width:541px; left: 363px; top: 224px; height: auto; overflow:auto; overflow-x: hidden; background-color: #FFFFFF; layer-background-color: #FFFFFF; visibility: hidden;">

   <script>

      var tag = document.createElement('script');
      tag.src = "http://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      var marriedplayer;
      function onYouTubeIframeAPIReady() {
        marriedplayer = new YT.Player('marriedplayer', {
          height: '365',
          width: '425',
          videoId: 'nREbUaxUlmE',
          playerVars: {
            modestbranding: 1,
            wmode: "opaque",
            autoplay:0,
        },
          events: {
            'onReady': onPlayerReady,

          }
        });
      }


      function onPlayerReady(event) {
        marriedplayer.stopVideo();
      }


     function stop() {
  if (marriedplayer) {
    marriedplayer.stopVideo();
  }
     }
    </script>
</div>

最终我希望能够控制/停止现有的show / hide Imagemap中的每个视频......例如......

<area shape="rect" coords="8,19,561,74" href="#" alt="Home" onmouseover="MM_showHideLayers('Film-Menu-Plain','','hide','Film-Menu-Married','','hide','Film-Menu-Run','','hide','Film-Menu-Notes1','','hide','Film-Menu-Notes2','','hide');notesplayer.stopVideo();marriedplayer.stopVideo();"/>

我到底做错了什么？

Answer 1

你给他们所有相同的身份证，'notesplayer'？如果是这样，那将解释为什么每个

 new YT.Player('notesplayer', ...)

正在覆盖之前的玩家对象。

如果没有，请显示更多代码......所以我们可以看到每个玩家的html和javascript与其他玩家的关系。

Answer 2

这是帮助我解决同一问题的链接。 handling multiple youtube videos

我被挂起的地方和你一样。我们不能使用youtube api脚本的多个堆栈，而是我们必须一起描述变量。

 <script>


var tag = document.createElement('script');
      tag.src = "http://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    //call all your video ids' variables here
    var notesplayer;
    var marriedplayer;
    //then the function
    function onYouTubeIframeAPIReady() {
        notesplayer = new YT.Player('notesplayer', {
          height: '365',
          width: '425',
          videoId: 'cmIg9MWhVss',
          playerVars: {
            modestbranding: 1,
            wmode: "opaque",
            autoplay:0,
        },
          events: {
            'onReady': onPlayerReady,

          }
        });
        marriedplayer = new YT.Player('marriedplayer', {
          height: '365',
          width: '425',
          videoId: 'nREbUaxUlmE',
          playerVars: {
            modestbranding: 1,
            wmode: "opaque",
            autoplay:0,
        },
          events: {
            'onReady': onPlayerReady2, //this can't be the same as the above one

          }
        });


      }
    // this ends that set and now you're ready to call some function events
    // notice how i refer to onPlayerReady2 for marriedplayer etc
    function onPlayerReady2(event) {
        marriedplayer.stopVideo();
      }
    </script>

Answer 3

<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<script>


    var player1st;
    var player2nd;
    function onYouTubePlayerAPIReady() { 
    player1st = new YT.Player('frame1st', {events: {'onStateChange': onPlayerStateChange}}); 
    player2nd = new YT.Player('frame2nd', {events: {'onStateChange': onPlayerStateChange}});
        }


    //function onYouTubePlayerAPIReady() { player2nd = new YT.Player('frame2nd', {events: {'onStateChange': onPlayerStateChange}}); }


    function onPlayerStateChange(event) {
    alert(event.target.getPlayerState());

    }

</script>






<iframe id="frame1st" style="position: relative; height: 220px; width: 400px" src="http://www.youtube.com/embed/1g30Xyh6Wqc?rel=0&amp;enablejsapi=1"></iframe><br>
<a href="javascript: void(0)" onclick="player1st.playVideo(); return false">play1st</a><br>
<a href="javascript: void(0)" onclick="player1st.pauseVideo(); return false">pause1st</a><br>
<a href="javascript: void(0)" onclick="player1st.stopVideo(); return false">stop1st</a>




<iframe id="frame2nd" style="position: relative; height: 220px; width: 400px" src="http://www.youtube.com/embed/T39hYJAwR40?rel=0&amp;enablejsapi=1"></iframe><br>

<a href="javascript: void(0)" onclick="player2nd.playVideo(); return false">play2nd</a><br>
<a href="javascript: void(0)" onclick="player2nd.pauseVideo(); return false">pause2nd</a><br>
<a href="javascript: void(0)" onclick="player2nd.stopVideo(); return false">stop2nd</a>

http://jsfiddle.net/sumanP/rzeb23aq/1/

多个Youtube Iframe API

3 个答案: