コーディングメソドロジー
第110回 YouTube動画を再読み込みなしでシームレスにループさせる

公式の手法によるループ再生の問題点

ページにYouTube動画を設置する場合、大きく分けて以下の2通りが挙げられます。
1. iFrameによる埋め込み
2. IFlame Player APIを使った埋め込み

どちらの方法でも「loop」というパラメータが用意されているので単純にループ再生をさせることは容易です。
しかし、この方法は現時点の仕様上、ループ毎に再読み込みが発生してしまいます（図1）。
再生時間の長い動画を使用するならばさほど大きな問題にならないかもしれませんが、代わりに再生の負荷が大きくなってしまいます。また、再生時間の長い動画を必ずしも用意できるとは限りません。逆に再生時間の短い動画を背景動画として使う場合、負荷は軽くなりますがループ毎に発生する再読み込みの表示が頻繁に見えてしまうので見栄えが悪くなってしまいます。

IFlame Player API + JavaScript の擬似ループ処理でシームレスループを実現させる

YouTube動画埋め込みにはIFlame Player APIを使用します。
そこに「3.JavaScript（code1）」のような擬似ループ再生の処理を追加することで再読み込みなしでループが実現できます。

1. html

2. APIを読み込む

3. JavaScript（5秒の動画の場合）

解説

赤字箇所が実装のポイントです。
「seekTo」で任意のキーフレームの位置にジャンプすることができます。今回の場合は、0 を指定しているので冒頭に移動させています。
この処理を「setInterval」で動画の再生時間毎に繰り返し実行させています。つまり、動画終了直前に0 秒の位置に繰り返し巻き戻しをさせています。この擬似ループ処理を加えることで再読み込みの発生しないYouTube のループ再生を実現することができます。