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>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<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>