SQLの窓

2014年06月26日


jQuery/JavaScript : YouTube Player API を使って複数動画をループさせる

8秒と12秒の繰り返しです
ローディング中です

YouTube JavaScript Player API リファレンス 

クロムレス プレーヤーですが、コントロールを自分で作る必要があるのが難点です

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/apiplayer?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("ci5tOkmr-xo", 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'>

ノーマルバージョン
<pre>
<strong>8秒と12秒の繰り返しです</strong>
</pre>

<!--Google から swfobject を使う-->
<script
	src="http://www.google.com/jsapi"
	type="text/javascript"
	charset="utf-8"
></script>
<script type="text/javascript">
// Google から swfobject をロードする
google.load("swfobject", "2.1"); 
</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 イベントで
// オブジェクトを区別する為の文字列
// key=dev_key で、コントロール類自作モード( 但しムービ入れ替え可 )
swfobject.embedSWF(
	"http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer", 
	"ytapiplayer", "425", "356", "8", null, null, params, atts
);

// プレイヤーが使えるようになると呼び出される
function onYouTubePlayerReady(playerId) {
	this_player = document.getElementById("object_id");
	// 初回サムネイル
	this_player.cueVideoById("ci5tOkmr-xo");
	// 終了イベントを知る為のイベント登録
	this_player.addEventListener("onStateChange", "onytplayerStateChange");
	document.getElementById("start_btn").disabled = false;
	document.getElementById("end_btn").disabled = false;
	document.getElementById("mess").style.display = "none";
}
var flg = 0;
function onytplayerStateChange(newState) {
	if ( newState == 0 ) {
		this_player = document.getElementById("object_id");
		// 次のムービー
		if ( flg % 2 == 0 ) {
			this_player.loadVideoById("ci5tOkmr-xo", 0);
		}
		if ( flg % 2 == 1 ) {
			this_player.loadVideoById("_Hb_PPGDBLc", 0);
		}
		flg++;
	}
}
</script>
<br>
<INPUT id=start_btn disabled type="button" value="複数動画ループ開始"
onClick='player=document.getElementById("object_id");player.loadVideoById("_Hb_PPGDBLc", 0);'
><INPUT id=end_btn disabled type="button" value="複数動画ループ終了"
onClick='player=document.getElementById("object_id");player.stopVideo();'
>

関連する記事

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


【APIの最新記事】
posted by lightbox at 2014-06-26 09:21 | API | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり