YouTube Player APIを使用したiframe動画の基本vol1 – 動画の設置と再生停止

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんにちは。toshikuraです。今回のTipsは【YouTube Player APIを使用したiframe動画の基本vol1 – 動画の設置と再生停止】です。少し前にvimeoAPIについて記事を書きましたのでYouTubePlayerAPIについても書いてみようかと思いました。内容は簡単ですができることも多いので覚えておいても損は無いかと思います。

まずはじめに

最初にYouTube Player APIを使用したiframe動画(YouTube Player API Reference for iframe Embeds)を使用するにあたってAPIを読み込んでおく必要があります。また今回のデモではコードを短くしたかったのでjQueryを使用しています(なくてもOKです)。

<script src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
var script = document.createElement( ‘script’ );
script.src = “//www.youtube.com/iframe_api”;
var firstScript = document.getElementsByTagName( ‘script’ )[ 0 ];
firstScript.parentNode.insertBefore( script , firstScript );
</script>

動画の設置

以下は再生・停止の対象となる動画設置のサンプルになります。設置にあたっては動画URLの【https://www.youtube.com/watch?v=fzzjgBAaWZw】のようなIDと追加先の要素が必要になります。

<script src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript">

var script = document.createElement( 'script' );
script.src = "//www.youtube.com/iframe_api";
var firstScript = document.getElementsByTagName( 'script' )[ 0 ];
firstScript.parentNode.insertBefore( script , firstScript );

var player;
var vid = 'fzzjgBAaWZw';
function onYouTubeIframeAPIReady(){
player = new YT.Player( 'player',{
width: '100%',
height: '500',
videoId: vid,
playerVars: {'showinfo': 0, 'autohide': 1, 'controls': 0, 'rel': 0, 'loop': 1},
events: {'onReady': onPlayerReady,'onStateChange': onPlayerStateChange}
});
}

</script>

<div id="player"></div>

動画の設置にあたってはplayerVarsにてループやコントロールや関連動画の表示/非表示が設定できます。ここでは個人的に使用頻度の高い設定をいくつかピックアップしますが、詳しくはYouTube 埋め込みプレーヤーとプレーヤーのパラメータ – YouTube — Google Developersをご参照ください。
 
 

パラメーター 概要 値(*デフォルト)
autohide 再生開始後のコントロールの表示/非表示 0 : 進行バーとプレーヤー コントロールは動画終了まで全画面表示
1 : 再生数秒後に、進行バーとプレーヤー コントロールが非表示
2 : 動画の進行バーの表示が消えますが、プレーヤー コントロールは表示(*)
autoplay 自動再生 0 : 自動再生無し(*)
1 : 自動再生
controls プレーヤー コントロールの表示/非表示 0 : プレーヤー コントロールは非表示
1 : プレーヤー コントロールは表示(*)
2 : プレーヤー コントロールは表示
loop ループの設定 0 : ループ無し(*)
1 : ループ
showinfo 動画のタイトルやユーザー情報等の表示/非表示 0 : 非表示
1 : 表示(*)
rel 関連動画の表示/非表示 0 : 非表示
1 : 表示(*)
theme テーマの設定 dark(*)
light

動画の再生

動画の設置はできましたが、まだ再生と停止はできません。これらのタイミングにはevents:{onReady:onPlayerReady,onStateChange:onPlayerStateChange}が関係しています。onReadyでは動画再生の準備ができしだい実行、onStateChangeでは動画再生状態の変化があった場合に実行となります。ここではonReadyを使用して動画再生の準備ができたらクリックで再生操作ができるように設定してみます。

HTML
<script type="text/javascript">

function onPlayerReady(){
$('.youtube_play').click(function(){
player.playVideo();
});
}
</script>
<div id="player"></div>
<a class="youtube_play" href="#">PLAY</a>

長くなるのでもろもろ割愛していますが、上記で再生の操作が行えます。

動画の停止

停止には一時停止と停止の2種類あります。

<script type="text/javascript">

function onPlayerReady(){
//一時停止
$('.youtube_pause').click(function(){
player.pauseVideo();
});
//停止
$('.youtube_stop').click(function(){
player.stopVideo();
});
}

</script>

<div id="player"></div>
<a class="youtube_pause" href="#">PAUSE</a>
<a class="youtube_stop" href="#">STOP</a>

またまた長くなるので割愛していますが、上記で停止の操作が行えます。割愛した部分もまとめると以下のようなコードになります。動作はデモをご確認ください。

まとめ

<script src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript">

var script = document.createElement( 'script' );
script.src = "//www.youtube.com/iframe_api";
var firstScript = document.getElementsByTagName( 'script' )[ 0 ];
firstScript.parentNode.insertBefore( script , firstScript );

var player;
var vid = 'fzzjgBAaWZw';
function onYouTubeIframeAPIReady(){
player = new YT.Player( 'player',{
width: '100%',
height: '500',
videoId: vid,
playerVars: {'showinfo': 0, 'autohide': 1, 'controls': 0, 'rel': 0, 'loop': 1},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}

function onPlayerStateChange(){
}

function onPlayerReady(){
//再生
$('.youtube_play').click(function(){
player.playVideo();
});
//一時停止
$('.youtube_pause').click(function(){
player.pauseVideo();
});
//停止
$('.youtube_stop').click(function(){
player.stopVideo();
});
}

</script>

<div id="player"></div>
<a class="youtube_play" href="#">PLAY</a>
<a class="youtube_pause" href="#">PAUSE</a>
<a class="youtube_stop" href="#">STOP</a>

以上になります。

参照:YouTube Player API Reference for iframe Embeds – YouTube — Google Developers
  :YouTube 埋め込みプレーヤーとプレーヤーのパラメータ – YouTube — Google Developers