トップへ(mam-mam.net/)

Webサイトで動画のHLSストリーム配信 ～ hls.js

■HLSとは

HLSはApple社が独自に開発したHTTPライブストリーミング規格で、多くのWebブラウザが対応していて動画を再生できるそうです。
HLSに対応した動画を配信するには、以下のことをする必要があります。

  1. 配信したい動画を、ffmpegで指定した秒数ごとに分割しておく。
  2. 対応していないブラウザ向けにhls.jsをダウンロードしてscriptタグで使用可能にしjavascriptを記述して使用する

１－１．ffmpegのダウンロード

公式サイト
https://ffmpeg.org/

から「Download」ボタンをクリックします。



Windowsのマークをクリックします。



「Windows Builds by BtbN」をクリックしてダウンロードサイトに移動します。



「ffmpeg-master-latest-win64-gpl.zip」をクリックしてダウンロードします。
ダウンロードしたら「ffmpeg-master-latest-win64-gpl.zip」ファイルを解凍します。
解凍したフォルダ内の \bin\ffmpeg.exe ファイルを使用します。

１－２．ffmpeg.exeを使って動画ファイルを分割する

分割したい動画ファイル（以下ではmovie.mp4）とffmpeg.exeを、
同じフォルダ内c:\movie
にコピーして分割作業を行います。



コマンドプロンプトを起動して、c:\movieフォルダにカレントディレクトリを移動します。
cd /D "c:\movie"

以下コマンドで「movie.mp4」ファイルを5秒ずつのファイルに分割します。
ffmpeg -i movie.mp4 -c:v copy -c:a copy -f hls -hls_time 5 -hls_playlist_type vod -hls_segment_filename "movie%4d.ts" movie.m3u8

以下のファイルが作成されています。
movie.m3u8
movie0000.ts 、 movie0001.ts 、 movie0002.ts 、 movie0003.ts

２．hls.jsのダウンロード

https://github.com/video-dev/hls.js/releases
から「release.zip」をクリックしてダウンロードします。

release.zipを解凍してhls.jsを使用します。

３．hlsストリーミング

movie.m3u8、movie0000.ts、movie0001.ts、movie0002.ts、movie0003.tsファイルをmoviesフォルダに配置します。
hls.jsファイルをjsフォルダに配置します

<script src="./js/hls.js"></script>
<video id="video" muted autoplay controls playsinline loop width="320" height="240"></video><br>
<script>
  window.addEventListener("load",function(){
    var videoSrc = './movies/movie.m3u8';
    if(Hls.isSupported()){
      let hls = new Hls();
      hls.loadSource(videoSrc);
      hls.attachMedia(video);
    }
    else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = videoSrc;
    }
  });
</script>

４．例