Question

以铬，狐狸和iE打开时，下面的小提琴工作正常

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

当我从小提琴中复制代码并在我的机器中使用它时，它无法正常工作我收到错误，因为o.loadVideoById不是一个函数。为什么会这样？我做错了什么？

我使用的代码如下（与小提琴相同）

 <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>

Answer 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回调中的

我从对象中删除'loading'类，例如（使用jQuery）：

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

此外，我删除API添加到对象的宽度和高度，以便能够为它设置宽度css。

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

就是这样。

loadByvideoId不是一个函数

1 个答案: