こんにちは、@kz_moritaです。 最近動画周りの実装をすることが多かったのですが、今日は HLS (Htttp Live Streaming) 動画のブラウザの対応状況についてまとめてみます。 HLS のブラウザのサポート状況 HLS 形式の動画を再生するには、以下の２つの条件のいずれかを満たす必要があります。 ブラウザがネイティブで HLS の再生をサポートしている Polyfill 実装のライブラリを使用できる 各ケースについて簡単にまとめます。 ブラウザがネイティブでサポートしている HLS 動画の再生をデフォルトでサポートしているのは以下のブラウザです。 Safari (iOS, macOS etc…) Windows Edge Polyfill 実装を利用できる 今回は、Polyfill 実装のライブラリを Hls.js とします。 https://github.com/video-dev/hls.js Hls.js を使用するためには、ブラウザが Media Source Extensions に対応している必要があります。 詳しくは以下を参照してみてください。 https://caniuse.com/#feat=mediasource 具体的に Hls.js を使用できないのは以下のようなブラウザたちです。 IE 6 ~ 10 Windows 7 以下の IE 11 iOS Safari (ネイティブで再生はできる) Opera mini Samsung Internet QQ Browser etc… iOS Safari について iOS Safari については、ネイティブで再生はできるのですが、