JavaScript
GitHub
動画再生
HLS
FlowPlayer

FlowPlayer+hls.jsでfragLoopLoadingError

最近動画再生プレイヤーとして、
OSSのFlowPlayerhls.jsを使っているのですが、
ちょっとハマったところがあったので備忘録兼、理解を深めるために記載。

概要

・FlowPlayer+hls.jsでのHLSのライブ動画配信で動画再生に失敗
・hls.jsのエラーとして以下が発生

[warn] > level controller,fragLoopLoadingError on live stream, discard
[warn] > mediaController: fragLoopLoadingError while loading frag,switch to IDLE state ...

tsファイルを取得する際に最初のtsファイルを取得後、
もう1度同じtsファイルをループして取得する事象が発生

原因

・githubのissueから以下の記事を発見 #Githubに非常に感謝
Infinite Frag Loop Loading Error on Live Stream

[log] > parsed video,PTS:[2.345,10.385],DTS:[2.145/10.225],nb:97
[log] > parsed audio,PTS:[0.000,10.124],DTS:[0.000/10.124],nb:436

用語 説明
PTS (presentation time stamp) PTSはいつ再生(表示)するのかを示したタイムスタンプのこと。再生開始後2秒の時点で表示しろとかそういうタイムスタンプ
DTS(decoding time stamp) DTSはいつデコードするのかを示したタイムスタンプのこと。再生開始後1秒の時点でデコードしろとかそういうタイムスタンプ
nb ???

例では、キーフレームがフラグメントの開始から2.345秒後に始まるため、
最初のキーフレームより前のtsファイルはドロップされるようである。
この差分により、最初のtsファイルのロードに失敗し、再度最初のtsファイルのリロードにより、
hls.jsのロジックを混乱させて、fragLoopLoadingErrorで動画再生に失敗する。

解決方法

映像のキーフレーム間隔をTS秒数と合わせることで解決
HLSでの映像配信を行う際には、キーフレーム間隔をtsファイルの秒数と合わせることが非常に重要。
ABRを行う場合でも、キーフレーム間隔を合わせないと映像再生に失敗する場合もある。

映像技術は調べても解決方法が見つからないことが多いので、自分で技術ノウハウを蓄積すること。
あと、Githubのissueはしっかりと見るようにすること。

#殴り書きなのであとで内容直します。