1

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

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

帮助！请！如果我的代码丑陋或调用不必要的东西，请原谅我。我已经为此投入了 24 小时的代码，试图让它工作。

每个玩家都在自己的 Absolute Div 中。然后使用 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>

最终我希望能够控制/停止我现有的显示/隐藏图像映射中的每个视频......例如......

<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();"/>

我到底做错了什么？

4

3 回答 3

0

你给他们都一样的ID，'notesplayer'吗？如果是这样，那就可以解释为什么每个

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

正在覆盖前一个播放器对象。

如果没有，请显示更多代码...这样我们就可以看到每个播放器的 html 和 javascript 与其他播放器的关系。

于 2013-01-10T00:50:42.730 回答
0

这是一个链接，可以帮助我解决同样的问题。处理多个 youtube 视频

我挂断电话的地方和你一样。我们不能使用多个 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>
于 2014-01-17T01:29:23.253 回答
-1 
<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/

于 2015-03-18T09:20:22.617 回答