0

下面的小提琴在 chrome、fox 和 iE 中打开时工作正常

'http://jsfiddle.net/wmdPN/'

当我从小提琴中复制代码并在我的机器中使用它时，它无法正常工作，因为 o.loadVideoById 不是函数。为什么呢 ？我究竟做错了什么？

我使用的代码如下（和fiddle一样）

 <html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js">               </script>

<a name="ytplayer"></a>
<div id="ytplayer_div1">You need Flash player 8+ and JavaScript
    enabled to view this video.</div>
<div id="ytplayer_div2"></div>
<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/swfobject/2/swfobject.js"></script>
<script type="text/javascript">

    var ytplayer_playlist = [];
    var ytplayer_playitem = 0;

    function ytplayer_render_player() {
        if (/\d+/.test(window.location.hash)) {
            ytplayer_playitem = parseInt(/\d+/.exec(window.location.hash)) - 1;
        }
        swfobject.embedSWF('http://www.youtube.com/v/'
                + ytplayer_playlist[ytplayer_playitem]
                + '&enablejsapi=1&rel=0&fs=1'
                + (/\d+/.test(window.location.hash) ? '&autoplay=1' : ''),
                'ytplayer_div1', '425', '344', '8', null, null, {
                    allowScriptAccess : 'always',
                    allowFullScreen : 'true'
                }, {
                    id : 'ytplayer_object'
                });
    }

    function ytplayer_render_playlist() {
        for ( var i = 0; i < ytplayer_playlist.length; i++) {
            var img = document.createElement("img");
            img.src = "http://img.youtube.com/vi/" + ytplayer_playlist[i]
                    + "/default.jpg";
            var a = document.createElement("a");
            a.href = "#ytplayer";
            //
            // Thanks to some nice people who answered this question:
            // http://stackoverflow.com/questions/1552941/variables-in-anonymous-functions-can-someone-explain-the-following
            //
            a.onclick = (

            function(j) {
                return function() {
                    ytplayer_playitem = j;
                    ytplayer_playlazy(1000);
                };
            })(i);
            a.appendChild(img);
            document.getElementById("ytplayer_div2").appendChild(a);
        }
    }

    function ytplayer_playlazy(delay) {
        //
        // Thanks to the anonymous person posted this tip:
        // http://www.tipstrs.com/tip/1084/Static-variables-in-Javascript
        //
        if (typeof ytplayer_playlazy.timeoutid != 'undefined') {
            window.clearTimeout(ytplayer_playlazy.timeoutid);
        }
        ytplayer_playlazy.timeoutid = window.setTimeout(ytplayer_play,
                delay);
    }

    function ytplayer_play() {
        var o = document.getElementById('ytplayer_object');
        if (o) {
            o.loadVideoById(ytplayer_playlist[ytplayer_playitem]);
        }
    }


     function onYouTubePlayerReady(playerid) {
        var o = document.getElementById('ytplayer_object');
        if (o) {
    o.addEventListener("onStateChange",        "ytplayer_statechange");
            o.addEventListener("onError", "ytplayer_error");
        }
    }
    //
    //State Change Handler
    //* Sets up the video index variable
    //* Calls the lazy play function
    //

    function ytplayer_statechange(state) {
        if (state == 0) {
            ytplayer_playitem += 1;
            ytplayer_playitem %= ytplayer_playlist.length;
            ytplayer_playlazy(5000);
        }
    }
    //
    //Error Handler
    //* Sets up the video index variable
    //* Calls the lazy play function
    //

    function ytplayer_error(error) {
        if (error) {
            ytplayer_playitem += 1;
            ytplayer_playitem %= ytplayer_playlist.length;
            ytplayer_playlazy(5000);
        }
    }
    //
    //Add items to the playlist one-by-one
    //
    ytplayer_playlist.push('tGvHNNOLnCk');
    ytplayer_playlist.push('_-8IufkbuD0');
    ytplayer_playlist.push('wvsboPUjrGc');
    ytplayer_playlist.push('8To-6VIJZRE');
    ytplayer_playlist.push('8pdkEJ0nFBg');
    //
    //These lines have been moved to the bottom
    //
    ytplayer_render_player();
    ytplayer_render_playlist();
</script>

</body>

</html>
4

1 回答 1

1

首先是loadVideoById而不是 loadByvideoId。但我认为这是一个错字。

这里有同样的问题，但我自己的代码。问题是当 iframe 由于某种原因不可见时，iframe 不会加载内容，并且 API 不会扩展对象（loadVideoById 不存在的原因）。此外，函数 window.onPlayerReady 在不可见时将永远不会被调用。这也可能是您的问题。确保 iframe 在页面上确实可见。

我使用的“技巧”是使用一些 CSS 将 iframe 加载到可见区域，加载后我更改类名，以便将其放置在正确的位置/位置：

CSS：

#player {position:relative; width:200px; height:200px; ....... }
#player.loading {position:fixed; top:0; left:0; width:1px;height:1px; overflow:hidden; }

在 window.onPlayerReady 回调中，我从对象中删除了“正在加载”类，例如（使用 jQuery）：

$j('#player').removeClass('loading').prop({width:'',height:''}).css({width:'',height:''});

我还删除了 API 添加到对象的宽度和高度，以便能够设置宽度 css 的样式。

注意：我创建了宽度和高度为 1px 的 YT.Player 类。

而已。

于 2012-12-24T00:41:12.297 回答