サイトに動画を設置する際や、Youtubeにアップされている動画を紹介したい場合など、
Youtubeの埋め込みを使って表示する事があるかと思います。
この際にJavaScriptを使って制御ができるYouTube JavaScript Player APIというものがあり、設置をしたので
そちらの実装方法のメモです。
これを使うと自分が作ったボタンで再生や停止が出来るようになります。(他にもいろいろ出来ると思います)
SWFObjectを使って動画を読み込む
動画を埋め込む際は、動画の共有にある「埋め込みコード」でiframeかobjectのタグをサイト内に入れますが、
APIを使うときはFlashなどを表示する時によく使う「SWFObject」を使用します。このJSを使わなくてもできるそうですが、
このAPIがFlash Player8からしか対応してないので、この「SWFObject」を使ってFlash Playerのバージョンを検出することをリファレンスサイトですすめています。
設置は以下のような感じで
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
var url = "http://www.youtube.com/v/動画のID?enablejsapi=1&playerapiid=ytplayer";
swfobject.embedSWF(url, "player", "500", "400", "8", null, null, params, atts);
</script>
JSファイルまでのパスや、動画URL・動画のサイズ・パラメータなどは適宜変えて下さい。
制御するJSを記述する
次に制御をするJSを記述します。自分はjQueryを使って書いています。
<script type="text/javascript">
/* プレーヤーへの参照を取得 */
var ytplayer ='';
function onYouTubePlayerReady(player) {
ytplayer = document.getElementById("myytplayer");
}
/* 制御するJS */
$(function(){
/* idがplayのものをクリックすると動画の再生と一時停止 */
$("#play").toggle(function(){
if(ytplayer) ytplayer.playVideo();
},function(){
if(ytplayer) ytplayer.pauseVideo();
});
/* idがstopのものをクリックすると動画の停止 */
$('#stop').click(function(){
if(ytplayer) ytplayer.stopVideo();
});
/* 動画が再生中のときに処理したい記述をhogehogeに記述する例 */
if(ytplayer){
var movieStatus = ytplayer.getPlayerState();
if(movieStatus == 1) {
hogehoge
}
}
});
</script>
使える関数は以下のサイトに載っています。
サンプル
サンプルは以下のページにあります。実際の挙動など確認できます。
コメント