3

SWFObject を使用して YouTube 動画をウェブサイトに埋め込んでいます。1 つのページにビデオへのリンクが多数あり、各リンクはラッパー div をクリアし、次のコードで新しい埋め込みをロードします。

$('a.video-link').each(function () {
    $(this).on('click', function(e) {
        e.preventDefault();

        if ($('#video-wrap').has('object').length == 0) {
            var params = { allowScriptAccess: 'always', allowFullScreen: 'true' };
            var atts = { id: 'ytapiplayer' };
            swfobject.embedSWF($(this).attr('href'), 'ytapiplayer', '1000', '562', '8', null, null, params, atts);
            $('#video-wrap').show();
        } else {
            $('#video-wrap').find('object').remove();
            $(this).trigger('click');
        }
    });
});

これらは、各埋め込みに使用している Youtube リンクです。

http://www.youtube.com/v/{Youtube ID}?hl=en_US&rel=0&hd=1&border=0&version=3&fs=1&autoplay=1&autohide=1&enablejsapi=1&playerapiid=ytapiplayer

次に、 onYouTubePlayerReady() イベント ハンドラを次に示します。

function onYouTubePlayerReady(id) {
    console.log('youtube player is ready.');
    var ytplayer = document.getElementById('ytapiplayer');
    ytplayer.addEventListener('onStateChange', 'onYouTubePlayerStateChange');
    ytplayer.addEventListener('onError', 'onYouTubePlayerError');
}

すべての動画は正常に読み込まれますが、onYouTubePlayerReady がヒットすることはありません!

私はこことここから解決策を試しましたが、何もうまくいきませんでした:(

この問題を解決するのを手伝ってください。最終的な目標は、Youtube API を機能させることです。

ありがとう。

編集: コードをいじってみました。すべての名前が正しいことを確認し、異なるスクリプト タグおよび/または .js ファイルに分けて、最初に、document.ready() 内にロードします。それでも、onYouTubePlayerReady は起動しません。どう思いますか？

4

1 に答える 1

3

作業コードは次のとおりです。

各ビデオ リンクで SWFObject を実行します。

$('a.video-link').on('click', function(e) {
    e.preventDefault();
    // SWFObjects loads a video object into div with ID ytapiplayer.
    // If the wrapper div already contains a video we need to remove it first:
    if ($('#video-wrap').has('object').length == 0) {
        var params = { allowScriptAccess: 'always', allowFullScreen: 'true' };
        var atts = { id: 'ytapiplayer' };
        swfobject.embedSWF($(this).attr('href'), 'ytapiplayer', '1000', '562', '8', null, null, params, atts);

        $('#video-wrap').show();
    } else {
        $('#video-wrap').find('object').remove();
        $(this).trigger('click');
    }
});

API 値を含む YouTube リンク:

http://www.youtube.com/v/' + data.YoutubeLink + '?hl=en_US&rel=0&hd=1&border=0&version=3&fs=1&autoplay=1&autohide=1&enablejsapi=1&playerapiid=ytapiplayer

そして、SWFObject イベント ハンドラーこのコードを別の .js ファイルに入れ、SWFObject を実行するコードの前にロードしました。必要かどうかはわかりませんが、とにかく機能しています：

function onYouTubePlayerReady(id) {
    // We need the actual DOM element for this, if we want to use more advanced API.
    // This is because addEventListener activates the API.
    var ytplayer = $('#ytapiplayer').get(0);
    ytplayer.addEventListener('onStateChange', 'onYouTubePlayerStateChange'); // onYouTubePlayerStateChange(newState)
    ytplayer.addEventListener('onError', 'onYouTubePlayerError'); // onYouTubePlayerError(errorCode)
}
于 2012-06-10T11:01:04.090 に答える