HLSとは
動画をストリーミング配信するためのApple社が開発した規格です。インターネット上で動画を配信する際に、視聴者のネットワーク状況に合わせて最適な品質の動画を提供できます。
HLSは、ライブ配信だけでなく、録画された動画の配信（オンデマンド配信）にも使用されます。動画を小さなチャンク（数秒間の動画データ）に分割し、それぞれを別々に配信します。
ブラウザでHLSを配信・再生する仕組み
そもそもHLSをブラウザの標準機能としてvideoタグで再生できる(=ネイティブ対応している)のは以下のような一部のブラウザのみ。
- Microsoft Edge
- macOS Safari
- iOS Safari
- Android Chrome
- Android Firefox
ネイティブ対応していないブラウザでは、Media Source Extensions (以下MSE)という仕組みを使うことで、再生することができます。
ざっくりいうと、「HLSのプレイリストを解析、記載されているメディアセグメントを取得してvideoタグのソースに突っ込む」処理をJavaScriptで書ける、というHTML5の機能です。
最近のブラウザであれば、iOS Safariの除いて対応しています。IEも 11 以上（Windows 7版を除く）であれば利用できます。
ネイティブ対応しているブラウザでも、そうでないブラウザとの挙動を揃えるなどの目的で MSE を使うこともあります。
react-playerでHLS配信・再生をする仕組み
前述した通り、iOS Safariの除いてMSEで再生できる。
そのため、iOS Safari以外の場合は、MSE(具体的にはHLS.js)を使って配信・再生の仕組みを構築している。
iOS Safariの場合は、ブラウザの標準機能を使ってHLSの配信・再生ができるため、その仕組みを使うようにしている。
Chromeの検証モード(UA iOS)で動作確認する際の注意点
検証モードでiPhone(iOS)をUAとしている場合、ライブラリとしてはブラウザのネイティブの機能を使ってビデオを再生しようとするが、実態はchromeであるためブラウザのネイティブ機能ではビデオが再生できないということになる。
こちらのfileの設定をすることで、この問題は解消可能。