• コーディング ファクトリーHOME
  • Coding Methodology
  • 第110回 YouTube動画を再読み込みなしでシームレスにループさせる

コーディングメソドロジー

第110回 YouTube動画を再読み込みなしでシームレスにループさせる

YouTube 動画を全画面背景として利用することが増えてきました。今回は再読み込みをさせずに動画をループさせる方法をご紹介します。

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

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

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

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

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

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

1. html
1. html
2. APIを読み込む
2. APIを読み込む
3. JavaScript(5秒の動画の場合)
3. JavaScript(5秒の動画の場合)
解説

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

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム