SQLの窓 イラストAC フリー素材

2014年06月26日

複数の YouTube の動画を JavaScript Player API を使って連続再生する( 一般プレーヤー )

YouTube JavaScript Player API リファレンス には、一般プレーヤーと、クロムレス プレーヤーがあります、ドキュメントの説明は特にその差を気にしないで読むといいと思います。

※ クロムレス プレーヤーはコントロールを全て自分で作る必要があります。
※ 厳密にはプレイヤー内でたまにエラーが発生する事があります

1) onYouTubePlayerReady というコールバック関数を実装する必要があります。
2) プレーヤーの読み込みが完了し、API で呼び出しを受け取ることができるようになると、
  API はこの関数を呼び出します。
3) function onYouTubePlayerReady(playerid) と定義する事によって、URL
  引数で playerapiid がプレーヤーに渡されている場合、この関数にも
  渡されます。

4) onStateChange は、プレーヤーの状態が変わると起動します。値には、
  未開始(-1)
  終了(0)
  再生中(1)
  一時停止中(2)
  バッファリング中(3)
  頭出し済み(5)
  があります。SWF を初めて読み込んだときは、未開始(-1)イベントが
  ブロードキャストされます。動画の頭出しをして再生の準備が整ったら、
  頭出し済みイベント(5)がブロードキャストされます。

8秒と9秒の繰り返しです

ローディング中です

クロムレス プレーヤーのソースコードは logcalerror まで。

jQuery+通常プレーヤー
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

<!--埋め込み場所-->
<span id="mess">ローディング中です</span>
<div style='width:425px;height:356px;background-color:#E0E0E0;'>
<div id="ytapiplayer"></div>
</div>

<script type="text/javascript">
// JavaScript から SWF へアクセスする為に必要
var params = { allowScriptAccess: "always" };
// OBJECT 用の ID
var atts = { id: "object_id" };
// 埋め込み
// enablejsapi=1 で、JavaScript からアクセス
// playerapiid=ytplayer は、onYouTubePlayerReady イベントで
// オブジェクトを区別する為の文字列
swfobject.embedSWF(
	"http://www.youtube.com/v/_Hb_PPGDBLc?enablejsapi=1&playerapiid=ytplayer", 
	"ytapiplayer", "425", "356", "8", null, null, params, atts
);

// プレイヤーが使えるようになると呼び出される
function onYouTubePlayerReady(playerId) {
	this_player = $("#object_id")[0];
	// 初回サムネイル
	this_player.cueVideoById("ci5tOkmr-xo");
	// 終了イベントを知る為のイベント登録
	this_player.addEventListener("onStateChange", "onytplayerStateChange");

	$("#start_btn")
		.attr("type","button")
		.val("複数動画ループ開始")
		.click(function(){
			$("#object_id")[0].loadVideoById("_Hb_PPGDBLc", 0);
		})
		.show();

	$("#end_btn")
		.attr("type","button")
		.val("複数動画ループ終了")
		.click(function(){
			$("#object_id")[0].stopVideo();
		})
		.show();


	$("#mess").hide();
}
var flg = 0;
function onytplayerStateChange(newState) {
	if ( newState == 0 ) {
		// 次のムービー
		if ( flg % 2 == 0 ) {
			$("#object_id")[0].loadVideoById("TFwr7egMyu8", 0);
		}
		if ( flg % 2 == 1 ) {
			$("#object_id")[0].loadVideoById("_Hb_PPGDBLc", 0);
		}
		flg++;
	}
}
</script>
<br>
<input id="start_btn" style='display:none'>
<input id="end_btn" style='display:none'>




【JavaScriptの最新記事】
posted by at 2014-06-26 14:16 | Comment(0) | JavaScript | このブログの読者になる | 更新情報をチェックする
SQLの窓全体の検索
Custom Search
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX