Web上でHLSを再生する

準備

##HLSファイルはffmpegで作成する

1. ffmpegのインストールは別記事参照
   ffmpegインストール

2. ffmegでmp4からm3u8,tsファイルを作成するのは下記参照
   ffmpeg を使って mp4 を HLS に変換する

コードを記述する

1. 下記を参考にhls.jsを利用して再生用のhtmlを作成
   おすすめhls web player hls.jsを使ってみる
   動画をストリーミング配信する方法
   ※こちらの方がわかりやす。『３．ストリーミング配信の方法』を参照

<h1>hls-video</h1>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="video_smaple" controls>
<script>
  if(Hls.isSupported()) {
    var video = document.getElementById('video_smaple');
    var hls = new Hls();
    hls.loadSource('./video/video.m3u8'); //ここで.m3u8ファイルを指定
    hls.attachMedia(video);
 }
</script>

上記を実施すると"Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first."が発生し再生できない
※変更により自動再生しないのでエラー発生しない

対策

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first #1991を参考にミュートで実行。
※参考　Autoplay Policy Changes

※ミュートの解除は今後の課題とする

参考

hls.jsでお手軽 動画・生配信視聴プレイヤー作ってみた 【お盆休みの自由研究2019その1】
HLS（HTTP Live Streaming）で動画を配信・再生してみよう
【PDF】FFmpegの本

#hlsをmp4に変換する
HLS(m3u8+ts)形式の動画をFFmpegを使ってmp4に一発変換する方法

#ライブ動画配信プロトコル（HTTP Live Streaming, HLS）の概要図解メモ（AbemaTV／FRESH!）

#暗号化されたHLSストリームをブラウザのHAR経由で保存する