Videoタグでのループ再生に潜む闇・・・
～無限課金編～

こんにちは、Hersey と申します。

滅多に表舞台には出ないのですが、
今回は引っ張り出されてきました。

ふつつかものですが、
どうぞよろしくお願いします。

ネット黎明期に起きた悲しい重課金事件

まず始めに少し昔話をさせてもらいます。

画像1枚表示するのにも苦労しました・・

今から26年ほど前、インターネットが世間に普及し始めて間もない頃は、
今とは比較にならないくらい、それはそれは回線速度が遅かったです。

SLAM DUNK の作者、井上雄彦先生が当時Web上で連載していた漫画、
「BUZZER BEATER」を読みたくて掲載サイトへアクセスすると・・・
画像1枚を表示するのに数分かかるなんてことはザラにありました。

その当時最もナウいブラウザであった ネットスケープナビゲーター の画面内にて、
今では考えられませんが、まず画像がかなり粗いモザイクのような状態で ドーンと表示された後、
上の方から数行ごとに画像が少しずつ表示されていく・・・
のを気長に待ち続ける必要がありました。

画像表示が完了するまでに時間を持て余すので
仕方なく腹筋したり、腕立て伏せしてみたり、
などを画像1枚表示するごとに繰り返していました。

当時のネット接続料金が・・・

当時はまだ、光回線なんて無かった時代です。
ネット接続するには電話回線を通して ダイアルアップ接続 していました。
初期の頃は、ネット利用中は他の用途で電話をかけることができず、
その間、電話の通話料金として課金されていました。

それでも テレホーダイ と言われる救済処置もあり、
深夜時間帯であれば、定額でネット接続できたのですが・・・、

海外から帰国直後の兄上が日本のルールを知らずに、時間を気にせずネット利用していたら、
その月の通話料金に 6万円以上 請求されて、 父上がマジギレした👿 事件も発生しました。  

そして世間は様変わりし・・・

その後ネット回線は劇的に速くなり、画像は一瞬で表示できて当たり前。
YouTubeに代表されるように、大量の動画コンテンツを扱うサイトも出現しました。

ネット接続料金も、PC環境では基本的に定額料金で常時接続が当たり前になり、
兄上が引き起こした悲しい事件は、もう起きることは無いと思っていました。

ところが最近、その当時を思い出して背筋が凍る出来事がありました。

動画ループ再生にて事件発生

思い出に浸りすぎて本題を忘れてしまいそうでした。
時を現代に戻します。

開発が完了して公開済みの、とあるWebサイトのお話です。
そのサイトではトップページの最上部、つまりサイトへの訪問者が
まず初めに見る位置に、動画を配置しています。

その動画はループ再生しているので、動画の最後まで再生されると
自動的に最初に戻って再生を繰り返します。

まあ、他のサイトでも割と見かける構成なので特に気にしていませんでした。

衝撃の報告

ある日、サイトの管理者から
「サイトのデータ転送量が、すんごいことになっているんですけど？」
と連絡がありました。

え？どう言うことでしょう？

「ブラウザの解析ツールで確認すると、トップページの動画ファイルが
繰り返しダウンロードされてしまっています。」

いやそんなまさか。動画のループ再生って、ループを繰り返すごとに
毎回動画をダウンロードするんですか？
そんなことが起きていたら、世の中のWebサイトは大変なことになっていますよ。

そう思いながら恐る恐るトップページのネットワーク転送量を確認すると・・・。

ホンマに繰り返しダウンロードされているやん！！！！

（注： 上記画像は実際に問題発生したサイトのものではありません。
　　　 後ほど再現検証した際のものですのであしからず・・・）

従量課金制とは

サイトを運用しているサーバーの契約内容にもよりますが、
従量課金制の場合、サイトの使用量によって金額が変動します。

動画のようなコンテンツファイルの場合、簡単に言うと
ファイルストレージの使用容量、読み書き回数、そして
データ転送量 に比例してサーバーの契約者（サイトの運営者）が課金されます。

動画ループ再生の件で連絡を受けたサイトは と言うと・・・

はい、従量課金制です。 😆 

無限課金の恐れ

このままではトップページを開きっ放しにしているだけで
動画が無限ループ再生され続けて、サイト利用料が無限ループ課金され続けます。

ちなみに、何回かループ再生された後に ネット接続を無効化すると動画の再生が止まり、
再びネット接続を有効化すると動画が再生されるので、
やはりサーバーから繰り返しダウンロードされてしまっているようです。

また、スマホユーザーに対しては、Wi-Fi環境以外でアクセスしている
閲覧者の パケ死 を招いてしまいます。

原因究明

これは早く解決策を見つけなければ。

当初は、インフラ側の問題なのか？ HTMLコード記述の問題なのか？ Webアプリの問題なのか？
何が原因か見当が付きませんでした。

HTMLコードの確認

まず、HTMLコードを確認すると下記のような <video> タグを記述して、動画をループ再生しています。

<video src="/TestVideo_35sec.mp4" autoplay="" loop="" muted="" playsinline=""></video>

コードの記述に特に問題は無さそう・・・。

Chromiumソースのバグ管を確認

アテも無くネットで検索していると・・・、
以下のページにたどり着きました。
https://bugs.chromium.org/p/chromium/issues/detail?id=680063

Chrome・Edge などに代表される Chromium系ブラウザの、
基となるソースコードのバグ管理ページですね。
拝読すると、断片的な情報ですが 以下のような議論が行われた形跡があります。

・動画がループ再生される度に新しい取得要求が送信されているように見える。
・サイズの大きい動画ファイルで発生しているのでは。
・新しいブラウザバージョンでは問題発生しなくなった。
　⇒いや、まだ発生している。

どうやら、Chromium系ブラウザで発生する既知のバグとのこと？

バグ管のステータスが「完了（対応しない）」になっているのが気になります。。。
2017年当時の情報ですが、元号が令和に変わった現在でも直っていないのか・・？

半信半疑ながらも実証

さっそく動作検証してみました。
Chrome・Edge 2種類のブラウザに対し、同じHTMLコードにて、
対象動画ファイル（mp4形式）のパス部分のみを変更して確認しました。

その結果、動画の長さとファイルサイズが大きくなるほど、
繰り返しダウンロードする現象が発生しやすいように見受けました。

以下は目安とお考え下さい。

※筆者の環境で試した際の結果です。
ブラウザバージョンや、その他環境によって変動する可能性がありますので、ご参考程度にお考え下さい。
サイトに組み込む際は運用予定の環境にて、予め挙動をご確認下さい。

なお、 「Chromium系ではない」 ブラウザの Firefox にて
同じ条件の検証を行ったところ、繰り返しダウンロードされる現象は
一切発生しませんでした。

まとめ

現時点では、Chromium系ブラウザで表示する以上は避けられない問題・・・のようです。

妥協案として、

などの方法が考えられます。

<video> タグで動画をループ再生する際は、ご留意ください。

ちなみに当社、ロジカルスタジオの コーポレートサイト も
トップページで動画ループ再生していますが、無限課金されませんのでご安心ください！ 😀 

また、下記採用サイトでも動画ループ再生しています！
当社マスコットキャラクターの ロージー＆カール がお出迎しますので、是非ご覧ください！
（ロージー＆カール と一緒にお仕事をしたいと感じたあなたは、ご応募下さい。お待ちしています。）