1

私は一連の youtube と soundcloud の埋め込みを含む音楽ブログを持っています。

ページ上のすべての埋め込みコンテンツを次々と自動的に再生したいと考えています。言い換えれば、私が再生した youtube 埋め込みが終了した後、soundcloud または youtube からの次の埋め込みの再生を開始したいと思います。

レンダリングされた HTML は次のようになります。

<span class="soundcloud_embed" id="soundcloud_post_308">
  <iframe id="ui-id-1" width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F103518792&show_artwork=true&secret_token=s-LnOTK"></iframe>
</span>

<span class="youtube_embed" id="youtube_post_309">
  <iframe id="ui-id-2" width="528" height="190" src="//www.youtube.com/embed/Y3CYKXBEtf0" frameborder="0" allowfullscreen></iframe>
</span>

<span class="youtube_embed" id="youtube_post_310">
  <iframe id="ui-id-3" width="528" height="190" src="//www.youtube.com/embed/yMx1FnkrhYc" frameborder="0" allowfullscreen></iframe>
</span>

この情報源から受け取ったヘルプを構築する: Soundcloud 埋め込みの再生時に Youtube 埋め込みを一時停止する

どのプレイヤーがページにいるか、どの API に属しているか、どのプレイヤーが現在プレイしているかを追跡するには:

var playerCurrentlyPlaying = {"api":null,"frameID":null};
var players = {"yt":{},"sc":{}};

playerCurrentlyPlaying が終了したときに呼び出される汎用の playNext 関数を定義する必要があります。次の埋め込みの API に応じて、playNext 関数は適切な再生コマンドを実行する必要があります。次の埋め込みを見つけるために、関数はおそらく、現在再生中の iframe の ID を 1 増やします。たとえば、id="ui-id-2" がちょうど終了した場合、id="ui-id-3" が再生されます。 .

これらの YouTube ビデオがクラッシュし、「ビデオはもう存在しません」または「アップローダーにより、お住まいの国では利用できなくなりました」などのメッセージが表示されることがあります。このような場合、どうすればクラッシュをチェックし、次の増分 ID (例: id="ui-id-4") にスキップできますか?

このビデオはもう存在しません:

<span class="youtube_embed" id="youtube_post_311">
  <iframe id="ui-id-4" width="528" height="190" src="//www.youtube.com/embed/Ym3DgqNTzyc" frameborder="0" allowfullscreen></iframe>
</span>
4

1 に答える 1

5

2 つの質問が 1 つにまとめられています。私はそれらの両方に対処しようとします。

次のプレーヤーを自動再生させるには、2 つの小さな手順を実行する必要があります。1 つ目は、プレーヤー オブジェクトを、メディアの再生が完了したことを知らせる API のそれぞれのイベントにバインドすることです。YouTube の場合、イベント リスナーは次のようになります。

 onYTPlayerStateChange = function (event) {
     if (event.data == YT.PlayerState.PLAYING) {
         onYTPlay(event.target.a.id);
     }
     else if (event.data == YT.PlayerState.ENDED) {
          playNextPlayer();
     }
 };

playNextPlayer()あなたが定義する必要があると言ったこの一般的な関数はどこにありますか。Soundcloud 埋め込みの場合、イベント バインディングは次のようになります。

(function () {
     $(".soundcloud_embed iframe").each(function () {
         var frameid = $(this).attr('id');
         players["sc"][frameid] = {};
         players["sc"][frameid] = {
             "widget": SC.Widget(document.getElementById(frameid)),
                 "firstplay": true
         };
         players["sc"][frameid]["widget"].bind(SC.Widget.Events.READY, function () {
             players["sc"][frameid]["widget"].bind(SC.Widget.Events.PLAY, function () {
                 onSCPlay(frameid, SC.Widget.Events.PLAY);
             });
             players["sc"][frameid]["widget"].bind(SC.Widget.Events.PLAY_PROGRESS, function () {
                 onSCPlay(frameid, SC.Widget.Events.PLAY_PROGRESS);
             });
             players["sc"][frameid]["widget"].bind(SC.Widget.Events.FINISH, function () {
                playNextPlayer();
             });
         });
     });
 }());

これらのバインディングを配置したら、playNextPlayer関数は次のプレーヤーが何であるか、どの API から来たかを判断し、その API の play 呼び出しを実行する必要があります。このようなもの：

 playNextPlayer = function() {
  var nextIdNum=parseInt(playerCurrentlyPlaying["frameID"].split("-").pop())+1;
  nextFrameId="ui-id-"+nextIdNum;
     switch($("#"+nextFrameId).parent().attr('class')) {
         case "youtube_embed":
             api="yt";
             players[api][nextFrameId].playVideo();
             break;
         case "soundcloud_embed":
             api="sc";
             players[api][nextFrameId]["widget"].play();
             break;
     }
     playerCurrentlyPlaying["api"]=api;
     playerCurrentlyPlaying["frameID"]=nextFrameId;
 };

このサンプル コードにはエラー処理が組み込まれていないことに注意してください。たとえば、ID が連続していない場合や、再生する iframe がなくなった場合にどうするかを処理するために、いくつかを記述する必要があります。

2 番目の質問については、ビデオが再生可能かどうかを判断するには、いくつかのエラー イベント リスナーと再生イベント リスナーを設定する必要があります。

function onYouTubeIframeAPIReady() {
     $(".youtube_embed iframe").each(function () {
         players["yt"][$(this).attr('id')] = new YT.Player($(this).attr('id'), {
             events: {
                 'onError': seeError,
                 'onStateChange': onYTPlayerStateChange
             }
         });
     });
 }

このseeError関数は、どのプレーヤーがエラーをスローしたかを特定する方法で定義でき (状態変更イベント リスナーで行われる方法と同様の方法で event.target.a.id パラメーターを使用)、同じものを利用します。ジェネリックplayNextPlayer関数。Youtube ビデオがそのように存在しない場合、「PLAYING」イベントは生成されないことに注意してください。そのため、エラー リスナーにも適切な playerCurrentlyPlaying 値を設定する必要があります。その後、適切に進みます。

YouTube プレーヤーは、動画が存在しないかどうか、特定の国で再生できないかどうかなどに基づいて、さまざまな種類のエラーをスローすることになっています。こちらを参照してください: https://developers.google.com/youtube/js_api_reference 「onError」セクションの下の#Eventsで、これらのさまざまなコードがどうあるべきかを確認できます。「想定されている」と言ったのは、現在、すべての「再生できない」エラーに対してコード 0 をスローしているように見えるためです。

これは、上記のすべてを実行する機能するフィドルです (soundcloud と youtube iframe の ID を切り替えて、進行が双方向で機能することを確認できます)。このフィドルも onError リスナーをインスタンス化しますが、それが何をするかは定義していません。ただし、それを機能させるのは難しくありません。

http://jsfiddle.net/jlmcdonald/NqRqm/8/

于 2013-08-20T07:08:39.653 に答える