3

私のウェブサイトには YouTube 動画のリストがあり、各リスト アイテムは次のようになります。

<div class="video_item" id="<YouTubeVideoID>"> 
    // video thumbnail and information
</div>

ユーザーがこれらのビデオ アイテムのいずれかをクリックすると、パネルがドロップ ダウンし、パネルがスライド アクションを完了すると、API をロードしてビデオ プレーヤーを表示する必要があります。

$(document).ready(function(e) {
    $('.video_item').live('click', function() {
        var vid_id = $(this).attr('id');
        if (vid_id) {
            $("html").animate({ scrollTop: $('#main').offset().top-20 }, 1000, function() {
                setTimeout(function() {
                    $('.video_drop_panel_wrap').slideDown('slow', function() {

                        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 player;
                        function onYouTubeIframeAPIReady() {
                          player = new YT.Player('youtube_player', {
                            height: '371',
                            width: '570',
                            videoId: vid_id,
                            events: {
                              'onReady': onPlayerReady
                            }
                          });
                        }

                        function onPlayerReady(event) {
                          event.target.playVideo();
                        }
                    });
                },1000);
            });
        }
    });
});

問題は、プレーヤーが表示されず、JS 開発者コンソールにエラーが表示されないことです。すべてのスライド ダウン パネルを使用せずに API とプレーヤーをテストしましたが、うまくいきました。それがDOMの問題なのか、それ以外の問題なのかはわかりません。誰かが私が間違ったことを見つけた場合は、平手打ちをいただければ幸いです...ああ、何が間違っていたのか教えてください。

4

2 に答える 2

3

エラーが発生するのは、 youronYouTubeIframeAPIReady()がグローバル スコープに存在せず、 内にのみ存在するため$('.video_drop_panel_wrap').slideDown('slow', function() {...})です。<script>API の遅延読み込みは、スコープの観点からタグ内に配置することと同等であるため、グローバル関数を検索します。

コードをリファクタリングして、起動時onYouTubeIframeAPIReady()に読み込みたいビデオに関する情報を指すようにすることができます。

おおよそ、API が読み込まれると、次のようになります。

<script> 
       //Youtube api stuff
         (function(){
             //Do Stuff
             onYouTubeIframeAPIReady();
         })();
</script>
<script>
       $(document).ready(function(){'Your Stuff Here'})
</script>

そのため、API Ready 呼び出しが行われると、呼び出し元のコンテキストが認識されません。これは、独自の別の関数から発信されているためです。

大まかな解決策は、コードを下の行から次の行に変更することですvar player。

onYouTubeIframeAPIReady = function(){
  player = new YT.Player('youtube_player', {
    height: '371',
    width: '570',
    videoId: vid_id,
    events: {
      'onReady': onPlayerReady
    }
  });
}

ステートメントを使用せずに定義されているためvar、スコープチェーンで同じ名前の変数が見つからない場合、変数はグローバルスコープで作成されます。の作成時に存在するため (ローカル スコープ) onPlayerReady、同じ処理は必要ありません。onYouTubeIframAPIReady

于 2012-10-29T03:00:33.803 に答える
0

このプラグインを使用してみてください ...... https://code.google.com/p/jquery-ytiframetracker/

于 2013-03-26T13:45:53.990 に答える