1

同じページに複数のYouTubeAPIIframeを配置できない理由を整理するのを手伝ってもらえますか?このコードを別のインスタンスとしてコピーして貼り付けようとすると、どちらか一方が表示されません。このコードの最初の行のいくつかを削除しようとしましたが、それが問題の原因であると思われるためですが、私はJavascriptに比較的慣れていないため、どうすればよいかわかりません。

ページに約6つのYoutubeクリップをインストールし、APIを使用して、含まれているDIVが非表示になっているときにstopVideo()を使用できるようにする必要があります。

ヘルプ!お願いします!私のコードが醜い場合や不要なものを呼び出している場合はご容赦ください。私はそれを機能させるために24時間これでコードを投げてきました。

各プレイヤーは、独自のAbsoluteDivに所属しています。次に、YoutubeAPIを使用してYoutubedivが作成されます。

たとえば、これは1つのインスタンスです...

<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 に答える