1

YouTube IFrame API を使用してプレイリストをキューに入れるのに問題があります。( https://developers.google.com/youtube/iframe_api_reference#Queueing_Functions )

YouTubeの動画を表示するためにフラッシュを使用しています。HTML5 を使用すると、ビデオが読み込まれる前に videoplayback 呼び出しが複数回呼び出されるという別の問題が発生します。

プレイリストをロードすると、ビデオ自体がロードされません。これは、7.5 分後にタイムアウトになるまで「保留中」の videoplayback への呼び出しとしてネットワーク タブに表示され、その時点で再試行され、すべてが機能します。ちなみに、プレイリストは正常に読み込まれました。YouTube iframe にマウスを合わせると、読み込まれたプレイリストが表示されます。

これを再現するコードを以下に示します。問題は次の手順に従って検出されます。 1. チャネルをクリックします。

レプリケーションの方法が不自然であることは知っていますが、最初のロードでこれが「時々」見られます。

再生中のチャンネルに問題はありません - これは多くの異なるチャンネルで確認されています。

それは私のコードですか？回避策はありますか？修正はありますか？

Chrome 28、Firefox 22.0、および IE 10 を使用して、Windows 7 32 ビットでテスト済み

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
        <title>
            Youtube Test
        </title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type='text/javascript'>
var collection = [];
var player = null;
var playlistEnqueued = false;

function clear() {
    // Removes the iframe.
    if (player !== null) {
        player.destroy();
    }

    collection = [];
    playlistEnqueued = false;
    player = null;
}

function createYT(videoId) {
    // Clear anything that's up currently
    clear();

    // Yes, this could be $.ajax, however this way reduces the dependency on jQuery
    // further for the purposes of this test.
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            parseJSONResponse(JSON.parse(xmlhttp.responseText));
        }
    }
    xmlhttp.open("GET", "https://gdata.youtube.com/feeds/users/" + videoId + "/uploads?alt=json", true);
    xmlhttp.send();
}

function parseJSONResponse(data) {
    var feed = data.feed;
    $.each(feed.entry, function(index, entry, list) {
        collection.push(entry.id.$t.match('[^/]*$')[0]);
    });
    playVideo();
}

function playVideo(videoId) {
    try {
        if (videoId === undefined || videoId === null) {
            videoId = collection[0];
        }
        if (typeof(YT) == 'undefined' || typeof(YT.Player) == 'undefined') {
            window.onYouTubeIframeAPIReady = function() {
                playVideo(videoId);
            };
            $.getScript('//www.youtube.com/iframe_api');
        } else {
            if (playlistEnqueued === true) {
                player.playVideoAt(0);
            } else {
                player = new YT.Player('video', {
                    events: {
                        'onReady':function(event) {
                            try {
                                player.cuePlaylist(collection);
                            } catch (e) {
                                console.error(e);
                            }
                        },
                        'onError':function(error) {
                            console.error(error);
                        }
                    },
                    videoId: videoId,
                    width: 425,
                    height: 356,
                    playerVars: {
                        autoplay: 1,
                    }
                });

                // Attaching event listener after object creation due to
                // http://stackoverflow.com/questions/17078094/youtube-iframe-player-api-onstatechange-not-firing
                player.addEventListener('onStateChange', function(state) {
                    try {
                        stateChanged(state);
                    } catch (e) {
                        console.error(e);
                    }
                });
            }
        }
    } catch (e) {
        console.error(e);
    }
}

function stateChanged(state) {
    // This state will be called on enqueueing a playlist
    if (state.data == 5) {
        playlistEnqueued = true;

        playVideo();
    }
}

$(document).on('ready', function() {
    var player = $(document).find("#player");

    $("a").on('click', function() {
        var channel = $(this).attr('data-channel');
        createYT(channel);
        return false;
    });
});

        </script>
    </head>
    <body>
        <div class='test'>
            <div id='video'>
            </div>
            <a href='#' data-channel='mit'>MIT</a>
            <a href='#' data-channel='tedtalksdirector'>TED</a>
            <a href='#' data-channel='minutephysics'>Minute Physics</a>
        </div>
    </body>
</html>

フラッシュを使用し、ビデオ接続がタイムアウトするのを待ってから再試行すると、[ネットワーク] タブに次のように表示されます。ご覧のとおり、「保留中」で失敗し、7.5 分後に再試行されました。

ビデオの再生が開始されたら、 Chrome ネットワーク タブ: ビデオ再生の Chrome ネットワーク タブ

評判が10を超えると画像が増えます...

4

1 に答える 1

0

これを jsFiddle ( http://jsfiddle.net/3Bm2V/5/ ) で実行していますが、問題なく動作しているようです。私は変更しなければならなかった

$(document).on('ready', function () {

に

$(function() {

jsFiddle で動作するようにするには、上記のリンクを試して、今すぐ動作するかどうかを確認してください。

于 2013-07-18T16:05:52.520 に答える