【API】Youtubeプレーヤーが自由自在！『YouTube JavaScript Player API』

公開日：2013年3月3日

今回はYouTube JavaScript Player APIを触ってみました。
何がしたかったのかというと、サイトに埋め込んだYouTubeプレーヤーってJSで制御出来ないのかなーと思いまして。

調べてみたところこれを使えば、
自分で作ったボタンで再生させたり停止させたり出来るらしいです。
個人的に一番魅力的だったのは、.getCurrentTime()で経過秒数が取れるコト。
絶対楽しいことに使えると思うんですよねー。小数点以下の秒数まで取れるっぽいし。

さて、自分の備忘録も兼ねて使い方をまとめてみようと思います。

１.　swfobject.jsをダウンロード

このAPIを正しく動作させるには見る人の環境にFlash Player 8以降が入ってる必要があるためだそうです。ちょっと気になってるのは、もしかしてこのAPIってiPadとかでは動かないのかなーなんてところです。そのうち検証しようと思います。

２.　動画のYouTubeIDを用意して埋め込む

使用したい動画のIDを用意します。IDは、下記でv=となっている部分です。
http://www.youtube.com/watch?v=XXXXXXXXXX
そして先ほど読み込んだSWFObjectを使用してYouTubeプレーヤーを埋め込むわけですが、ここで１つ注意するのは動画を指定するURLにパラメータ enablejsapi=1 を追加しておく必要があるってこと。
これを追加しないとAPIを使用することが出来ません。

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
11
12
13
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF(
    "http://www.youtube.com/v/"ここに使用する動画IDを入れる"?enablejsapi=1",
    "ytapiplayer",　//埋め込みプレーヤーを入れる場所のID？なんでも良い。
    "425",　//プレーヤーの幅
    "356",　//プレーヤーの高さ
    "8",　//コンテンツを読み込むのに最低限必要なプレーヤーvr。
    null,　//SWF を高速インストールするためのURL？省略可。
    null,　//FlashVars を名前と値の組？省略可。
    params,　//埋め込みオブジェクトのパラメータ？省略可。
    atts　//埋め込みオブジェクトの属性。idとか省略可。
);

※？がついている部分は僕にもよくわかってない部分だったり…。詳しい方教えていただけるととても助かります…。

SyntaxHighlighterについて
1
2
<div id="ytapiplayer">
</div>

埋め込むためのjsはこんな感じで、HTMLの方には以下のように埋め込み先のdivだけ用意します。
今回ならid=”ytapiplayer”のdivですね。

３.　JSでプレーヤーを制御しよう！

埋め込みが終わったところでいよいよプレーヤーを制御するための記述をしていきましょう。
まず、htmlでクリックするための要素を作ります。id指定なので、buttonでもpでもimgでもとりあえずなんでも良し。
あ、idもここではplay,pose,stopとしていますが、任意のもので大丈夫だと思います。

SyntaxHighlighterについて
1
2
3
<p id="play">再生ボタン</p>
<p id="pose">ポーズボタン</p>
<p id="stop">停止ボタン</p>

さて、APIの記述ですがここでは楽に書くためにjQueryを使わせてもらいます。

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
//プレーヤーを取得します。ただ、ここのgetElementByIdはjQueryで書いたらなぜかダメっぽいです（僕は動かなかった）
var ytplayer ='';
    function onYouTubePlayerReady(player) {
    ytplayer = document.getElementById("myytplayer");
}
 
//プレーヤーの制御
$("#play").click(function(){ytplayer.playVideo();});//再生用
$("#pose")toggle(function(){ytplayer.pauseVideo();},function(){ytplayer.playVideo();});//一時停止、再生用
$("#stop").click(function(){ytplayer.stopVideo();});//停止用

これで指定したidの要素をクリックしたら、再生、一時停止、停止が出来るようになると思います。
jQueryで.animateや.fadeInを使うのと書き方はほとんど一緒！これは便利です。
他にも同じ要領で、音量や画質などの動画情報を取得、操作出来るので、詳しくはYouTube JavaScript Player API リファレンスを見てみるのがお勧めです。

４.　コードの通し

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<head>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>  
<script type="text/javascript">
var params = { allowScriptAccess:"always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF(
    "http://www.youtube.com/v/動画ID?enablejsapi=1&version=3&playerapiid=ytplayer",
     "ytapiplayer",
    "300",
    "220",
    "8",
    null,
    null,
    params,
    atts
);
 
var ytplayer ='';
    function onYouTubePlayerReady(player) {
    ytplayer = document.getElementById("myytplayer");
}
 
$(function(){
    $("#play").click(function(){ytplayer.playVideo();});
    $("#pose").toggle(function(){ytplayer.pauseVideo();},function(){ytplayer.playVideo();});
    $("#stop").click(function(){ytplayer.stopVideo();});
});
</script>
</head>
<body>
<div id="ytapiplayer">
</div><!-- #ytapiplayer -->
 
<p id="play">再生ボタン</p>
<p id="pose">ポーズボタン</p>
<p id="stop">停止ボタン</p>
</body>

お世話になったサイト様：
YouTube JavaScript Player API リファレンス
WEB Drawer


YouTubeでビジネスを加速する方法
ー Amazon.co.jpで買う

”php”タグの他の記事を見る