HLS形式による動画のオンデマンド配信 の履歴(No.2)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• HLS形式による動画のオンデマンド配信 へ行く。
  • 1 (2020-10-18 (日) 01:17:54)
  • 2 (2020-10-18 (日) 01:41:22)

ＨＬＳ形式による動画のオンデマンド配信†

動画の準備†

1. 配信したい動画を準備する。（ここでは mp4 形式で保存）
2. ffmpeg をダウンロードし，動画と同じフォルダーに保存する。
3. 上記フォルダーでコマンドプロンプトを起動する。（フォルダーのアドレスバーに「cmd」と入力し⏎キーを押す。）

動画の変換（mp4 から HLS へ）†

1. コマンドプロンプトから，次のコマンドを入力する。

>ffmpeg -i [動画ファイル名].mp4 -c:v copy -c:a copy -f hls -hls_time 9 -hls_playlist_type vod -hls_segment_filename [動画ファイル名]%3d.ts [動画ファイル名].m3u8

※ この場合のセグメントタイムは９秒なので，１０分の動画なら６７ぐらいのファイル（拡張子 ts）が連番で作成される。

Ｗｅｂサーバーへの配置†

1. 作成された全てのファイル（［動画ファイル名]連番.tsと，［動画ファイル名].m3u8）をＷｅｂサーバーの任意のフォルダーに転送する。
2. HTMLファイル中に，次のように指定する。

<video src="http://.../[動画ファイル名].m3u8" ></video>

※ ＨＬＳ対応ブラウザ（Safari と Edge）は，これで再生可能になる。

hls.js の実装†

※ hls.js を使うと，ＨＬＳ非対応のブラウザにも配信が可能になる。
1. hls.js を提供サイトからダウンロードして，Ｗｅｂサーバーに転送する。
2. HTMLファイル中に，次のように指定する。

<script src="hls.js"></script>
<video id="video_smaple" controls>
<script>
 if(Hls.isSupported()) {
   var video = document.getElementById('video_smaple');
   var hls = new Hls();
   hls.loadSource('./[動画ファイル名].m3u8');
   hls.attachMedia(video);
 }
</script>

※ １行目を <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> とすれば，ｈｌｓ．ｊｓのダウンロードは不要。

サンプル動画†