videoタグで動画をループさせた際、一部ブラウザで都度リクエストを送信する事象が存在します。
chromiumでも上記事象のイシューが上げられています。
https://bugs.chromium.org/p/chromium/issues/detail?id=680063
原因
おそらくレンジリクエストが原因なのではと・・
事象での影響
ネットワークの帯域を占有することになり、通信速度が低下します。表示速度などを意識しているサイトでは注意が必要でしょう。
対処方法
- YouTubeのAPIを利用する
- 動画の時間と容量を制限する
YouTubeのAPIを利用する
多くのサイトの動画はYouTubeを利用していると思うので、一番安全な手段だと思います。
動画の時間と容量を制限する
Videoタグを使用した場合でも動画の時間と容量を制限することで事象を回避できることがありました。
以下のサイトでは事象が起きておりません。容量が軽く、時間が短い動画はループの度にリクエストを送信することなく実現できそうです。
・動画再生時間と容量(10秒 3.67MB)
https://www.nissin.com/jp/
また、テストで以下の目安で動画を作成したところリクエストを投げることなくループが実現できました。
- 10秒→7M以下
- 20秒→5M以下
- 30秒→2.6M以下
30秒以上は画質の問題もあり、YouTubeを利用するほうが良いでしょう。