WEBページ上のYoutube埋込動画の再生速度を変更する方法（IFrame Player API）

Youtube動画をiframeタグで埋め込めば、WEBページで簡単に動画を見せる事ができます。

この動画の再生速度を自動的に変更するには、Youtubeが提供する専用API「IFrame Player API」を使います。

IFrame Player APIによりiframe内にJavascriptで様々なコントロール制御をする事が可能になります。

iframeで埋め込んだ動画の再生速度を変更したい

今回は、WEBページ上にiframeで埋め込まれたYoutube動画の再生速度を変更する方法についてご紹介します。

実際にクライアントから依頼があり実施した案件ですね。

今回はyoutube側に用意されている「youtube frame API」を使って、再生速度を2分の1に変更します。

自動で再生スピードがゆっくりになり、終了まで2倍の時間が掛かる様になる訳です。

このAPIを使う事で、再生速度以外にも様々な調整が可能になります。

WEBページへのYoutube動画埋め込み

WEBサイト上に埋め込んであるYoutube動画はよく目にしますよね。

Youtube動画の埋め込み方法には様々ありますが、一般的な手法の一つが「iframe」による埋め込みですね。

iframe埋め込み

以下がiframeを使った埋め込みコード例です。

<iframe width="100%" height="300" src="https://www.youtube.com/embed/EEpXtr5H15g?rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

上記のタグをHTMLソース上に貼る事で、Youtube動画が表示されます。

iframeのタグソース内に様々なパラメータが入っているのがわかりますね。

実際の動画埋め込み例

上記動画は再生速度をいじっていないので、通常のスピードで再生されます。

iframe内のコードによって、自動再生させたり停止位置を指定したりなどの操作が可能です。

iframeならページ内に複数埋め込む事ができるので、複数の動画を見せる事もできますね。

再生する速度を遅くしたい

今回クライアントから頂いた要望は、Youtubeの動画速度を「2分の1の速さにして欲しい」というものでした。

通常速度だとよくわからないため、スピードを落してわかりやすくしたいというのが主旨です。

動画自体が短いという事もあるのでしょう。

自動制御・ユーザー操作に依存しない

これは上記iframeのソース内に追記して対処できるものではありません。

Youtubeのチャンネル上であれば再生速度の調整はできますが、今回はiframeを通して動画を表示しているのでその機能はありません。

※そもそもユーザーに速度を変更する様な操作を強いること自体が変ですしね。

WEBページ上で動画再生した時に、自動的に速度が変わる必要がある訳です。

IFrame Player API

そこで今回はyoutube側が提供しているAPIを利用します。それが「IFrame Player API」です。

このAPIによりWEBサイト上のiframeを通して、YouTube動画をJavaScriptでコントロールできる様になります。

JavaScriptにより、再生動画の頭出しや、再生・一時停止、音量の調節、動画に関する情報取得など、複雑な操作が可能です。

その中に再生速度を調整する関数もありますので、これを利用していきます。

IFrame Player API設置例

それでは早速IFrame Player API（以下：iframe API）を実装していきます。

iframeのHTMLソースに少し手を加え、その後にscriptでJSコードを入れていきます。

そのscript内でiframe APIを起動させる形になります。

HTMLのiframeとscriptの記述

埋め込みiframeソース

まずはiframeでyoutube動画を埋め込みましょう。

iframeのHTMLソースはいつもとほぼ同じですが、APIを使うためにコードに少し追記をしていきます。

<iframe id="player" width="100%" height="300" src="https://www.youtube.com/embed/EEpXtr5H15g?enablejsapi=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

iframeコード上の注意

上記のコードで気を付けるのは、赤文字にしている2か所です。

1.id属性をつける

上記には、id="player"と属性を入れています。iframe自体を指定するid属性が必要になります。

2.enablejsapi=1をつける

さらに動画のパラメータ部分にenablejsapi=1をつける様にしましょう（他のパラメータがついていてもOKです）。

これでiframe APIのコントロール対象になります。

iframe APIスクリプト

以下のコードはiframeの埋め込みコードの後に記述して下さい。

iframeより前の位置に書かない様にしましょう。

JSコード

<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 player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { videoId: '-----------', //動画コードが入ります。 events: { 'onStateChange': onPlayerStateChange } }); } function onPlayerStateChange(event) { player.setPlaybackRate(0.5); } </script>

コードの解説

上記のscript部分は基本丸ごとコピーで問題ありませんが、動画IDやid属性部分は変更しましょう。

それでは詳しくコードを解説していきます。

ifame APIの読込

冒頭4行

まず冒頭の4行でiframe APIを呼び出ししています。

scriptタグを生成して、srcとしてhttps://www.youtube.com/iframe_apiを読み込んでいる訳ですね。

iframe APIからのJavascript命令

5行目で、変数playerを作っています。

onYouTubeIframeAPIReady()

6行目で、onYouTubeIframeAPIReady()で命令を出していきます。

new YT.Player('player'…の後ろの'player'部分に、設置したid属性の名称が入ります。

videoID:の部分には、埋め込んでいる動画のID部分をコピペして入れましょう。

次のevent:の部分で状態を操作する関数を実行しています。

ここで再生速度を変更している訳ですね。

動画再生と再生速度の設定

その下のfunctionで命令内容が構築されています。

ここで再生速度を半分（0.5）にしています。再生速度を2倍にするにはここに「2」を入れます。

再生速度を2分の1（スロー）にした動画例

上記はiframe埋め込み例で見せたものと同じ動画ですが、スロー再生なのがわかります。

8秒の動画ですが、再生終了まで実際には倍の時間が掛かります。

再生速度を変えたい動画が複数ある場合

先程の例はid属性を付けた動画1つに対して、再生速度をコントロールしていました。

しかし時には、同じページ上に再生速度を変えたい動画が複数ある場合もあります。

その際はiframeソースにそれぞれ別々のidを付けて、JSコード内でidごとにコントロールしていきます。

複数動画のAPIによるコントロール

では複数の動画の再生速度を「2分の1にする」一例を紹介します。

iframe埋め込みソース

<iframe id="player_a" width="100%" height="300" src="https://www.youtube.com/embed/EEpXtr5H15g?enablejsapi=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> <iframe id="player_b" width="100%" height="300" src="https://www.youtube.com/embed/EEpXtr5H15g?enablejsapi=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

1つ目のidはplayer_a、2つ目のidはplayer_bとしています。

この様にidは違うものをつける様にしましょう。いずれもenablejsapi=1の部分は共通です。

JSコード（2つの動画の再生速度を変更）

<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 player; var player2; function onYouTubeIframeAPIReady() { player = new YT.Player('player_a', { videoId: '---------', //player_aの動画id events: { 'onStateChange': onPlayerStateChange } }); player2 = new YT.Player('player_b', { videoId: '---------', //player_bの動画id events: { 'onStateChange': onPlayerStateChange2 } }); } function onPlayerStateChange(event) { player.setPlaybackRate(0.5); } function onPlayerStateChange2(event) { player2.setPlaybackRate(0.5); } </script>

複数動画用にどこをいじるか

まず、https://www.youtube.com/iframe_apiのAPI読込部分は共通です。

次にそれぞれ変数として「player」と「player2」を準備しています。

onYouTubeIframeAPIReady()の命令は1回で済ませたいので、その中でplayerとplayer2に対する命令を個別に書いています。

new YT.Player('player_a')への命令と、new YT.Player('player_b')への命令とがあり、それぞれにvideoIDの指定とeventsの指定がされています。

setPlaybackRateの動画対象は2つあります。

ですので、player向けとplayer2向けに別々に再生速度の変更命令を用意します。

onPlayerStateChangeとonPlayerStateChange2とが用意されている部分がそれにあたります。

一押し人気コーナー紹介