YouTubeAPIYouTube iFrame Player API
- YouTube iFrame Player API
- 再生の制御〔再生・一時停止・停止・シーク位置〕
- 音量の制御〔ミュートの設定・解除、ミュート状態取得、音量の設定・取得〕
- 再生ステータスの取得〔経過時間、プレーヤーの状態、読み込みバイト数など〕
- 再生画質の制御〔画質の取得・変更、有効な画質セットの取得〕
- 動画情報の取得〔現在の動画の長さ、URL、埋め込みコードを取得〕
- イベント
- プレーヤーのサイズを設定
- 複数の動画を切り替えて再生
- プレーヤーの複数配置
- 字幕付き動画一覧表示＋字幕のフォントサイズ変更〔player.setOption()、onPlayerApiChange〕
- iframe要素への取得と変更
YouTube iFrame Player API
2012/11/18
YouTube JavaScript Player API リファレンス
※2012.11.18 見れなくなっている
YouTube iFrame APIを使用すると、iFrameでYouTube動画プレーヤーを埋め込み、パラメータやメソッドでプレーヤーの見た目や動きを制御することができます。 iFrameで埋め込むと、ユーザーの閲覧環境にあわせて最適なプレーヤー（FlashプレーヤーorHTML5プレーヤー）で再生されます。 何で再生されるかはYouTube側で制御されています。 たとえばFlashがインストールされているPCからの閲覧の場合はFlashプレーヤー、Flashがインストールされていない（無効になっている）PCやFlash未サポートのiPhoneからの閲覧の場合はHTML5プレーヤーで再生されます。
どのプレーヤーで再生されるかはユーザーの閲覧環境をもとに、YouTube側で制御されているようです。 たとえばFlashがインストールされているPCからの閲覧の場合はFlashプレーヤーで再生されますが、 Flashがインストールされていない（無効になっている）PCやFlash未サポートのiPadやiPhoneからの閲覧の場合はHTML5プレーヤーで再生されます。
iFrame Playerの基本的な埋め込み
JavaScriptで動画プレーヤーを埋め込む基本形
プレーヤの準備が完了したときに動画を自動再生するようにしています。
設置サンプルサンプルを見る
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>YouTube IFrame API：動画プレーヤ―の基本的な埋め込み</title>
</head>
<body>
<div id="player"><!-- 動画プレーヤーの埋め込み --></div>
<script>
/* IFrame Player APIのコードを非同期にロード */
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
/* APIコードがダウンロードされた後で、ifraemとYouTubeプレーヤー要素を生成 */
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player(
'player', /* 動画プレーヤーを埋め込む要素ID */
{
width: '640', /* 動画プレーヤーの幅 */
height: '390', /* 動画プレーヤーの高さ */
videoId: '9YEEl52u8XE', /* YouTube動画ID */
events: { /* イベント */
"onReady": onPlayerReady /* プレーヤの準備完了時 */
}
}
);
}
function onPlayerReady(event){
/* プレーヤの準備完了時に自動再生 */
event.target.playVideo();
}
</script>
</body>
</html>
jQueryを使用して動画プレーヤーを埋め込むサンプル
3つの動画の切り替えができるようにし、切り替える時にプレーヤーを都度生成しています。(2013/4/14 IE9で動作するよう調整)
設置サンプルサンプルを見る
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>YouTube IFrame API：動画プレーヤ―の基本的な埋め込み（jQuery使用）</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<style>
#playerbox { width:640px; height:390px; margin-bottom:10px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function(){
var player;
var playerFLG=0;
//YouTube iFrame Player API
var tag=document.createElement('script');
tag.src="//www.youtube.com/iframe_api";
var firstScriptTag=document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
/* プレーヤーの準備完了時 */
window.onYouTubeIframeAPIReady=function() {
dbg("onYouTubeIframeAPIReady");
/* 3番目の動画を再生 */
var first=$("#playlist li a").eq(2);
first.css("font-weight","bold");
loadPlayer(first.attr("rel"));
}
/* プレーヤー生成 */
function loadPlayer(videoID) {
dbg("loadPlayer("+videoID+")");
/* 埋め込むオブジェクトを生成 */
if(!playerFLG){
player = new YT.Player(
'player',{
width: '640', /* 動画プレーヤーの幅 */
height: '390', /* 動画プレーヤーの高さ */
videoId: videoID, /* YouTube動画ID */
events: { /* イベント */
"onReady": onPlayerReady /* プレーヤの準備完了時 */
}
}
);
}else{
/* プレーヤー内の動画差替 */
player.loadVideoById(videoID,0);
}
playerFLG++;
}
function onPlayerReady(event){
event.target.setVolume(50); /* 音量調整 */
event.target.playVideo(); /* 動画再生 */
}
/* 指定した動画を再生 */
$("#playlist > li > a").click(function(){
loadPlayer($(this).attr("rel"));
$(this).parent().parent().find("a").css("font-weight","normal");
$(this).css("font-weight","bold");
});
function dbg(str){
if(window.console && window.console.log){
console.log(str);
}
}
});
</script>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<h2>YouTube IFrame API：動画プレーヤ―の基本的な埋め込み（jQuery使用）</h2>
<div id="playerbox"><div id='player'><!-- 動画プレーヤーの埋め込み --></div></div>
<ul id="playlist">
<li><a href="#" rel="9YEEl52u8XE">Sleeping Dog</a></li>
<li><a href="#" rel="XfkXW49bXfo">Hiyoko of Tea</a></li>
<li><a href="#" rel="j4zpzF0R1ow">The fireworks of Tokyo Disney land</a></li>
</ul>
</div>
</body>
</html>
再生の制御
再生・一時停止・停止・シーク位置
2012/11/18
下記の関数を使用することで、プレーヤーの再生、一時停止、停止、シーク位置を制御することができます。
※player＝埋め込みオブジェクトID
| 関数 | 説明 |
|---|---|
| player.playVideo():Void | 動画を再生する。停止ボタンを押した後の場合は、頭出し。一時停止ボタンを押した後の場合は、停止した位置から再生。 |
| player.pauseVideo():Void | 再生中の動画を一時停止する。 |
| player.stopVideo():Void | 再生中の動画を停止する。動画の読み込みもキャンセルする。 |
| player.seekTo(seconds:Number, allowSeekAhead:Boolean):Void | 指定された時間（秒数）まで動画のフレームを進める。第2引数には、現在読み込んでいる動画の長さをsecondsの値が超えている場合にプレーヤーからサーバーに新しいリクエストを行うかどうかを指定。 |
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>設置サンプル：YouTube IFrame API：動画プレーヤ―の制御（再生・一時停止・停止・シーク位置）</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<style>
#playerbox { width:640px; height:390px; margin-bottom:10px; }
#controls { width:640px; text-align:center; }
#controls a { display:inline-block; margin:0; padding:5px 10px; text-decoration:none; width:6em; color:#fff; background:#000; text-align:center; }
#controls a:hover { background:#333; }
#controls a#seek { width:10em; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function(){
var player;
var videoID="XfkXW49bXfo";
/* IFrame Player APIのコードをロード */
function fGetScript(){
$.ajax({
url:"http://www.youtube.com/player_api/",
dataType:"script",
success:function(data){
dbg("done");
},
error:function(xhr, status, thrown) {
dbg(xhr);
fGetScript();
}
});
}
fGetScript();
/* プレーヤーの準備完了時 */
window.onYouTubeIframeAPIReady=function() {
dbg("onYouTubeIframeAPIReady");
loadPlayer(videoID);
}
/* プレーヤー生成 */
function loadPlayer(videoID) {
dbg("loadPlayer("+videoID+")");
if(!player){
player = new YT.Player(
'player',{
width: '640', /* 動画プレーヤーの幅 */
height: '390', /* 動画プレーヤーの高さ */
videoId: videoID, /* YouTube動画ID */
events: { /* イベント */
"onReady": onPlayerReady, /* プレーヤの準備完了時 */
"onStateChange": onPlayerStateChange, /* 動画プレーヤーのステータス変更 */
},
playerVars: {
"rel":0, // 関連動画の有無(default:1)
"showinfo":0, // 動画情報表示(default:1)
"controls":1 // コントロール有無(default:1)
}
}
);
}else{
player.loadVideoById(videoID);
}
}
function onPlayerReady(event){
dbg("onPlayerReady");
/* プレーヤの準備完了時 */
}
function onPlayerStateChange(event) {
/* プレーヤーのステータスが変更される度に発生 */
dbg("PlayerState:"+event.data);
switch(event.data){
case YT.PlayerState.ENDED:
case YT.PlayerState.PAUSED:
case YT.PlayerState.CUED:
$("#play").html("再生");
break;
case YT.PlayerState.PLAYING:
case YT.PlayerState.BUFFERING:
$("#play").html("一時停止");
break;
default:
$("#play").html("再生");
break;
}
}
function play(){
dbg("play");
player.playVideo(); /* 再生 */
$(this).html("一時停止");
}
function pause(){
dbg("pause");
player.pauseVideo(); /* 一時停止 */
$(this).html("再生");
}
function stop(){
dbg("stop");
player.stopVideo(); /* 停止 */
player.cueVideoById(videoID);
$(this).html("一時停止");
}
$("#play").click(function(){
var label=$(this).html();
dbg("play");
if(label=="再生"){
play();
}else{
pause();
}
});
$("#stop").click(function(){
stop();
});
$("#seek").click(function(){
player.seekTo(30,true);
play();
});
function dbg(str){
$("#debuglog").val(str+"\n"+$("#debuglog").val());
if(window.console && window.console.log){
console.log(str);
}
}
});
</script>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<h2>YouTube IFrame API：動画プレーヤーの制御（再生・一時停止・停止・シーク位置）</h2>
<div id="playerbox"><div id='player'><!-- 動画プレーヤーの埋め込み --></div></div>
<p id="controls">
<a href="#" id="play">再生</a>
<a href="#" id="stop">停止</a> ｜
<a href="#" id="seek">00:30から再生</a>
</p>
<textarea id="debuglog" style="width:630px;height:300px;"></textarea>
</div>
</body>
</html>
音量の制御
ミュートの設定・解除、ミュート状態取得、音量の設定・取得
2012/11/18
下記の関数を使用することで、プレーヤーの音声調節（ミュートの設定・解除、ミュート状態取得、音量の設定・取得を行うことができます。
※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>
<html>
<head>
<meta charset="utf-8" />
<title>設置サンプル：YouTube IFrame API：音量の制御</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<style>
#playerbox { width:640px; height:390px; margin-bottom:10px; }
img { vertical-align:middle; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function(){
var player;
var videoID="XfkXW49bXfo";
/* IFrame Player APIのコードをロード */
function fGetScript(){
$.ajax({
url:"http://www.youtube.com/player_api/",
dataType:"script",
success:function(data){
//dbg("done");
},
error:function(xhr, status, thrown) {
dbg(xhr);
fGetScript();
}
});
}
fGetScript();
/* プレーヤーの準備完了時 */
window.onYouTubeIframeAPIReady=function() {
//dbg("onYouTubeIframeAPIReady");
loadPlayer(videoID);
}
/* プレーヤー生成 */
function loadPlayer(videoID) {
//dbg("loadPlayer("+videoID+")");
if(!player){
player = new YT.Player(
'player',{
width: '640', /* 動画プレーヤーの幅 */
height: '390', /* 動画プレーヤーの高さ */
videoId: videoID, /* YouTube動画ID */
events: { /* イベント */
"onReady": onPlayerReady /* プレーヤの準備完了時 */
},
playerVars: {
"rel":0, // 関連動画の有無(default:1)
"showinfo":0, // 動画情報表示(default:1)
"controls":1 // コントロール有無(default:1)
}
}
);
}else{
player.loadVideoById(videoID);
}
}
function onPlayerReady(event){
/* プレーヤの準備完了時 */
player.playVideo(); /* 再生開始 */
dbg("[onPlayerReady]現在の音量："+player.getVolume());
$("#volume option").filter(function(){
//dbg($(this).text()+"=="+player.getVolume());
return $(this).text()==player.getVolume();
}).attr("selected","selected");
if(player.getVolume()==0){
btn_muteON();
}else{
btn_muteOFF();
}
}
/* ミュート設定 */
$("#btn_mute").click(function(e){
/* プレーヤーのミュート状態 */
dbg("ミュート状態:"+player.isMuted());
if(player.isMuted()){
player.unMute(); /* ミュート解除 */
btn_muteOFF();
}else{
player.mute(); /* ミュート */
btn_muteON();
}
return false;
});
/* 音量プルダウン */
for(var i=0; i<=100; i+=10){
$("#volume").append("<option value='"+i+"'>"+i+"</option>");
}
/* 音量変更 */
$("#volume").change(function(){
var num=($(this).val()) ? $(this).val() : 0;
player.setVolume(num);
dbg("現在の音量："+num);
if(num==0){
btn_muteON();
}else{
btn_muteOFF();
}
});
function dbg(str){
$("#debuglog").val(str+"\n"+$("#debuglog").val());
if(window.console && window.console.log){
console.log(str);
}
}
function btn_muteOFF(){
$("#btn_mute > img").attr("src","/content/img/strm/key_unmute.png");
$("#mutestatus").html("ミュートOFF");
}
function btn_muteON(){
$("#btn_mute > img").attr("src","/content/img/strm/key_mute.png");
$("#mutestatus").html("ミュートON");
}
});
</script>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<h2>YouTube IFrame API：音量の制御</h2>
<p>YouTube IFrame APIを使用して、プレーヤーの音量を制御するサンプル。</p>
<div id="playerbox"><div id='player'><!-- 動画プレーヤーの埋め込み --></div></div>
<p>
<a href="#" id="btn_mute"><img /></a>
<span id="mutestatus">ミュートOFF</span>
音量変更：<select id="volume"></select>
<span id="volumestatus"></span>
</p>
<textarea id="debuglog" style="width:630px;height:300px;"></textarea>
</div>
</body>
</html>
再生ステータスの取得
経過時間、プレーヤーの状態、読み込みバイト数など
2012/11/18
下記の関数を使用することで、経過時間、プレーヤーの状態や読み込みバイト数など、YouTubeの埋め込みプレーヤーの再生ステータスを取得することができます。
※player＝埋め込みオブジェクトID
| 関数 | 説明 |
|---|---|
| player.getVideoLoadedFraction():Number | バッファリングしているビデオの割合。 0〜1の浮動小数点で返す。 |
| player.getCurrentTime():Number | 動画再生開始からの経過時間を秒数で返す。 |
| player.getPlayerState():Number | プレーヤーの状態を取得。未開始（-1）、終了（0）、再生中（1）、一時停止中（2）、バッファリング中（3）、頭しだし済（5）のいずれかの数値で返す。定数はこちら。 |
| player.getVideoBytesTotal():Float | 読み込み済または再生中の動画ファイルのサイズをバイト数で返す。※2012.10.31時点で廃止予定 |
| player.getVideoBytesLoaded():Number | 現在の動画ファイルの読み込み済のバイト数を返す。※2012.10.31時点で廃止予定 |
| player.getVideoStartBytes():Number | 動画ファイルの読み込みを開始した位置をバイト数で返す。※2012.10.31時点で廃止予定 |
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>設置サンプル：YouTube IFrame API：動画の再生ステータスの取得</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<style>
#playerbox { width:640px; height:390px; margin-bottom:10px; }
#status { width:640px; height:3em; margin-bottom:10px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function(){
var player,timer;
var videoID="XfkXW49bXfo";
/* IFrame Player APIのコードをロード */
function fGetScript(){
$.ajax({
url:"http://www.youtube.com/player_api/",
dataType:"script",
success:function(data){
//dbg("done");
},
error:function(xhr, status, thrown) {
dbg(xhr);
fGetScript();
}
});
}
fGetScript();
/* プレーヤーの準備完了時 */
window.onYouTubeIframeAPIReady=function() {
//dbg("onYouTubeIframeAPIReady");
loadPlayer(videoID);
}
/* プレーヤー生成 */
function loadPlayer(videoID) {
//dbg("loadPlayer("+videoID+")");
if(!player){
player = new YT.Player(
'player',{
width: '640', /* 動画プレーヤーの幅 */
height: '390', /* 動画プレーヤーの高さ */
videoId: videoID, /* YouTube動画ID */
events: { /* イベント */
"onReady": onPlayerReady, /* プレーヤの準備完了時 */
"onStateChange": onPlayerStateChange, /* 動画プレーヤーのステータス変更 */
},
playerVars: {
"rel":1, // 関連動画の有無(default:1)
"showinfo":1, // 動画情報表示(default:1)
"controls":1 // コントロール有無(default:1)
}
}
);
}else{
player.loadVideoById(videoID);
}
}
function onPlayerReady(event){
/* プレーヤの準備完了時 */
//player.playVideo(); /* 再生開始 */
timer = setInterval(getStatus, 100);
}
var getStatus=function(){
var loadedbytes="バッファリングしてビデオの割合（getVideoLoadedFraction）:"+player.getVideoLoadedFraction()+"bytes<br>";
var curtime="動画の再生を開始してからの経過時間（getCurrentTime）:"+player.getCurrentTime()+"秒";
$("#status").html(loadedbytes+curtime);
}
function onPlayerStateChange(event) {
var s="";
/* プレーヤーのステータスが変更される度に発生 */
/* 整数値, 定数 */
s+="PlayerState:"+event.data;
/* 定数 */
switch(event.data){
case YT.PlayerState.ENDED:
/* 0 (再生終了（＝最後まで再生した）) */
s+=" / YT.PlayerState.ENDED";
break;
case YT.PlayerState.PLAYING:
/* 1 (再生中) */
s+=" / YT.PlayerState.PLAYING";
break;
case YT.PlayerState.PAUSED:
/* 2 (一時停止された) */
s+=" / YT.PlayerState.PAUSED";
break;
case YT.PlayerState.BUFFERING:
/* 3 (バッファリング中) */
s+=" / YT.PlayerState.BUFFERING";
break;
case YT.PlayerState.CUED:
/* 5 (頭出しされた) */
s+=" / YT.PlayerState.CUED";
break;
case -1:
/* -1 (未スタート、他の動画に切り替えた時など) */
player.playVideo(); /* 再生開始 */
break;
}
dbg(s);
}
$("#btn_seek").click(function(){
player.seekTo(30,true);
return false;
});
function dbg(str){
$("#debuglog").val(str+"\n"+$("#debuglog").val());
if(window.console && window.console.log){
console.log(str);
}
}
});
</script>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<h2>YouTube IFrame API：動画の再生ステータスの取得</h2>
<p>IFrame APIを使用して、動画の再生状況を取得するサンプル。</p>
<div id="playerbox"><div id='player'><!-- 動画プレーヤーの埋め込み --></div></div>
<p><a href="#" id="btn_seek">00:30から再生</a></p>
<div id="status"></div>
<p>動画のステイタス（getPlayerState）：<br><textarea id="debuglog" style="width:630px;height:300px;"></textarea></p>
</div>
</body>
</html>
再生画質の制御
画質の取得・変更、有効な画質セットの取得
2012/11/18
下記の関数を使用することで、プレーヤーで再生中の動画の品質を取得することができます。
※player＝埋め込みオブジェクトID
| 関数 | 説明 | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| player.getPlaybackQuality():String | 現在の動画の画質を取得し、hd720、largemedium、smallのいずれかを返す。現在の動画がない場合は「undefined」を返す。 | ||||||||||||||||
| player.setPlaybackQuality (suggestedQuality:String):Void | 現在の動画の推奨画質を設定し、現在の位置から新しい画質で動画を再読み込みする。再生画質を変更した場合は再生中の動画の画質のみが変更される。指定可能な値は、以下ののいずれか（現在の動画で有効な画像セットに含まれないものを指定することはできない）。
| ||||||||||||||||
| player.getAvailableQualityLevels():Array | 現在の動画で有効な画質のセットを返す。動画を再生した時に取得可能。 |
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>設置サンプル：YouTube IFrame API：画質の制御</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<style>
#playerbox { width:640px; height:390px; margin-bottom:10px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function(){
var player;
var videoID="XfkXW49bXfo";
/* IFrame Player APIのコードをロード */
function fGetScript(){
$.ajax({
url:"http://www.youtube.com/player_api/",
dataType:"script",
success:function(data){
//dbg("done");
},
error:function(xhr, status, thrown) {
dbg(xhr);
fGetScript();
}
});
}
fGetScript();
/* プレーヤーの準備完了時 */
window.onYouTubeIframeAPIReady=function() {
//dbg("onYouTubeIframeAPIReady");
loadPlayer(videoID);
}
/* プレーヤー生成 */
function loadPlayer(videoID) {
//dbg("loadPlayer("+videoID+")");
if(!player){
player = new YT.Player(
'player',{
width: '640', /* 動画プレーヤーの幅 */
height: '390', /* 動画プレーヤーの高さ */
videoId: videoID, /* YouTube動画ID */
events: { /* イベント */
"onReady": onPlayerReady, /* プレーヤの準備完了時 */
"onStateChange": onPlayerStateChange, /* 動画プレーヤーのステータス変更 */
},
playerVars: {
"rel":0, // 関連動画の有無(default:1)
"showinfo":0, // 動画情報表示(default:1)
"controls":1 // コントロール有無(default:1)
}
}
);
}else{
player.loadVideoById(videoID);
}
}
function onPlayerReady(event){
/* プレーヤの準備完了時 */
player.playVideo(); /* 再生開始 */
}
function onPlayerStateChange(event) {
/* プレーヤーのステータスが変更される度に発生 */
//dbg("PlayerState:"+event.data);
if(event.data==YT.PlayerState.PLAYING){
dbg(player.getAvailableQualityLevels());
/* 画質プルダウン */
var tmp=player.getAvailableQualityLevels();
$("#volume option").remove();
for(var i in tmp){
$("#volume").append("<option value='"+tmp[i]+"'>"+tmp[i]+"</option>");
}
$("#volume option").filter(function(){
//dbg($(this).text()+"=="+player.getVolume());
return $(this).text()==player.getPlaybackQuality();
}).attr("selected","selected");
}
}
/* 音量変更 */
$("#volume").change(function(){
var num=($(this).val()) ? $(this).val() : null;
player.setPlaybackQuality(num);
dbg("現在の画質："+num);
});
function dbg(str){
$("#debuglog").val(str+"\n"+$("#debuglog").val());
if(window.console && window.console.log){
console.log(str);
}
}
});
</script>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<h2>YouTube IFrame API：画質の制御</h2>
<p>YouTube IFrame APIを使用して、プレーヤーの画質を制御するサンプル。</p>
<div id="playerbox"><div id='player'><!-- 動画プレーヤーの埋め込み --></div></div>
<p>
画質変更：<select id="volume"></select>
</p>
<textarea id="debuglog" style="width:630px;height:300px;"></textarea>
</div>
</body>
</html>
動画情報の取得
現在の動画の長さ、URL、埋め込みコードを取得
2012/11/18
下記の関数を使用することで、現在の動画の長さ、URL、埋め込みコードを取得することができます。
※player＝埋め込みオブジェクトID
| 関数 | 説明 |
|---|---|
| player.getDuration():Number | 再生中の動画の長さを秒数で返す。 ※動画のステイタスが「YT.PlayerState.PLAYING」になると取得できます。 |
| player.getVideoUrl():String | 読み込み済または再生中の動画のYouTube.comのURLを返す。 |
| player.getVideoEmbedCode():String | 読み込み済または再生中の動画の埋め込みコードを返す。 |
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>設置サンプル：YouTube IFrame API：動画情報の取得</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<style>
#playerbox { width:640px; height:390px; margin-bottom:10px; }
#controls { width:640px; text-align:center; }
#controls a { display:inline-block; margin:0; padding:5px 10px; text-decoration:none; width:6em; color:#fff; background:#000; text-align:center; }
#controls a:hover { background:#333; }
#duration { color:red; }
#videoURL { width:630px; display:block; }
#videoEmbedCode { width:630px; height:4em; display:block; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function(){
var player;
var videoID="XfkXW49bXfo";
/* IFrame Player APIのコードをロード */
function fGetScript(){
$.ajax({
url:"http://www.youtube.com/player_api/",
dataType:"script",
success:function(data){
//dbg("done");
},
error:function(xhr, status, thrown) {
dbg(xhr);
fGetScript();
}
});
}
fGetScript();
/* プレーヤーの準備完了時 */
window.onYouTubeIframeAPIReady=function() {
dbg("onYouTubeIframeAPIReady");
loadPlayer(videoID);
}
/* プレーヤー生成 */
function loadPlayer(videoID) {
dbg("loadPlayer("+videoID+")");
if(!player){
player = new YT.Player(
'player',{
width: '640', /* 動画プレーヤーの幅 */
height: '390', /* 動画プレーヤーの高さ */
videoId: videoID, /* YouTube動画ID */
events: { /* イベント */
"onReady": onPlayerReady, /* プレーヤの準備完了時 */
"onStateChange": onPlayerStateChange, /* 動画プレーヤーのステータス変更 */
},
playerVars: {
"rel":0, // 関連動画の有無(default:1)
"showinfo":0, // 動画情報表示(default:1)
"controls":1 // コントロール有無(default:1)
}
}
);
}else{
player.cueVideoById(videoID);
}
}
function onPlayerReady(event){
/* プレーヤの準備完了時 */
//player.playVideo(); /* 再生開始 */
$("#videoURL").val(player.getVideoUrl()); /* 動画のURLを取得 */
$("#videoEmbedCode").val(player.getVideoEmbedCode()); /* 動画の埋め込みコードを取得 */
}
function onPlayerStateChange(event) {
/* プレーヤーのステータスが変更される度に発生 */
dbg("PlayerState:"+event.data);
if(event.data==YT.PlayerState.PLAYING){
$("#duration").html(player.getDuration());
}
}
function dbg(str){
$("#debuglog").val(str+"\n"+$("#debuglog").val());
if(window.console && window.console.log){
console.log(str);
}
}
});
</script>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<h2>YouTube IFrame API：動画情報の取得</h2>
<p>IFrame APIを使用して、動画の情報の取得するサンプル。</p>
<div id="playerbox"><div id='player'><!-- 動画プレーヤーの埋め込み --></div></div>
<p>再生中の動画の長さ：<span id="duration">0</span></p>
<p>動画のURL：<input type="text" id="videoURL" readonly /></p>
<p>動画の埋め込みコード：<textarea id="videoEmbedCode" readonly></textarea></p>
</div>
</body>
</html>
イベント
2012/11/18
下記のイベントが発生します。
設置サンプルサンプルを見る
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>YouTube IFrame API：設置サンプル（イベント）</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<style>
#playerbox { width:640px; height:390px; margin-bottom:10px; }
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<h2>YouTube IFrame API：イベント</h2>
<div id="playerbox"><div id='player'><!-- 動画プレーヤーの埋め込み --></div></div>
<textarea id="tarea" style="width:640px;height:300px;"></textarea>
<script>
/* IFrame Player APIのコードを非同期にダウンロード */
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
/* APIコードがダウンロードされた後で、ifraemとYouTubeプレーヤー要素を生成 */
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player(
'player', /* 動画プレーヤーを埋め込む要素ID */
{
width: '640', /* 動画プレーヤーの幅 */
height: '390', /* 動画プレーヤーの高さ */
videoId: 'XfkXW49bXfo', /* YouTube動画ID */
events: { /* イベント */
"onReady": onPlayerReady, /* プレーヤの準備完了時 */
"onPlaybackQualityChange": onPlayerPlaybackQualityChange, /* 画質変更 */
"onStateChange": onPlayerStateChange, /* 動画プレーヤーのステータス変更 */
"onError": onPlayerError, /* エラー発生時 ※HTML5プレーヤーのみ */
"onPlaybackRateChange": onPlayerPlaybackRateChange, /* 再生レート(速度)変更 ※HTML5プレーヤーのみ */
"onApiChange": onPlayerApiChange /* モジュールが読み込まれた時 */
},
playerVars :{ /* プレーヤーに渡すパラメータ */
showinfo:1
}
}
);
}
function onPlayerApiChange(event){
/* APIメソッドを使用してモジュールが読み込まれた時に発生 */
//プレイヤーのオプションに設定可能なモジュール名を配列で取得
dbg("player.getOptions():"+player.getOptions()); //["cc", "endscreen"]
dbg("player.getOptions(\"cc\"):"+player.getOptions("cc")); //["reload", "fontSize", "track", "tracklist"]
}
function onPlayerReady(event) {
/* プレーヤーの準備が完了した時に発生 */
var embedcode=event.target.getVideoEmbedCode(); //<iframe frameborder="0" allowfullscreen="" id="player" title="YouTube video player" height="390" width="640" src="https://www.youtube.com/embed/9YEEl52u8XE"></iframe>
event.target.setVolume(50); /* 音量調整 */
event.target.playVideo(); /* 動画再生 */
}
function onPlayerPlaybackQualityChange(event) {
/* プレーヤーの画質が変更される度に発生 */
dbg("PlayerPlaybackQuality:"+event.data);
/*
small
medium 360p
large 480p
hd720 720p HD
hd1080 1080p HD
highres
*/
}
function onPlayerStateChange(event) {
var s="";
/* プレーヤーのステータスが変更される度に発生 */
/* 整数値 */
s+="PlayerState:"+event.data;
/*
-1 (未スタート、他の動画に切り替えた時など)
0 (再生終了（＝最後まで再生した）)
1 (再生中)
2 (一時停止された)
3 (バッファリング中)
5 (頭出しされた)
*/
/* 定数 */
switch(event.data){
case YT.PlayerState.ENDED:
s+=" / YT.PlayerState.ENDED";
break;
case YT.PlayerState.PLAYING:
s+=" / YT.PlayerState.PLAYING";
break;
case YT.PlayerState.PAUSED:
s+=" / YT.PlayerState.PAUSED";
break;
case YT.PlayerState.BUFFERING:
s+=" / YT.PlayerState.BUFFERING";
break;
case YT.PlayerState.CUED:
s+=" / YT.PlayerState.CUED";
break;
}
dbg(s);
}
function onPlayerPlaybackRateChange(event){
/* 動画の再生レート(速度)が変更される度に発生 */
dbg("RateChange:"+event.data); /* 速度を返す */
/*
2: 2.0x
1.5: 1,5x
1: 標準
0.5: 0.5x
0.25: 0.25x
*/
}
function onPlayerError(event) {
/* HTML5プレーヤーでエラーが発生した時に呼び出される（Flashプレーヤーの場合は何もかえらない） */
dbg("PlayerError:"+event.data); /* エラーの種類を整数で返す */
/*
2: 無効なパラメータが含まれている（動画IDが間違っている場合など）
5: 再生できません
100: 動画が見つかりません（動画が削除されている、プライベート動画など）
101: 所有者により埋め込みが禁止されている動画
150: 101と同じ
*/
}
function dbg(str){
document.getElementById("tarea").value=str+"\n"+document.getElementById("tarea").value;
if(window.console && window.console.log){
console.log(str);
}
}
</script>
</div>
</body>
</html>
プレーヤーのサイズを設定
2012/11/18
プレーヤーのサイズを設定します。
※player＝埋め込みオブジェクトID
| 関数 | 説明 |
|---|---|
| player.setSize(width:Number, height:Number):Object | プレーヤ―が含まれているiframe要素の幅と高さをピクセル単位で指定。 |
以下はプレーヤーのサイズ（4:3）を切り替えるサンプルです。
プレーヤーの高さには、コント―ロールの高さ30pxをプラスしています。
プラスしないと黒い余白ができます。
例）動画のサイズが幅640x高さ360の場合、コントロールを含める場合は幅640x高さ390となります。
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>設置サンプル：YouTube IFrame API：プレーヤーのサイズを設定</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<style>
#playerbox { width:640px; height:390px; margin-bottom:10px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function(){
var player;
var videoID="XfkXW49bXfo";
/* IFrame Player APIのコードをロード */
function fGetScript(){
$.ajax({
url:"http://www.youtube.com/player_api/",
dataType:"script",
success:function(data){
//dbg("done");
},
error:function(xhr, status, thrown) {
dbg(xhr);
fGetScript();
}
});
}
fGetScript();
/* プレーヤーの準備完了時 */
window.onYouTubeIframeAPIReady=function() {
//dbg("onYouTubeIframeAPIReady");
loadPlayer(videoID);
}
/* プレーヤー生成 */
function loadPlayer(videoID) {
//dbg("loadPlayer("+videoID+")");
if(!player){
player = new YT.Player(
'player',{
width: '2640', /* 動画プレーヤーの幅 */
height: '390', /* 動画プレーヤーの高さ */
videoId: videoID, /* YouTube動画ID */
events: { /* イベント */
"onReady": onPlayerReady /* プレーヤの準備完了時 */
},
playerVars: {
"rel":0, // 関連動画の有無(default:1)
"showinfo":0, // 動画情報表示(default:1)
"controls":1 // コントロール有無(default:1)
}
}
);
}else{
player.cueVideoById(videoID);
}
onPlayerSizechange();
}
function onPlayerReady(event){
/* プレーヤの準備完了時 */
//player.playVideo(); /* 再生開始 */
}
/* 音量変更 */
$("#size").change(function(){
onPlayerSizechange();
});
function onPlayerSizechange(){
var tmp=$("#size option:selected").val();
var tmp_ary=tmp.split("x");
var width=tmp_ary[0];
var height=eval(tmp_ary[1])+30; /* contolsの高さ30px */
player.setSize(width, height);
dbg("現在のプレーヤーサイズ:width:"+width+"px / height:"+height+"px");
}
function dbg(str){
$("#debuglog").val(str+"\n"+$("#debuglog").val());
if(window.console && window.console.log){
console.log(str);
}
}
});
</script>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<h2>YouTube IFrame API：プレーヤーのサイズを設定</h2>
<p>setSize()関数を使用して、プレーヤーのサイズをを制御するサンプル。</p>
<div id="playerbox"><div id='player'><!-- 動画プレーヤーの埋め込み --></div></div>
<p>
画質変更：
<select id="size">
<option value="240x135">240x135</option>
<option value="320x180">320x180</option>
<option value="560x315">560x315</option>
<option value="640x360" selected="selected">640x360</option>
</select>
</p>
<textarea id="debuglog" style="width:630px;height:300px;"></textarea>
</div>
</body>
</html>
複数の動画を切り替えて再生
2012/11/18
特定のユーザーのお気に入りに登録している動画リストを取得し、YouTube動画のプレーヤーでそれらの動画を切り替え再生します。
設置イメージloadVideoById()使用：切り替えた時に動画を自動再生させるサンプル。
設置サンプル:loadVideoByIdサンプルを見る
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>YouTube IFrame API：複数の動画を切り替えて再生（シーク）</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<style>
#playerbox { width:640px; height:390px; margin-bottom:10px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function(){
var player;
/* IFrame Player APIのコードをロード */
function fGetScript(){
$.ajax({
url:"http://www.youtube.com/player_api/",
dataType:"script",
success:function(data){
dbg("done");
/* プレーヤーの準備完了時 */
window.onYouTubeIframeAPIReady=function() {
dbg("onYouTubeIframeAPIReady");
/* 3番目の動画を再生 */
var first=$("#playlist li a").eq(2);
first.css("font-weight","bold");
loadPlayer(first.attr("rel"));
}
},
error:function(xhr, status, thrown) {
dbg(xhr);
fGetScript();
}
});
}
fGetScript();
/* プレーヤー生成 */
function loadPlayer(videoID) {
dbg("loadPlayer("+videoID+")");
/* 埋め込むオブジェクトを生成（すでにある場合は削除）*/
if(!player){
player = new YT.Player(
'player',{
width: '640', /* 動画プレーヤーの幅 */
height: '390', /* 動画プレーヤーの高さ */
videoId: videoID, /* YouTube動画ID */
events: { /* イベント */
"onReady": onPlayerReady /* プレーヤの準備完了時 */
}
}
);
}else{
player.loadVideoById(videoID); /* 指定した動画を読み込んで再生（自動再生扱い） */
}
}
function onPlayerReady(event){
dbg("onPlayerReady");
event.target.setVolume(50); /* 音量調整 */
event.target.playVideo(); /* 動画再生 */
}
/* 指定した動画を再生 */
$("#playlist > li > a").click(function(){
loadPlayer($(this).attr("rel"));
$(this).parent().parent().find("a").css("font-weight","normal");
$(this).css("font-weight","bold");
});
function dbg(str){
if(window.console && window.console.log){
console.log(str);
}
}
});
</script>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<h2>YouTube IFrame API：複数の動画を切り替えて再生</h2>
<p>切り替えた時に動画を自動再生させるサンプル。</p>
<div id="playerbox"><div id='player'><!-- 動画プレーヤーの埋め込み --></div></div>
<ul id="playlist">
<li><a href="#" rel="9YEEl52u8XE">Sleeping Dog</a></li>
<li><a href="#" rel="XfkXW49bXfo">Hiyoko of Tea</a></li>
<li><a href="#" rel="j4zpzF0R1ow">The fireworks of Tokyo Disney land</a></li>
</ul>
</div>
</body>
</html>
cueVideoById()使用：切り替えた時に動画は自動再生させずに、再生ボタンを押して再生させるサンプル。
設置サンプル:cueVideoByIdサンプルを見る
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>YouTube IFrame API：複数の動画を切り替えて再生</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<style>
#playerbox { width:640px; height:390px; margin-bottom:10px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function(){
var player;
/* IFrame Player APIのコードをロード */
function fGetScript(){
$.ajax({
url:"http://www.youtube.com/player_api/",
dataType:"script",
success:function(data){
dbg("done");
/* プレーヤーの準備完了時 */
window.onYouTubeIframeAPIReady=function() {
dbg("onYouTubeIframeAPIReady");
/* 3番目の動画を再生 */
var first=$("#playlist li a").eq(2);
first.css("font-weight","bold");
loadPlayer(first.attr("rel"));
}
},
error:function(xhr, status, thrown) {
dbg(xhr);
fGetScript();
}
});
}
fGetScript();
/* プレーヤー生成 */
function loadPlayer(videoID) {
dbg("loadPlayer("+videoID+")");
/* 埋め込むオブジェクトを生成（すでにある場合は削除）*/
if(!player){
player = new YT.Player(
'player',{
width: '640', /* 動画プレーヤーの幅 */
height: '390', /* 動画プレーヤーの高さ */
videoId: videoID, /* YouTube動画ID */
events: { /* イベント */
"onReady": onPlayerReady /* プレーヤの準備完了時 */
}
}
);
}else{
player.cueVideoById(videoID); /* 指定した動画のサムネイルを読み込む（自動再生しない） */
}
}
function onPlayerReady(event){
dbg("onPlayerReady");
event.target.setVolume(50); /* 音量調整 */
}
/* 指定した動画を再生 */
$("#playlist > li > a").click(function(){
loadPlayer($(this).attr("rel"));
$(this).parent().parent().find("a").css("font-weight","normal");
$(this).css("font-weight","bold");
});
function dbg(str){
if(window.console && window.console.log){
console.log(str);
}
}
});
</script>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<h2>YouTube IFrame API：複数の動画を切り替えて再生</h2>
<p>切り替えた時に動画は自動再生させずに、再生ボタンを押して再生させるサンプル。</p>
<div id="playerbox"><div id='player'><!-- 動画プレーヤーの埋め込み --></div></div>
<ul id="playlist">
<li><a href="#" rel="9YEEl52u8XE">Sleeping Dog</a></li>
<li><a href="#" rel="XfkXW49bXfo">Hiyoko of Tea</a></li>
<li><a href="#" rel="j4zpzF0R1ow">The fireworks of Tokyo Disney land</a></li>
</ul>
</div>
</body>
</html>
プレーヤーの複数配置
2012/11/18
同一ページ内に、複数のプレーヤーを配置することが可能です。
以下は、2つの動画を配置し、再生・一時停止の再生ステイタスを同期させるサンプルです。
どちらか一方のプレーヤを一時停止すると、もう一方のプレーヤーも一時停止します。
動画が最後まで再生された時のステイタスは一時停止、リプレイした時のステイタスは再生となります。
※やり方はこれでいいのか模索中。
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>設置サンプル：YouTube IFrame API：プレーヤーの複数配置</title>
<link rel="canonical" href="https://phpjavascriptroom.com/example3.php?f=module/include/strm/youtubeiframeplayerapi/multiple.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB" />
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<style>
#playerbox { width:700px; margin-bottom:10px; clear:both; float:none; overflow:hidden; }
#playerbox iframe { float:left; margin:0 10px 0 0; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function(){
var players=[];
/* IFrame Player APIのコードをロード */
function fGetScript(){
$.ajax({
url:"http://www.youtube.com/player_api/",
dataType:"script",
success:function(data){
dbg("done");
},
error:function(xhr, status, thrown) {
dbg(xhr);
fGetScript();
}
});
}
fGetScript();
/* プレーヤーの準備完了時 */
window.onYouTubeIframeAPIReady=function() {
dbg("onYouTubeIframeAPIReady");
loadPlayer("9YEEl52u8XE,XfkXW49bXfo");
}
/* プレーヤー生成 */
function loadPlayer(videoIDs) {
var tmp=videoIDs.split(",");
for(var i in tmp){
var videoID=tmp[i];
var playerID="player_"+videoID;
playerID=new YT.Player(
playerID,{
width: '320',
height: '195',
videoId: videoID,
events: { /* イベント */
"onReady": onPlayerReady, /* プレーヤの準備完了時 */
"onStateChange": onPlayerStateChange /* 動画プレーヤーのステータス変更 */
},
playerVars: {
"rel":1, // 関連動画の有無(default:1)
"showinfo":0, // 動画情報表示(default:1)
"controls":1 // コントロール有無(default:1)
}
}
);
players.push(playerID);
dbg(playerID.getIframe());
}
}
function onPlayerReady(event){
/* プレーヤの準備完了時 */
dbg("onPlayerReady");
}
function onPlayerStateChange(event){
/* プレーヤの準備完了時 */
dbg("PlayerState:"+event.data);
var playerID=event.target.a.id;
if(event.data==YT.PlayerState.PAUSED){
for(var i in players){
players[i].pauseVideo();
}
}else if(event.data==YT.PlayerState.PLAYING){
for(var i in players){
players[i].playVideo();
}
}
}
function dbg(str){
$("#debuglog").val(str+"\n"+$("#debuglog").val());
if(window.console && window.console.log){
console.log(str);
}
}
});
</script>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<h2>YouTube IFrame API：プレーヤーの複数配置</h2>
<p>2つの動画を配置し、再生・一時停止の再生ステイタスを同期させる。どちらか一方のプレーヤを一時停止すると、もう一方のプレーヤーも一時停止します。動画が最後まで再生された時のステイタスは一時停止、リプレイした時のステイタスは再生となります。</p>
<div id="playerbox">
<div id='player_9YEEl52u8XE'><!-- 動画プレーヤーの埋め込み --></div>
<div id='player_XfkXW49bXfo'><!-- 動画プレーヤーの埋め込み --></div>
</div>
<textarea id="debuglog" style="width:640px;height:300px;"></textarea>
</div>
</body>
</html>
字幕付き動画一覧表示＋字幕のフォントサイズ変更
player.setOption()、onPlayerApiChange
2012/11/18
字幕設定は、「player.setOption('cc','fontSize',0);」で指定できます。
※player＝埋め込みオブジェクトID
指定可能な値：-1, 0(dfault), 1, 2, 3のいずれか。
-1が最小サイズ、0が通常サイズ。1～3はかなり大きいので使うことはないかも。
以下は字幕のフォントサイズの切り替えができるサンプルです。
プレーヤーの下にある字幕付き動画の一覧は、YouTubeの検索APIを使用しています。 字幕付きの動画は、「caption」パラメータに「true」を指定すると取得できます。 http://gdata.youtube.com/feeds/api/videos?caption&v=2
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>YouTube IFrame API：動画プレーヤ―の基本的な埋め込み（jQuery使用）</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<style>
#playerbox { width:640px; height:390px; margin-bottom:10px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function(){
var player;
/* IFrame Player APIのコードをロード */
function fGetScript(){
$.ajax({
url:"http://www.youtube.com/player_api/",
dataType:"script",
success:function(data){
dbg("done");
/* プレーヤーの準備完了時 */
window.onYouTubeIframeAPIReady=function() {
dbg("onYouTubeIframeAPIReady");
getPL();
}
},
error:function(xhr, status, thrown) {
dbg(xhr);
fGetScript();
}
});
}
fGetScript();
function getPL(){
/* how to make cooking」が含まれている字幕付き動画を評価が高い順に取得 */
$.ajax({
"url":"http://gdata.youtube.com/feeds/api/videos",
"data":{"q":"how+to+make+cooking","orderby":"rating","caption":true,"v":2,"alt":"json-in-script"},
"type":"get",
"dataType":"jsonp"
})
.success(function(xml){
dbg("success");
getList(xml);
})
.error(function(xhr, status, thrown){
dbg("error:"+status+"/"+thrown);
getPL();
});
}
function getList(xml){
var feed=xml.feed;
var s="";
$.each(feed.entry, function(i,item){
var tmp=item.link;
$.each(tmp, function(j, lnk){
if(lnk.href.indexOf("watch?v=")!=-1){
var tmp2=lnk.href.split("watch?v=");
tmp2=tmp2[1].split("&");
var vid=tmp2[0];
var title=(item.title)?item.title.$t:"no title";
if(vid){
$('<li><a href="#" rel="'+vid+'">'+title+'</a></li>').appendTo($("#videos"));
}
}
});
});
loadPlayer($("#videos li:first a").attr("rel"),0);
}
$("#videos li a").live("click",function(event){
loadPlayer($(this).attr("rel"),$(this).parent().index());
});
/* プレーヤー生成 */
function loadPlayer(videoID,idx) {
dbg("loadPlayer("+videoID+")");
$("#videos li").css("font-weight","normal");
$("#videos li").eq(idx).css("font-weight","bold");
if(!player){
player = new YT.Player(
'player',{
width: '640', /* 動画プレーヤーの幅 */
height: '390', /* 動画プレーヤーの高さ */
videoId: videoID, /* YouTube動画ID */
events: { /* イベント */
"onReady": onPlayerReady, /* プレーヤの準備完了時 */
"onApiChange": onPlayerApiChange
},
playerVars: {
"rel":0, // 関連動画の有無(default:1)
"iv_load_policy":3, // アノテーション有無(default:1, 3で無効)
"cc_load_policy":1, // 字幕有無(1:ON、defaultはユーザー設定)
"controls":1 // コントロール有無(default:1)
}
}
);
}else{
player.loadVideoById(videoID);
}
}
function onPlayerReady(event){
event.target.playVideo(); /* 動画再生 */
}
function onPlayerApiChange(event){
ccFontsizeChange();
}
$("input:radio[name=r]").click(function(){
ccFontsizeChange();
});
function ccFontsizeChange(){
var size=$('input:radio[name=r]:checked').val();
dbg("size:"+size);
player.setOption("cc","fontSize",size);
}
function dbg(str){
if(window.console && window.console.log){
console.log(str);
}
}
});
</script>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<h2>YouTube IFrame API：字幕付き動画一覧表示＋字幕のフォントサイズ変更</h2>
<p>字幕のフォントサイズ：
<label id="r1"><input type="radio" id="r1" name="r" value="-1">-1</label>
<label id="r2"><input type="radio" id="r2" name="r" value="0" checked>0(default)</label>
<label id="r3"><input type="radio" id="r3" name="r" value="1">1</label>
<label id="r4"><input type="radio" id="r4" name="r" value="2">2</label>
<label id="r5"><input type="radio" id="r5" name="r" value="3">3</label>
</p>
<div id="playerbox"><div id='player'><!-- 動画プレーヤーの埋め込み --></div></div>
<p>字幕が付いている動画（クッキング）</p>
<ul id="videos"></ul>
</div>
</body>
</html>
iframe要素への取得と変更
2012/11/18
プレーヤーのサイズを設定します。
※player＝埋め込みオブジェクトID
| 関数 | 説明 |
|---|---|
| player.getIframe():Object | 埋め込まれているiframe要素のDOMノードを取得。 |
| player.destroy():Void | プレーヤーを含むiframe要素を削除。 |
設置サンプルサンプルを見る
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>設置サンプル：YouTube IFrame API：iframeの取得と削除</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<style>
#playerbox { width:640px; height:390px; margin-bottom:10px; }
#status { width:640px; height:3em; margin-bottom:10px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function(){
var player,timer;
var videoID="XfkXW49bXfo";
/* IFrame Player APIのコードをロード */
function fGetScript(){
$.ajax({
url:"http://www.youtube.com/player_api/",
dataType:"script",
success:function(data){
//dbg("done");
},
error:function(xhr, status, thrown) {
dbg(xhr);
fGetScript();
}
});
}
fGetScript();
/* プレーヤーの準備完了時 */
window.onYouTubeIframeAPIReady=function() {
dbg("onYouTubeIframeAPIReady");
loadPlayer(videoID);
}
/* プレーヤー生成 */
function loadPlayer(videoID) {
dbg("loadPlayer("+videoID+")");
player = new YT.Player(
'player',{
width: '640', /* 動画プレーヤーの幅 */
height: '390', /* 動画プレーヤーの高さ */
videoId: videoID, /* YouTube動画ID */
events: { /* イベント */
"onStateChange": onPlayerStateChange /* 動画プレーヤーのステータス変更 */
},
playerVars: {
"rel":1, // 関連動画の有無(default:1)
"showinfo":0, // 動画情報表示(default:1)
"controls":1 // コントロール有無(default:1)
}
}
);
$("#playerbox").html(player.getIframe());
dbg(player.getIframe());
}
function onPlayerStateChange(event) {
dbg(event.data);
}
$("#btn_destroy").click(function(e){
player.destroy();
return false;
});
function dbg(str){
$("#debuglog").val(str+"\n"+$("#debuglog").val());
if(window.console && window.console.log){
console.log(str);
}
}
});
</script>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<h2>YouTube IFrame API：iframeの取得と削除</h2>
<div id="playerbox"><div id='player'><!-- 動画プレーヤーの埋め込み --></div></div>
<p><a href="#" id="btn_destroy">iframeを削除する</a></p>
<textarea id="debuglog" style="width:630px;height:300px;"></textarea>
</div>
</body>
</html>