1

我在使用 YouTube IFrame API 将播放列表排入队列时遇到问题。（https://developers.google.com/youtube/iframe_api_reference#Queueing_Functions）

我正在使用 flash 来显示 youtube 视频。使用 HTML5 显示了另一个问题，即在视频加载之前多次调用 videoplayback 调用。

在加载播放列表时，视频本身不会加载。它在网络选项卡中显示为对“待处理”的视频播放的调用，直到它在 7.5 分钟后超时，此时它再次尝试并且一切正常。顺便说一句，播放列表已成功加载 - 将鼠标悬停在 youtube iframe 上会显示已加载的播放列表。

复制此代码的代码如下，按照以下步骤发现问题： 1. 单击频道 2. 如果频道加载，转到 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 回答