2

YouTubeビデオが最後に達したら、イベントを発生させようとしています。ビデオの埋め込みは機能しますが、ビデオが終了すると何も起こりません。EventListener に何か足りないと思います...

これは私のコードです:

var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };

var video = swfobject.embedSWF("http://www.youtube.com/v/elvOZm0d4H0?enablejsapi=1&playerapiid=ytplayer&version=3&rel=0&autoplay=1&controls=1","ytapiplayer", "450", "250", "8", null, null, params, atts);

XXXXX.addEventListener("onStateChange", function(state){
    if(state === 0){
        alert("Stack Overflow rocks!");
    }
});

私が得られないのは、何を聞くべきかということです。コードで「XXXXX」とマークされていますが、そこには何を入力する必要がありますか? myytplayer、video、ytplayer、ytapiplayer を試しましたが、ほとんどの場合、「ytplayer が見つかりません」などのエラーが表示されます。「ytapiplayer」はエラーをスローしませんでしたが、ビデオの再生が終了しても何も起こりません。

スタックオーバーフローを検索しましたが、これまでに見つけたすべての「答え」は、このイベントリスナーに名前を付けているだけで、「XXXXX」に何を入れなければならないかについては説明していません。

私はこれにかなり慣れていないので、どんな助けも大歓迎です、ありがとう!

JSFIDDLE: http://jsfiddle.net/T5HBZ/

編集: コントロールのコードを編集し、jsfiddle を追加しました

4

1 に答える 1

3

これがあなたの作業コードです。次に説明します。

var params = {
    allowScriptAccess: "always"
};
var atts = {
    id: "myytplayer"
};

var video = swfobject.embedSWF("http://www.youtube.com/v/elvOZm0d4H0?enablejsapi=1&playerapiid=ytplayer&version=3&rel=0&autoplay=1&controls=1", "ytapiplayer", "450", "250", "8", null, null, params, atts);

onYouTubePlayerReady = function (playerId) {
    ytplayer = document.getElementById("myytplayer");
    ytplayer.addEventListener("onStateChange", "onPlayerStateChange");
};

onPlayerStateChange = function (state) {
    if (state === 0) {
        alert("Stack Overflow rocks!");
    }
};

まず、swfobject を使用してプレーヤ SWF を埋め込む場合、参照する div を swfobject によって生成されたものに置き換えるようライブラリに指示していることに注意してください。したがって、ytapiplayer div は存在しなくなりますが、「myytplayer」という ID を持つ要素が存在します。「enablejsapi=1」を swf URL に追加すると、swf はビデオをロードし、JavaScript をロードしてビデオを制御できるようにすることに注意してください。

これが重要です。その JavaScript の読み込みが完了すると、「onYouTubePlayerReady」という名前の関数が自動的に呼び出されます。これは YouTube から読み込まれた JavaScript の一部であるため、この名前を変更する方法はありません。その関数を定義しないと、何も起こりません。ただし、その関数を定義すると、プレーヤーとの対話を開始する機会が得られます。

したがって、コードに欠けていたのはその関数の定義であり、swfobject によって作成された要素にイベント リスナーを直接追加します (この関数内で実行する必要があります。コールバックの外で実行しようとすると、オブジェクトがまだ存在していない可能性があります)。

また、なんらかの理由で、イベント リスナーが実際の関数を (匿名関数ではなく) コールバックとして参照する方が一貫して機能するように思われるため、コードでも同様に確認できます。

もちろん、SWF/Javascript API の代わりに iFrame プレーヤー API を使用することで、はるかに優れたサービスが提供される可能性があることを指摘することで、このすべての議論に取って代わることができます。情報はここにあります：

https://developers.google.com/youtube/iframe_api_reference

これは同様の方法論であり、JavaScript ライブラリをロードすると、定義したコールバックが自動的に呼び出され、その中でプレイヤーへのバインディングを設定したり、イベント リスナーを追加したりします。本当の利点は、 HTML5 または Flash プレーヤーを自動的に提供し、API を使用していずれかのプレーヤーと通信できるようにします。

于 2013-08-23T17:53:35.903 に答える