HTML5、videoタグでsrcが中途半端に読み込まれるのを検知するには？

Question

Gatsby.jsでサイトを作成中。

<video
  type="video/mp4"
  preload="metadata"
  controls
  src='http://example.com/xxx.mp4'
/>

上記のようなvideoタグでサイトの中に動画を表示しています。

ときどきですが、動画が正常に再生されないことがあります。
30秒の動画なのに、0～1秒程度だけ再生して止まる。
metadataは読み込まれていて、動画が30秒であることはcontrolsの表示から分かる。
0～1秒再生して止まったとき、シークバーが0～1秒の所で止まるのではなく、30秒の地点まで一気に飛ぶ。

F5（再読み込み）をすると動画は正常に再生できるようになる。

addEventListener('error', ...)でエラーを捕まえようとしたが、何も起こらず。

srcの読み込みに失敗するとerrorのイベントが発生するようなのですが、30秒の動画のうち0～1秒しか読み込みできていないのに、srcの読み込みは成功したものとして扱われているっぽい。

Chromeのデベロッパーツールで「Network」を見ると、mp4を読み込んでいる通信のstatusコードは206。
動画を30秒正常に表示できるときも206。
動画が1秒で止まるときも206。

問題発生時、document.createElement('video')でvideoタグを作り直してやると、正常に動画の再生が可能です。
そこで、「問題が発生したら」「videoタグを作り直す」という処理をしたいのですが、問題発生を検知する部分でつまづいております。

動画のsrcに指定したmp4が一部しか読み込まれなかったことをJavascriptで検知するにはどうすればいいでしょうか？

Answer 1

試したことはないですが、videoタグから読み込みエラーのイベントは取得できるようでした。ここらへんは試されましたか？？
http://www.htmq.com/video/

Comments

[teraha]

addEventListenrでerror、abort、stalledを監視していますが、これらのイベントは発生していません。

問題発生時にもplayやendedのイベントが発火するので、正常に再生されて(playイベント)、動画が最後まで到達した(ended)とみなされています。

suspendやwaitingなど、ご紹介いただいたリンクの全てのイベントにリスナーを設定しました。
しかし、suspendは問題があるときもないときも記録され、他のイベントも同様なので、問題発生を切り分けることはできませんでした。

[runnynose]

謎ですね????

> 問題発生時、document.createElement('video')でvideoタグを作り直してやると、正常に動画の再生が可能です。

問題発生しなくても、あらかじめjsでvideoタグ生成した場合はうまくいくんですかね？？

[teraha]

あらかじめjsでvideoタグ生成しても同じです。

ページ自体を再読み込みしても動画は再生できるようになります。

問題は毎回ではなく、偶発的に発生します。
ページの再読み込み、videoタグを再作成などはsrcの読み込みをやり直しさせているだけです。

[runnynose]

なるほど。エラーを検知することとはそれてしまうのですが、動画のプリロードみたいなことができたら止まることが無さそうな感覚がしました。

一応、videoタグにpreloadという属性はあるものの、これはうまくいかなそうかお????
http://www.htmq.com/html5/004.shtml

あとはlinkタグで行けるか??とおもいきや、videoタグは対応してないかもしれない。。。
https://search.yahoo.co.jp/amp/s/wk-partners.co.jp/homepage/blog/hpseisaku/htmlcss/preload/amp/%3Fusqp%3Dmq331AQIKAGwASCAAgM%253D

あとはストリーミング再生させないなんて方法もあるのでこれなら止まらずに行けるかもしれないです????(サイトの表示が遅くなる可能性ありそうですが。。。)

https://search.yahoo.co.jp/amp/s/hai3.net/blog/html5-video-tag-non-streaming/%3Famp%3D1%26usqp%3Dmq331AQIKAGwASCAAgM%253D

[teraha]

videoタグのpreloadは、もともと`metadata`に設定してあります。
`auto`に設定しても現象は変わらずです。

linkタグのpreloadは、仕様上ではas="video"は定義されていますが、一般的なブラウザでは未実装になっていました。

ストリーミングさせない方法は、運用上の問題で難しいです。
質問では30秒の動画と書きましたが、実際の運用では動画の長さは不定。
1時間（ファイルサイズ数GB）の動画などを扱う可能性もあるので、フルデータをダウンロードするまで再生が始まらないというのは現実的ではないです。

[runnynose]

再読み込みするとうまくいくなら、その他だと私ならタグが読み込まれた後に強制的にsrcを、再読み込みさせるしか思いつかないですね。。。
お力になれずにすんません。