YouTubeAPIYouTube JavaScript Player API
- 動画の埋め込み
- クロムレスプレーヤー
- 再生の制御〔再生、一時停止、停止、シーク位置〕
- 音量の制御〔ミュートの設定・解除、ミュート状態取得、音量の設定・取得〕
- 再生ステータスの取得〔経過時間、プレーヤーの状態、読み込みバイト数など〕
- 再生画質の制御〔画質の取得・変更、有効な画質セットの取得〕
- 動画情報の取得〔現在の動画の長さ、URL、埋め込みコードを取得〕
- イベント〔プレーヤーの状態が変わった時、画質が変わった時、エラー時に発生〕
- プレーヤーのリサイズ〔プレーヤーのサイズを変更〕
- 動画の切り替え
- 複数プレーヤーの配置
動画の埋め込み
2011/1/10
YouTube JavaScript Player API リファレンス
YouTube JavaScript APIを使用すると、YouTube埋め込み動画プレーヤーの再生や音量などのコントロールや関数を使用してプレーヤーの動作を制御することができます。
YouTube JavaScript APIはFlashPlayer8以降に対応しています。 そのため、YouTube動画プレーヤーをWebページに埋め込む場合のに、 閲覧者のパソコンにインストールされているFlashPlayerのバージョンが指定したバージョンより古いかどうかを検出できる「SWFObject」の使用が公式サイトのリファレンスでも推奨されています。
サンプルではSWFObject v2.2を使用して、YouTube動画をWebページに埋め込んでみました。 YouTube JavaScript APIを有効にするには、第1引数に指定する動画のURLに「enablejsapi=1」し、プレーヤーを関数から制御するために、埋め込みオブジェクトID「playerapiid=ytplayer」を付加します。 ドメインまたぎを許可するためにFlashVarsに「allowScriptAccess=true」を指定します。
http://www.youtube.com/v/動画ID?enablejsapi=1&playerapiid=埋め込みオブジェクトID
▼head要素内
※青：埋め込みオブジェクトID、赤：埋め込みオブジェクトID、紫：出力先の要素ID <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'></script> <script type='text/javascript'> var flashvars = { }; var params = { allowScriptAccess:'always' }; var attributes = { id:'myytplayer' }; swfobject.embedSWF( 'http://www.youtube.com/v/9YEEl52u8XE?enablejsapi=1&playerapiid=ytplayer', 'ytapiplayer', '560', '340', '8.0.0', /* Flash Player8 以降を指定 */ 'lib/swfobject/expressInstall.swf', flashvars, params, attributes ); $(function(){ /* 再生/一時停止 */ $('#btn_play').toggle(function(){ if(ytplayer) ytplayer.playVideo(); },function(){ if(ytplayer) ytplayer.pauseVideo(); }); /* 停止 */ $('#btn_stop').click(function(){ if(ytplayer) ytplayer.stopVideo(); }); }); /* プレーヤーの準備ができると呼ばれる関数 */ function onYouTubePlayerReady(playerId) { ytplayer = document.getElementById('myytplayer'); } </script>
▼body要素内
<div id='ytapiplayer'></div>
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
</head>
<body>
<!-- CODE -->
<div id="ytapiplayer">
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var ytplayer;
var flashvars = { };
var params = { allowScriptAccess:"always" };
var attributes = { id:"myytplayer" };
swfobject.embedSWF(
"http://www.youtube.com/v/9YEEl52u8XE?enablejsapi=1&playerapiid=ytplayer",
"ytapiplayer",
"560",
"340",
"8.0.0", /* Flash Player8 以降を指定 */
"",
flashvars,
params,
attributes
);
/* プレーヤーの準備ができると呼ばれる関数 */
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
}
</script>
<!-- CSS -->
<style type="text/css">
img { vertical-align:middle; }
</style>
<!-- / CODE -->
</body>
</html>
クロムレスプレーヤー
2011/1/10
クロムレスにすると、YouTube動画プレーヤーを自由にカスタマイズすることができます。 クロムレスプレーヤーでは、再生ボタンなどのコントローラーが表示されなくなります。
動画タイプをクロムレスにするには、動画URLの引数に「version=3」を付加します。 動画IDは「埋め込みオブジェクト.cueVideoById(動画ID)」で プレーヤーの準備ができると呼ばれる関数「onYouTubePlayerReady」内に指定します。
/* プレーヤーの準備ができると呼ばれる関数 */
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.cueVideoById("9YEEl52u8XE"); /* 動画ID */
}
サンプルではSWFObject v2.2を使用して、YouTube動画をクロムレスプレーヤーで表示してみました。 YouTube JavaScript APIを有効にするには、第1引数に指定する動画のURLに「enablejsapi=1」し、プレーヤーを関数から制御するために、埋め込みオブジェクトID「playerapiid=ytplayer」を付加します。 ドメインまたぎを許可するためにFlashVarsに「allowScriptAccess=true」を指定します。
http://www.youtube.com/apiplayer?enablejsapi=1&version=3&playerapiid=ytplayer
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var flashvars = { };
var params = { allowScriptAccess:"always" };
var attributes = { id:"myytplayer" };
swfobject.embedSWF(
"http://www.youtube.com/apiplayer?enablejsapi=1&version=3&playerapiid=ytplayer",
"ytapiplayer",
"560",
"340",
"8.0.0", /* Flash Player8 以降を指定 */
"/content/lib/swfobject/expressInstall.swf",
flashvars,
params,
attributes
);
$(function(){
/* 再生/一時停止 */
$("#btn_play").toggle(function(){
if(ytplayer) ytplayer.playVideo();
},function(){
if(ytplayer) ytplayer.pauseVideo();
});
/* 停止 */
$("#btn_stop").click(function(){
if(ytplayer) ytplayer.stopVideo();
});
});
/* プレーヤーの準備ができると呼ばれる関数 */
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.cueVideoById("9YEEl52u8XE");
}
</script>
<!-- CSS -->
<style type="text/css">
img { vertical-align:middle; }
</style>
</head>
<body>
<h1>設置サンプル</h1>
<h2>FlashのWeb埋め込みライブラリ「SWFObject」を使用したYouTube動画プレーヤーの埋め込み（クロムレスプレーヤー）</h2>
<!-- CODE -->
<div id="ytapiplayer">
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
<p>
<a href="#" id="btn_play"><img src="/content/img/strm/key_play_pause.png" alt="再生/一時停止" /></a>
<a href="#" id="btn_stop"><img src="/content/img/strm/key_stop.png" alt="停止" /></a>
</p>
<!-- / CODE -->
</body>
</html>
再生の制御
再生、一時停止、停止、シーク位置
2011/1/10
下記のキュー関数を使用することで、YouTubeの埋め込みプレーヤーの再生、一時停止、停止、シーク位置を制御することができます。
※player＝埋め込みオブジェクトID
| 関数 | 説明 |
|---|---|
| player.playVideo():Void | 動画を再生する。停止ボタンを押した後の場合は、頭出し。一時停止ボタンを押した後の場合は、停止した位置から再生。 |
| player.pauseVideo():Void | 再生中の動画を一時停止する。 |
| player.stopVideo():Void | 再生中の動画を停止する。動画の読み込みもキャンセルする。 |
| player.seekTo(seconds:Number, allowSeekAhead:Boolean):Void | 指定された時間（秒数）まで動画のフレームを進める。第2引数には、現在読み込んでいる動画の長さをsecondsの値が超えている場合にプレーヤーからサーバーに新しいリクエストを行うかどうかを指定。 |
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var flashvars = { };
var params = { allowScriptAccess:"always" };
var attributes = { id:"myytplayer" };
swfobject.embedSWF(
"http://www.youtube.com/apiplayer?enablejsapi=1&version=3&playerapiid=ytplayer",
"ytapiplayer",
"560",
"340",
"8.0.0", /* Flash Player8 以降を指定 */
"/content/lib/swfobject/expressInstall.swf",
flashvars,
params,
attributes
);
$(function(){
/* 再生/一時停止 */
$("#btn_play").toggle(function(){
if(ytplayer) ytplayer.playVideo();
},function(){
if(ytplayer) ytplayer.pauseVideo();
});
/* 停止 */
$("#btn_stop").click(function(){
if(ytplayer) ytplayer.stopVideo();
});
/* シーク位置 */
$("#btn_seek").click(function(){
var num=($("#seek").val()) ? $("#seek").val() : 0;
if(ytplayer){
ytplayer.seekTo(num,true);
}
});
});
/* プレーヤーの準備ができると呼ばれる関数 */
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.cueVideoById("GILIk8W00s4");
}
</script>
<!-- CSS -->
<style type="text/css">
img { vertical-align:middle; }
</style>
</head>
<body>
<h1>設置サンプル</h1>
<h2>FlashのWeb埋め込みライブラリ「SWFObject」を使用したYouTube動画プレーヤーの埋め込み（クロムレスプレーヤー）</h2>
<p>YouTube JavaScript APIを使用して、再生、一時停止、停止、シーク位置を制御するサンプル。</p>
<!-- CODE -->
<div id="ytapiplayer">
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
<p>
<a href="#" id="btn_play"><img src="/content/img/strm/key_play_pause.png" alt="再生/一時停止" /></a>
<a href="#" id="btn_stop"><img src="/content/img/strm/key_stop.png" alt="停止" /></a>
</p>
<p>
シーク位置：
<select id="seek">
<option value="0">0</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="60">60</option>
</select>
<a href="#" id="btn_seek">移動</a>
</p>
<!-- / CODE -->
</body>
</html>
音量の制御
ミュートの設定・解除、ミュート状態取得、音量の設定・取得
2011/1/10
下記の関数を使用することで、YouTubeの埋め込みプレーヤーの音声調節（ミュートの設定・解除、ミュート状態取得、音量の設定・取得を行うことができます。
※player＝埋め込みオブジェクトID
| 関数 | 説明 |
|---|---|
| player.mute():Void | ミュートを設定。 |
| player.unMute():Void | ミュートを解除。 |
| player.isMuted():Boolean | ミュートになっているかどうかを返す。ミュートになっている場合はtrue、そうでない場合はfalseが返る。 |
| player.setVolume(volume:Number):Void | 音量を設定。指定可能な値は0～100の整数値。 |
| player.getVolume():Number | 現在の音量を整数値（0～100）で取得。 |
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var flashvars = { };
var params = { allowScriptAccess:"always" };
var attributes = { id:"myytplayer" };
swfobject.embedSWF(
"http://www.youtube.com/apiplayer?enablejsapi=1&version=3&playerapiid=ytplayer",
"ytapiplayer",
"560",
"340",
"8.0.0", /* Flash Player8 以降を指定 */
"/content/lib/swfobject/expressInstall.swf",
flashvars,
params,
attributes
);
$(function(){
/* ミュート/ミュート解除 */
$("#btn_mute").toggle(function(){
if(ytplayer){
ytplayer.mute();
$(this).find("img").attr("src","/content/img/strm/key_mute.png");
$("#mutestatus").html(isMute());
}
},function(){
if(ytplayer){
ytplayer.unMute();
$(this).find("img").attr("src","/content/img/strm/key_unmute.png");
$("#mutestatus").html(isMute());
}
});
/* 音量変更 */
$("#volume").change(function(){
var num=($(this).val()) ? $(this).val() : 0;
if(ytplayer){
ytplayer.setVolume(num);
$("#volumestatus").html("現在の音量は「"+ytplayer.getVolume()+"」です");
if(ytplayer.getVolume()>0){
$("#btn_mute").find("img").attr("src","/content/img/strm/key_unmute.png");
}else{
$("#btn_mute").find("img").attr("src","/content/img/strm/key_mute.png");
}
}
});
var opt="selected='selected'";
for(var i=0; i<=100; i+=10){
$("#volume").append("<option value='"+i+"'"+((i==20) ? opt : "")+">"+i+"</option>");
}
});
function isMute(){
if(ytplayer){
if(ytplayer.isMuted()){
return "ミュートON ";
}else{
return "ミュートOFF";
}
}
}
/* プレーヤーの準備ができると呼ばれる関数 */
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.cueVideoById("GILIk8W00s4");
ytplayer.setVolume("20");
}
</script>
<!-- CSS -->
<style type="text/css">
img { vertical-align:middle; }
</style>
</head>
<body>
<body>
<h1>設置サンプル</h1>
<h2>FlashのWeb埋め込みライブラリ「SWFObject」を使用したYouTube動画プレーヤーの埋め込み（クロムレスプレーヤー）</h2>
<p>YouTube JavaScript APIを使用して、プレーヤーの音量を制御するサンプル。</p>
<!-- CODE -->
<div id="ytapiplayer">
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
<p>
<a href="#" id="btn_mute"><img src="/content/img/strm/key_unmute.png" alt="ミュート" /></a>
<span id="mutestatus">ミュートOFF</span>
音量変更：<select id="volume"></select>
<span id="volumestatus"></span>
</p>
<!-- / CODE -->
</body>
</html>
再生ステータスの取得
経過時間、プレーヤーの状態、読み込みバイト数など
2011/1/10
下記の関数を使用することで、経過時間、プレーヤーの状態や読み込みバイト数など、YouTubeの埋め込みプレーヤーの再生ステータスを取得することができます。
※player＝埋め込みオブジェクトID
| 関数 | 説明 |
|---|---|
| player.getVideoBytesLoaded():Number | 現在の動画ファイルの読み込み済のバイト数を返す。 |
| player.getVideoBytesTotal():Number | 読み込み済または再生中の動画ファイルのサイズをバイト数で返す。 |
| player.getVideoStartBytes():Number | 動画ファイルの読み込みを開始した位置をバイト数で返す。 |
| player.getPlayerState():Number | プレーヤーの状態を未開始（-1）、終了（0）、再生中（1）、一時停止中（2）、バッファリング中（3）、頭しだし済（5）のいずれかの数値で返す。 |
| player.getCurrentTime():Number | 動画再生開始からの経過時間を秒数で返す。 |
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var flashvars = { };
var params = { allowScriptAccess:"always" };
var attributes = { id:"myytplayer" };
swfobject.embedSWF(
"http://www.youtube.com/apiplayer?enablejsapi=1&version=3&playerapiid=ytplayer",
"ytapiplayer",
"560",
"340",
"8.0.0", /* Flash Player8 以降を指定 */
"/content/lib/swfobject/expressInstall.swf",
flashvars,
params,
attributes
);
$(function(){
timerID = setInterval("getStatus()", 1);
/* 再生/一時停止 */
$("#btn_play").toggle(function(){
if(ytplayer) ytplayer.playVideo();
},function(){
if(ytplayer) ytplayer.pauseVideo();
return false;
});
/* 停止 */
$("#btn_stop").click(function(){
if(ytplayer) ytplayer.stopVideo();
return false;
});
/* シーク位置 */
$("#btn_seek").click(function(){
var num=($("#seek").val()) ? $("#seek").val() : 0;
if(ytplayer){
ytplayer.seekTo(num,true);
return false;
}
});
});
/* プレーヤーの準備ができると呼ばれる関数 */
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.cueVideoById("GILIk8W00s4");
}
function getStatus(){
var loadedbytes="現在の動画の読み込み済みバイト数:"+ytplayer.getVideoBytesLoaded()+"bytes<br>";
var totalbytes="読み込み済みまたは再生中の動画のサイズ:"+ytplayer.getVideoBytesTotal()+"bytes<br>";
var startbytes="動画ファイルの読み込みを開始した位置:"+ytplayer.getVideoStartBytes()+"bytes<br>";
var tmp=ytplayer.getPlayerState();
if(tmp==-1){
tmpstr="未開始";
}else if(tmp==0){
tmpstr="終了";
}else if(tmp==1){
tmpstr="再生中";
}else if(tmp==2){
tmpstr="一時停止";
}else if(tmp==3){
tmpstr="バッファリング中";
}else if(tmp=-5){
tmpstr="頭出し済";
}
var playerstatus="プレーヤーの状態:"+tmpstr+"<br>";
var curtime="動画の再生を開始してからの経過時間:"+ytplayer.getCurrentTime()+"秒";
if(ytplayer){
$("#status").html(loadedbytes+totalbytes+startbytes+playerstatus+curtime);
}
}
</script>
<!-- CSS -->
<style type="text/css">
img { vertical-align:middle; }
</style>
</head>
<body>
<h1>設置サンプル</h1>
<h2>FlashのWeb埋め込みライブラリ「SWFObject」を使用したYouTube動画プレーヤーの埋め込み（クロムレスプレーヤー）</h2>
<p>YouTube JavaScript APIを使用して、プレーヤーの再生ステータスを取得するサンプル。</p>
<!-- CODE -->
<div id="ytapiplayer">
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
<p>
<a href="#" id="btn_play"><img src="/content/img/strm/key_play_pause.png" alt="再生/一時停止" /></a>
<a href="#" id="btn_stop"><img src="/content/img/strm/key_stop.png" alt="停止" /></a>
シーク位置：
<select id="seek">
<option value="0">0</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="60">60</option>
</select>
<a href="#" id="btn_seek">移動</a>
</p>
<div id="status"></div>
<!-- / CODE -->
</body>
</html>
再生画質の制御
画質の取得・変更、有効な画質セットの取得
2011/1/10
下記の関数を使用することで、YouTubeプレーヤーで再生中の動画の品質を取得することができます。
※player＝埋め込みオブジェクトID
| 関数 | 説明 | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| player.getPlaybackQuality():String | 現在の動画の画質を取得し、hd720、largemedium、smallのいずれかを返す。現在の動画がない場合は「undefined」を返す。 | ||||||||||
| player.setPlaybackQuality (suggestedQuality:String):Void | 現在の動画の推奨画質を設定し、現在の位置から新しい画質で動画を再読み込みする。再生画質を変更した場合は再生中の動画の画質のみが変更される。指定可能な値は、small、medium、large、hd720、defaultのいずれか。
| ||||||||||
| player.getAvailableQualityLevels():Array | 現在の動画で有効な画質のセットを返す。 |
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var flashvars = { };
var params = { allowScriptAccess:"always" };
var attributes = { id:"myytplayer" };
swfobject.embedSWF(
"http://www.youtube.com/apiplayer?enablejsapi=1&version=3&playerapiid=ytplayer",
"ytapiplayer",
"560",
"340",
"8.0.0", /* Flash Player8 以降を指定 */
"/content/lib/swfobject/expressInstall.swf",
flashvars,
params,
attributes
);
$(function(){
timerID = setInterval("getStatus()", 1);
/* 再生/一時停止 */
$("#btn_play").toggle(function(){
if(ytplayer) ytplayer.playVideo();
return false;
},function(){
if(ytplayer) ytplayer.pauseVideo();
return false;
});
/* 停止 */
$("#btn_stop").click(function(){
if(ytplayer) ytplayer.stopVideo();
return false;
});
/* 画質切り替え */
$("#available").change(function(){
var str=($("#available").val()) ? $("#available").val() : 0;
if(ytplayer){
ytplayer.setPlaybackQuality(str);
return false;
}
});
});
/* プレーヤーの準備ができると呼ばれる関数 */
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.cueVideoById("GILIk8W00s4");
timerID=setInterval("getStatus()",1);
}
function getStatus(){
getQualitySet();
$("#status").html("現在の動画の画質:"+ytplayer.getPlaybackQuality());
}
function getQualitySet(){
if($("#available").html()==""){
var tmp=ytplayer.getAvailableQualityLevels();
$("#available").html("");
for(var i=0; i<tmp.length; i++){
if(tmp[i]!=""){
var opt=(tmp[i]==ytplayer.getPlaybackQuality()) ? " selected='selected'" : "";
$("#available").append("<option value='"+tmp[i]+"'"+opt+">"+tmp[i]+"</option>");
}
}
}
}
</script>
<!-- CSS -->
<style type="text/css">
img { vertical-align:middle; }
</style>
</head>
<body>
<h1>設置サンプル</h1>
<h2>FlashのWeb埋め込みライブラリ「SWFObject」を使用したYouTube動画プレーヤーの埋め込み（クロムレスプレーヤー）</h2>
<p>YouTube JavaScript APIを使用して、現在再生中の動画の画質を取得・変更するサンプル。</p>
<!-- CODE -->
<div id="ytapiplayer">
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
<p>
<a href="#" id="btn_play"><img src="/content/img/strm/key_play_pause.png" alt="再生/一時停止" /></a>
<a href="#" id="btn_stop"><img src="/content/img/strm/key_stop.png" alt="停止" /></a>
</p>
<div id="status"></div>
画質切り替え:<select id="available"></select> （再生後に生成）
<!-- / CODE -->
</body>
</html>
動画情報の取得
現在の動画の長さ、URL、埋め込みコードを取得
2011/1/10
下記の関数を使用することで、現在のYouTube動画の長さ、URL、埋め込みコードを取得することができます。
※player＝埋め込みオブジェクトID
| 関数 | 説明 |
|---|---|
| player.getDuration():Number | 再生中の動画の長さを秒数で返す。 |
| player.getVideoUrl():String | 読み込み済または再生中の動画のYouTube.comのURLを返す。 |
| player.getVideoEmbedCode():String | 読み込み済または再生中の動画の埋め込みコードを返す。 |
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var flashvars = { };
var params = { allowScriptAccess:"always" };
var attributes = { id:"myytplayer" };
swfobject.embedSWF(
"http://www.youtube.com/apiplayer?enablejsapi=1&version=3&playerapiid=ytplayer",
"ytapiplayer",
"560",
"340",
"8.0.0", /* Flash Player8 以降を指定 */
"/content/lib/swfobject/expressInstall.swf",
flashvars,
params,
attributes
);
$(function(){
/* 再生/一時停止 */
$("#btn_play").toggle(function(){
if(ytplayer) ytplayer.playVideo();
return false;
},function(){
if(ytplayer) ytplayer.pauseVideo();
return false;
});
/* 停止 */
$("#btn_stop").click(function(){
if(ytplayer) ytplayer.stopVideo();
return false;
});
});
/* プレーヤーの準備ができると呼ばれる関数 */
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.cueVideoById("9YEEl52u8XE");
timerID=setInterval("getStatus()",1);
var s="";
s+="動画のURL:<br><input type='text' style='width:560px;border:1px solid #ccc;' value='"+ytplayer.getVideoUrl()+"' /><br>";
s+="動画の埋め込みコード:<br><textarea style='width:560px;height:150px;border:1px solid #ccc;background:#eee;'>"+ytplayer.getVideoEmbedCode()+"</textarea>";
$("#status").append(s);
}
function getStatus(){
var s="";
s+="再生中の動画の長さ:"+ytplayer.getDuration()+"<br>";
$("#duration").html(s);
}
</script>
<!-- CSS -->
<style type="text/css">
img { vertical-align:middle; }
</style>
</head>
<body>
<h1>設置サンプル</h1>
<h2>FlashのWeb埋め込みライブラリ「SWFObject」を使用したYouTube動画プレーヤーの埋め込み（クロムレスプレーヤー）</h2>
<p>YouTube JavaScript APIを使用して、現在の動画の長さ、URL、埋め込みコードを取得するサンプル。</p>
<!-- CODE -->
<div id="ytapiplayer">
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
<p>
<a href="#" id="btn_play"><img src="/content/img/strm/key_play_pause.png" alt="再生/一時停止" /></a>
<a href="#" id="btn_stop"><img src="/content/img/strm/key_stop.png" alt="停止" /></a>
<span id="duration"></span>
</p>
<div id="status"></div>
<!-- / CODE -->
</body>
</html>
イベント
プレーヤーの状態が変わった時、画質が変わった時、エラー時に発生
2011/1/10
YouTubeプレーヤーから下記のイベントを取得することができます。
| イベント | 説明 |
|---|---|
| onStateChange | プレーヤーの状態が変わった時に発生。 |
| onPlaybackQualityChange | 動画の再生画質が変わった時に発生。。 |
| onError | プレーヤーでエラーが起こった時に発生。 |
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var flashvars = { };
var params = { allowScriptAccess:"always" };
var attributes = { id:"myytplayer" };
swfobject.embedSWF(
"http://www.youtube.com/apiplayer?enablejsapi=1&version=3&playerapiid=ytplayer",
"ytapiplayer",
"560",
"340",
"8.0.0", /* Flash Player8 以降を指定 */
"/content/lib/swfobject/expressInstall.swf",
flashvars,
params,
attributes
);
$(function(){
/* 再生/一時停止 */
$("#btn_play").toggle(function(){
if(ytplayer) ytplayer.playVideo();
},function(){
if(ytplayer) ytplayer.pauseVideo();
});
/* 停止 */
$("#btn_stop").click(function(){
if(ytplayer) ytplayer.stopVideo();
});
/* シーク位置 */
$("#btn_seek").click(function(){
var num=($("#seek").val()) ? $("#seek").val() : 0;
if(ytplayer){
ytplayer.seekTo(num,true);
}
});
/* 画質切り替え */
$("#available").change(function(){
var str=($("#available").val()) ? $("#available").val() : 0;
if(ytplayer){
ytplayer.setPlaybackQuality(str);
return false;
}
});
});
/* プレーヤーの準備ができると呼ばれる関数 */
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.cueVideoById("GILIk8W00s4");
timerID=setInterval("getQualitySet()",1);
/* イベント登録 */
ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
ytplayer.addEventListener("onPlaybackQualityChange", "onyPlaybackQualityChange");
ytplayer.addEventListener("onError", "onyError");
}
/* プレーヤーの状態が変わった時 */
function onytplayerStateChange(newState){
if(newState==-1){
tmpstr="未開始";
}else if(newState==0){
tmpstr="終了";
}else if(newState==1){
tmpstr="再生中";
}else if(newState==2){
tmpstr="一時停止";
}else if(newState==3){
tmpstr="バッファリング中";
}else if(newState=-5){
tmpstr="頭出し済";
}
$("#playerstatus").html("プレーヤーの状態:"+tmpstr);
}
/* プレーヤーの画質が変わった時 */
function onyPlaybackQualityChange(newQuality){
$("#qualitystatus").html("現在の画質:"+newQuality);
}
/* プレーヤーでエラーが発生した時 */
function onyError(error){
alert("プレーヤーでエラーが発生しました。");
}
/* 有効な画質をセット */
function getQualitySet(){
if($("#available").html()==""){
var tmp=ytplayer.getAvailableQualityLevels();
$("#available").html("");
for(var i=0; i<tmp.length; i++){
if(tmp[i]!=""){
var opt=(tmp[i]==ytplayer.getPlaybackQuality()) ? " selected='selected'" : "";
$("#available").append("<option value='"+tmp[i]+"'"+opt+">"+tmp[i]+"</option>");
}
}
}
}
</script>
<!-- CSS -->
<style type="text/css">
img { vertical-align:middle; }
</style>
</head>
<body>
<h1>設置サンプル</h1>
<h2>FlashのWeb埋め込みライブラリ「SWFObject」を使用したYouTube動画プレーヤーの埋め込み（クロムレスプレーヤー）</h2>
<p>YouTube JavaScript APIでイベントを取得するサンプル。</p>
<!-- CODE -->
<div id="ytapiplayer">
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
<p><span id="playerstatus"></span>／<span id="qualitystatus"></span></p>
<p>
<a href="#" id="btn_play"><img src="/content/img/strm/key_play_pause.png" alt="再生/一時停止" /></a>
<a href="#" id="btn_stop"><img src="/content/img/strm/key_stop.png" alt="停止" /></a>
画質切り替え:<select id="available"></select> （再生後に生成）
</p>
<!-- / CODE -->
</body>
</html>
プレーヤーのリサイズ
プレーヤーのサイズを変更
2011/1/10
YouTubeの埋め込みプレーヤーのサイズを変更します。
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var flashvars = { };
var params = { allowScriptAccess:"always" };
var attributes = { id:"myytplayer" };
swfobject.embedSWF(
"http://www.youtube.com/apiplayer?enablejsapi=1&version=3&playerapiid=ytplayer",
"ytapiplayer",
"560",
"340",
"8.0.0", /* Flash Player8 以降を指定 */
"/content/lib/swfobject/expressInstall.swf",
flashvars,
params,
attributes
);
$(function(){
/* 再生/一時停止 */
$("#btn_play").toggle(function(){
if(ytplayer) ytplayer.playVideo();
},function(){
if(ytplayer) ytplayer.pauseVideo();
});
/* 停止 */
$("#btn_stop").click(function(){
if(ytplayer) ytplayer.stopVideo();
});
$("#resize").change(function(){
var tmp=$(this).val();
var tmp_ary=tmp.split(",");
/* 現在のプレーヤーのサイズを変更 */
ytplayer.width = tmp_ary[0];
ytplayer.height = tmp_ary[1];
});
});
/* プレーヤーの準備ができると呼ばれる関数 */
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.cueVideoById("9YEEl52u8XE");
}
</script>
<!-- CSS -->
<style type="text/css">
img { vertical-align:middle; }
</style>
</head>
<body>
<h1>設置サンプル</h1>
<h2>FlashのWeb埋め込みライブラリ「SWFObject」を使用したYouTube動画プレーヤーの埋め込み（クロムレスプレーヤー）</h2>
<p>YouTube動画のプレーヤーサイズを変更します。</p>
<!-- CODE -->
<div id="ytapiplayer">
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
<p>
<a href="#" id="btn_play"><img src="/content/img/strm/key_play_pause.png" alt="再生/一時停止" /></a>
<a href="#" id="btn_stop"><img src="/content/img/strm/key_stop.png" alt="停止" /></a>
プレーヤーのサイズ変更：
<select id="resize">
<option value="480,295">小</option>
<option value="560,340" selected="selected">中</option>
<option value="640,385">大</option>
</select>
</p>
<!-- / CODE -->
</body>
</html>
動画の切り替え
2011/1/10
特定のユーザーのお気に入りに登録している動画リストを取得し、YouTube動画のプレーヤーでそれらの動画を切り替え再生します。
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var flashvars = { };
var params = { allowScriptAccess:"always" };
var attributes = { id:"myytplayer" };
swfobject.embedSWF(
"http://www.youtube.com/apiplayer?enablejsapi=1&version=3&playerapiid=ytplayer",
"ytapiplayer",
"560",
"340",
"8.0.0", /* Flash Player8 以降を指定 */
"/content/lib/swfobject/expressInstall.swf",
flashvars,
params,
attributes
);
$(function(){
/* 再生/一時停止 */
$("#btn_play").toggle(function(){
if(ytplayer) ytplayer.playVideo();
},function(){
if(ytplayer) ytplayer.pauseVideo();
});
/* 停止 */
$("#btn_stop").click(function(){
if(ytplayer) ytplayer.stopVideo();
});
/* 動画切り替え */
$("#favlist li a").live("click",function(){
var href=$(this).attr("href");
var hash=href.replace("#","");
ytplayer.cueVideoById(hash);
});
$.getJSON(
"http://gdata.youtube.com/feeds/api/users/cocoism3/favorites",
{
alt:"json"
},
function(xml) {
var feed = xml.feed;
$.each(feed.entry, function(i,item){
var tmp=item.id.$t.split("videos/");
var vid=tmp[tmp.length-1];
var s='';
s+='<a href="#'+vid+'"><img src="'+item.media$group.media$thumbnail[0].url+'" width="60" height="45" align="left" />'+item.title.$t+'</a>';
$("#favlist").append('<li class="video cf">'+s+'</li>');
$(".video").fadeIn(1000);
if(i>=5) continue;
});
}
);
});
/* プレーヤーの準備ができると呼ばれる関数 */
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.cueVideoById("9YEEl52u8XE");
}
</script>
<!-- CSS -->
<style type="text/css">
img { vertical-align:middle; }
#demo {
width:800px;
overflow:hidden;
clear:both;
}
#cleft {
width:560px;
float:left;
}
#cright {
width:230px;
float:right;
}
#cright li:hover {
background:#ffffcc;
}
#cright li img {
margin:0 5px 0 0;
padding:0;
}
</style>
</head>
<body>
<h1>設置サンプル</h1>
<h2>FlashのWeb埋め込みライブラリ「SWFObject」を使用したYouTube動画プレーヤーの埋め込み（クロムレスプレーヤー）</h2>
<p>特定のユーザーのお気に入りに登録している動画リストを取得し、YouTube動画のプレーヤーでそれらの動画を切り替え再生します。</p>
<!-- CODE -->
<div id="demo">
<div id="cleft">
<div id="ytapiplayer">
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div><!-- #ytapiplayer -->
<p>
<a href="#" id="btn_play"><img src="/content/img/strm/key_play_pause.png" alt="再生/一時停止" /></a>
<a href="#" id="btn_stop"><img src="/content/img/strm/key_stop.png" alt="停止" /></a>
</p>
</div><!-- #cleft -->
<div id="cright">
<ul id="favlist"></ul>
</div><!-- #cright -->
<div><!-- #demo -->
<br clear="all" />
<!-- / CODE -->
</body>
</html>
複数プレーヤーの配置
2011/1/10
同一ページ内に、複数のプレーヤーを配置します。
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var flashvars = { };
var params = { allowScriptAccess:"always" };
swfobject.embedSWF(
"http://www.youtube.com/apiplayer?enablejsapi=1&version=3&playerapiid=ytplayer",
"ytapiplayer",
"480",
"295",
"8.0.0", /* Flash Player8 以降を指定 */
"/content/lib/swfobject/expressInstall.swf",
flashvars,
params,
{ id:"myytplayer" }
);
swfobject.embedSWF(
"http://www.youtube.com/apiplayer?enablejsapi=1&version=3&playerapiid=ytplayer2",
"ytapiplayer2",
"480",
"295",
"8.0.0", /* Flash Player8 以降を指定 */
"/content/lib/swfobject/expressInstall.swf",
flashvars,
params,
{ id:"myytplayer2" }
);
$(function(){
/* 再生/一時停止 */
$("#btn_play").toggle(function(){
if(ytplayer) ytplayer.playVideo();
},function(){
if(ytplayer) ytplayer.pauseVideo();
});
$("#btn_play2").toggle(function(){
if(ytplayer2) ytplayer2.playVideo();
},function(){
if(ytplayer2) ytplayer2.pauseVideo();
});
/* 停止 */
$("#btn_stop").click(function(){
if(ytplayer) ytplayer.stopVideo();
});
$("#btn_stop2").click(function(){
if(ytplayer2) ytplayer2.stopVideo();
});
});
/* プレーヤーの準備ができると呼ばれる関数 */
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.cueVideoById("9YEEl52u8XE");
ytplayer.addEventListener("onStateChange", "onPlayerStateChange2");
ytplayer.addEventListener("onError", "onPlayerError");
ytplayer2 = document.getElementById("myytplayer2");
ytplayer2.cueVideoById("GILIk8W00s4");
ytplayer2.addEventListener("onStateChange", "onPlayerStateChange2");
ytplayer2.addEventListener("onError", "onPlayerError");
timerID=setInterval("getStatus()", 250);
timerID2=setInterval("getStatus2()", 250);
}
function getStatus(){
if(ytplayer && ytplayer.getDuration) {
var s="";
s+="プレーヤーの状態:"+getPlayerStatus(ytplayer.getPlayerState())+"｜";
s+="経過時間:"+ytplayer.getCurrentTime()+"｜";
s+="動画の長さ:"+ytplayer.getDuration();
$("#status").html(s);
}
}
function getStatus2(){
if(ytplayer2 && ytplayer2.getDuration) {
var s="";
s+="プレーヤーの状態:"+getPlayerStatus(ytplayer2.getPlayerState())+"｜";
s+="経過時間:"+ytplayer2.getCurrentTime()+"｜";
s+="動画の長さ:"+ytplayer2.getDuration();
$("#status2").html(s);
}
}
function getPlayerStatus(num){
if(num==-1){
return "未開始";
}else if(num==0){
return "終了";
}else if(num==1){
return "再生中";
}else if(num==2){
return "一時停止";
}else if(num==3){
return "バッファリング中";
}else if(num=-5){
return "頭出し済";
}
}
</script>
<!-- CSS -->
<style type="text/css">
img { vertical-align:middle; }
#demo {
width:970px;
overflow:hidden;
clear:both;
}
#cleft {
width:480px;
float:left;
}
#cright {
width:480px;
float:right;
}
</style>
</head>
<body>
<h1>設置サンプル</h1>
<h2>FlashのWeb埋め込みライブラリ「SWFObject」を使用したYouTube動画プレーヤーの埋め込み（クロムレスプレーヤー）</h2>
<p>同一ページ内に、複数のプレーヤーを配置します。</p>
<!-- CODE -->
<div id="demo">
<div id="cleft">
<div id="ytapiplayer">
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div><!-- #ytapiplayer -->
<p>
<a href="#" id="btn_play"><img src="/content/img/strm/key_play_pause.png" alt="再生/一時停止" /></a>
<a href="#" id="btn_stop"><img src="/content/img/strm/key_stop.png" alt="停止" /></a>
<span id="status"></span>
</p>
</div><!-- #cleft -->
<div id="cright">
<div id="ytapiplayer2">
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div><!-- #ytapiplayer -->
<p>
<a href="#" id="btn_play2"><img src="/content/img/strm/key_play_pause.png" alt="再生/一時停止" /></a>
<a href="#" id="btn_stop2"><img src="/content/img/strm/key_stop.png" alt="停止" /></a>
<span id="status2"></span>
</p>
</div><!-- #cright -->
<div><!-- #demo -->
<br clear="all" />
<!-- / CODE -->
</body>
</html>