5

ページに多数のカルーセルがあり、それぞれにビデオと画像が混在しています。ユーザーがカルーセル コントロールのいずれか (左または右) をクリックしてビデオを終了したときに、Youtube ビデオの再生を停止したいと考えています。

ユーザーがコントロールをクリックしたことを検出し、再生中の現在のビデオに基づいてプレーヤーを作成し、そのビデオをオフにしたいと考えています。私が見た他の例では、プレーヤは onYoutubeIframeAPIReady 関数で宣言されていましたが、ページ上のすべてのビデオに対してプレーヤを動的に作成しないほうがよいと考えました。現在、エラーが発生しています

Uncaught TypeError: Object #<T> has no method 'stopVideo'

カルーセル コントロールをクリックしたとき。ただし、入力すると

player.stopVideo();

Chrome JavaScript コンソールでは、正常に動作します。私は何を間違っていますか？

  <script>
  var youtubeReady = false;

  function onYouTubeIframeAPIReady(){
    youtubeReady = true;
  }

  $('.carousel').on('slide', function(){
    if(youtubeReady){
      console.log("setting player");
      var iframeID = $(this).find('.active').find('iframe').attr("id");
      player = new YT.Player(iframeID); 
      player.stopVideo(); 
    }
  });
  </script>

カルーセルの例:

<div class="mainPhoto carousel slide 523" id="carousel-523">
          <div class="carousel-inner 523">
          <div class="item active">
             <div class="flex-video">
                 <a class="fancybox" href="http://www.youtube.com/embed/4pEqbs0ISaw?version=3&amp;enablejsapi=1" rel="gallery 523" data-fancybox-type="iframe">
                     <iframe src="http://www.youtube.com/embed/4pEqbs0ISaw?version=3&amp;enablejsapi=1" id="1188">
                     </iframe>
                 </a>
             </div>
         </div>
        <div class="item">
             <a class="fancybox" href="https://buildinprogress.s3.amazonaws.com/image/image_path/1189/2013-07-05_19.47.55.jpg" rel="gallery 523" data-fancybox-type="image">
                 <img alt="Preview_2013-07-05_19.47.55" id="1189" src="https://buildinprogress.s3.amazonaws.com/image/image_path/1189/preview_2013-07-05_19.47.55.jpg" width="100%">
            </a>
        </div>
    </div>
            <a class="carousel-control left" href="#carousel-523" data-slide="prev" style="display: none;">‹&lt;/a>
            <a class="carousel-control right" href="#carousel-523" data-slide="next" style="display: none;">›&lt;/a>
        </div>
4

1 に答える 1

3

ここで callPlayer 関数を使用することになりました (youtube API を使用する必要はまったくありませんでした):

YouTube iframe API: 既に HTML に含まれている iframe プレーヤーを制御するにはどうすればよいですか?

于 2013-07-07T18:29:22.960 に答える