YouTubeのプレイヤーAPIを使ってみた【JavaScript】

公開: 2015-01-22 00:51
更新: 2016-04-29 06:02

どうもこんにちは。あっきぃです。
最近YouTubeの動画プレイヤーをコードから操作したい感じで震えが止まらなくなってしまったので、今回は「YouTube JavaScript Player API」を使ってみようと思います。




1.YouTubeを再生する要素を追加

いい感じのIDを振っておきましょう。

<div id="player1"></div>



2.JSを書きます。

先ほどのタグの下の位置で、
<script></script>の中に書いてください。(上でもいいけど...)

var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var ytplayer;
function onYouTubeIframeAPIReady() {
        ytplayer = new YT.Player('player1', {
                height: '390',
                width: '640',
                videoId: '87wf45zW5NA',
                events: {
                        'onReady': onPlayerReady,
                        'onStateChange': onPlayerStateChange
                }
        });
}

function onPlayerReady(event) {

}

function onPlayerStateChange(event) {

}

とりあえずこれでOKです。

いくつか関数が出て来てきたのでそれらを見ていきましょう。





onYouTubeIframeAPIReady

www.youtube.com/iframe_apiの読み込みが完了したら呼ばれる関数です。

var ytplayer;
function onYouTubeIframeAPIReady() {
        ytplayer = new YT.Player('player1', {
                height: '390',
                width: '640',
                videoId: '87wf45zW5NA',
                events: {
                        'onReady': onPlayerReady,
                        'onStateChange': onPlayerStateChange
                }
        });
}

今回は動画ID「87wf45zW5NA」の動画を読み込み、
id="player1"のdiv要素とプレイヤー入れ替え、ytplayerの変数の中にしまってます。

またここで「onReady」と「onStateChange」のイベント先の関数をセットしていまふ。





onPlayerReady

プレイヤーが再生出来る状態になった時に呼ばれるようにした関数です。

function onPlayerReady(event) {

}

例えば次のように書けば

function onPlayerReady(event) {
        ytplayer.playVideo();
}

自動再生することになります。

(※スマホでは自動再生は出来ません。)



プレイヤーが複数あり、
個別に対応したい場合は

function onPlayerReady(event) {
        event.target.playVideo();
}

のようにevent.targetから各々のプレイヤーを取得できます。



プレイヤーを識別するときは

function onPlayerReady(event) {
        var player = event.target;
        var obj = player.getIframe();
}

これで<iframe>のノードを返してくれます。





onPlayerStateChange

プレイヤーの状態が変わったときに呼ばれるようにした関数です。

function onPlayerStateChange(event) {

}

状態の変化は次の5種類

function onPlayerStateChange(event) {
        var state = ytplayer.getPlayerState();
        //終了したとき
        if(state == YT.PlayerState.ENDED) {
                
        }
        //再生したとき
        else if(state == YT.PlayerState.PLAYING) {
        
        }
        //停止したとき
        else if(state == YT.PlayerState.PAUSED) {
        
        }
        //バッファリング始めたとき
        else if(state == YT.PlayerState.BUFFERING) {
        
        }
        //頭出ししたとき
        else if(state == YT.PlayerState.CUED) {
        
        }
}

例えば次のように書けば

function onPlayerStateChange(event) {
        var state = ytplayer.getPlayerState();
        //停止したとき
        if(state == YT.PlayerState.PAUSED) {
                ytplayer.playVideo();
        }
        //終了したとき
        else if(state == YT.PlayerState.ENDED) {
                ytplayer.playVideo();                
        }
}

止めたくても止められないプレイヤーの完成です。

てへぺろっ



プレイヤーが複数あり、
個別に対応したい場合は

function onPlayerStateChange(event) {
        var state = event.data;
}

event.dataから状態が取得できます。





とりあえず以上です。

これだけで何か1つアプリが作れそうなので後で何か作ってみようかなと思います。



さらに詳しい情報はこちらから

⇒ iframe 組み込みの YouTube Player API リファレンス - YouTube — Google Developers



この記事をシェア
この記事にコメントする
書き込む
あっきぃ(@appstars_aki)
Web、iOSなフリーランサーです。好きなものはお寿司です。でもお寿司は高いので普段は雑草とか拾ったドングリを食べています。お仕事や意味もなく毎月お小遣いをくれる人を探してます。

お仕事の依頼や自分で作ったアプリのレビューを希望しちゃう方はaki@appstars.jpまでご連絡ください。