LoginSignup
1
3

More than 5 years have passed since last update.

videoタグで動画をループさせた際、都度リクエストを送信する問題

Last updated at Posted at 2017-04-18

videoタグで動画をループさせた際、一部ブラウザで都度リクエストを送信する事象が存在します。

スクリーンショット 2017-04-08 14.26.17.png

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を利用するほうが良いでしょう。

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3