0

クロム、フォックス、および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>
4

1 に答える 1

1

そもそも、loadByvideoIdではなくloadVideoByIdです。しかし、それはタイプミスだと思います。

ここでも同じ問題がありましたが、私自身のコードでした。問題は、何らかの理由で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を使用して）オブジェクトから「loading」クラスを削除します。

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

また、APIによってオブジェクトに追加された幅と高さを削除して、幅cssのスタイルを設定できるようにします。

注意：幅と高さが1pxのYT.Playerクラスを作成しました。

それでおしまい。

于 2012-12-24T00:41:12.297 に答える