[JavaScript]イベントハンドラ"canplaythrough"を使用し、読み込んだファイルを再生しても途中で止まる

Question

[OS]
Android5

[ブラウザ]
ブラウザ(デフォルトで入っているソフト)

で下記のJavaScriptを実行しました。
途中で動画が止まることがあります。
"canplaythrough"は
「そのままの条件で再生した場合、最期まで止まらずに再生できる状態」
であるという認識なのですが、合っていますでしょうか？

また、止まる原因として考えられるのは
・端末スペック
・回線の速度
などが可能性高いでしょうか？

<video id="video_file" src="ooo.mp4"></video>

var video_file = document.getElementById('video_file');

video_file.addEventListener("canplaythrough", function() {
  video_file.currentTime = 0
  video_file.play();
}

Answer 1

mdnでのドキュメントによれば

https://developer.mozilla.org/en-US/docs/Web/Events/canplaythrough

The canplaythrough event is fired when the user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.

とあるので, 正確には
「そのままの条件で再生した場合、最期まで止まらずに再生できると判断された状態」
であり, 動画再生が止まらないことを保証しているわけではありません.

従って, マシンスペックが不足している場合や, 部分的に動画のデコード負荷が高い場合, バッググラウンドの負荷が高まった場合, 通信回線が再生後に極端に狭まった場合, 転送されたデータにエラーが含まれていた場合など様々な要因で動画は停止(フレームスキップ)しえます.

Comments

[maru]

ご返信有難うございます。
もう一つ質問ですが”canplaythrough”が認識されたにも関わらず、動画の再生が止まったりカクカクするのをJavaScript側で修正するのは難しいでしょうか？

[defghi1977]

難しいと言うか, 具体的な対処策についてはわかりません. もしくは動画そのものを複数用意しておき, 「高画質ー高スペックー高速通信環境むけ」と「低画質ー低スペックー低速通信環境むけ」といったように選択可能とすることでしょうか

[defghi1977]

定期的にcurrentTimeプロパティ(再生位置)を観察し, 実際の経過時間と比較することで再生がもたついていることを検知することは出来るかもしれません.