HLS形式による動画のオンデマンド配信 の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• HLS形式による動画のオンデマンド配信 へ行く。
• HLS形式による動画のオンデマンド配信 の差分を削除

#author("2020-10-19T17:59:37+09:00;2020-10-18T10:41:22+09:00","default:admin","admin")
#author("2020-10-19T18:00:48+09:00;2020-10-18T10:41:22+09:00","default:admin","admin")
* ＨＬＳ形式による動画のオンデマンド配信 [#d7b00a77]
**準備 [#wda4c543]
1. 配信したい動画を準備する。（ここでは mp4 形式で保存）~
2. [[ffmpeg:https://www.ffmpeg.org/]] をダウンロードし，動画と同じフォルダーに保存する。~
3. 上記フォルダーでコマンドプロンプトを起動する。（フォルダーのアドレスバーに「cmd」と入力し⏎キーを押す。）~

**動画の変換（mp4 から HLS へ） [#ab647faa]
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
 > 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）が連番で作成される。~

**Ｗｅｂサーバーへの配置 [#m1e37de1]
1. 作成された全てのファイル（［動画ファイル名]連番.tsと，［動画ファイル名].m3u8）をＷｅｂサーバーの任意のフォルダーに転送する。~
2. HTMLファイル中に，次のように指定する。~
 <video src="http://.../[動画ファイル名].m3u8" ></video>
※ ＨＬＳ対応ブラウザ（Safari と Edge）は，これで再生可能になる。~

** hls.js の実装 [#p3c270cd]
※ hls.js を使うと，ＨＬＳ非対応のブラウザにも配信が可能になる。~
1. hls.js を[[提供サイト:https://www.jsdelivr.com/?query=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> とすれば，hls.js のダウンロードは不要。~

*** [[サンプル動画:http://www.hayasi.name/kanon/stream/snuba.html]] [#z65e6b70]