HLSの作り方

HLS（HTTP　LIVE　STREAMING）のつくり方を備忘として記述します。

Windows環境で作ることを想定しています。

MAC環境であればAppleDeveloperにsegmenterとかあって便利なんですが・・・。

HLSはSafariやMobilSafariで再生できます。Androidは4.0以降なら標準プレイヤーで再生可能です。

Windowsで再生したい場合は専用のプレイヤーが必要です。

前提

取り敢えず下記のものを用意

・FFMPEG

取り敢えず最新版をダウンロードしてください。

FFMPEGだけでできるようになったのでいい時代です。

・H.264 AVCコーデックのMP4を用意しましょう。アニメでも映画でも自己責任で・・・。エンコードについてはここでは省略。

手順

手順は簡単で2ステップで作って配信までできますよ。

１、FFMPEGでトランスコード

２、２で分割したファイルとM3U8プレイリストファイルをWebサーバに放り込む

それでは詳細な手順を記載します。

１、FFMPEGでトランスコード

ffmpeg.exe -i [input file path].mp4 -codec copy -map 0 -f segment -vbsf h264_mp4toannexb -segment_format mpegts -segment_time 10 -segment_list [output file path].m3u8 [output file name]-%03d.ts

MP４をMPEG２TSファイルに変換します。

トランスコードとは動画コードをデコードやエンコードを行わずに変換する作業です。

FFMPEGのパラメータはいろいろありますが、取り敢えず元ファイルとなるMP４の設定をベースに変換しています。

分割するにあたって重要なことは何秒ごとに分割するかです。

パラメータの下記の部分で分割秒数をしていしています。

-segment_time 10

Apple公式では10秒で分割することが推奨されているそうです。

分割を実施した時にM3U8ファイルが作成されます。このファイルが各プレイヤーで再生するときの参照するファイルとなります。

M3U８ファイルには各tsファイルのパスがリストとして記載されています。

12秒の動画を取り敢えず実行して結果です。10秒で分割しているので10秒のtsファイルが１つと2秒のtsファイルが１つできた形になります。

M3U8ファイルの中身は下記のとおりです。

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-ALLOW-CACHE:YES
#EXT-X-TARGETDURATION:11
#EXTINF:10.752000,
test-000.ts
#EXTINF:1.309256,
test-001.ts
#EXT-X-ENDLIST

ここで注目するのが下記の行です。

EXTINF:10.752000

ここに記載されている数値は秒数になります。この値をすべて合計すると全体の尺になります。

プレイヤーはこの値をすべて合計した秒数を表示しています。ここの値がおかしいとプレイヤーで表示される全体の秒数がおかしい状態になります。

注意：１

秒数が浮動小数点表記なのですが、これがAndroidでは整数しか読み取ってくれないため必ず全体秒数の表示がおかしくなります。

注意：２

M3u8ファイルの文字コードはUTF-８のBOM無しにしてください。Androidで読み込んだ場合、パースエラーになります。

M3U8自体はUTF-８が公式ですが、Shit-JISにすることでもパースエラーを回避できます。でもまぁ、気持ち悪いのでUTF-8BOM無しにするのがいいと思います。

Android4.0以降でHLSの再生は可能なのですが何かと問題があります。

全画面にしたとき画像が画面いっぱいに張り付いてしまう端末依存だったりとか・・・。

AndroidでのHLS再生はまだまだ鬼門だと思いますよ。

因みに上記の対応をとらなくても、iOSでは特に問題なく再生されます。

２、Webサーバに放り込む<

Webサーバは自分で用意してくださいね。

MimeTypeの指定だけ注意してください。

M3U8　：　application/x-mpegURL  または vnd.apple.mpegURL
TSファイル　：　video/MP2T

明示的に指定しないとプレイヤーが読み込んでくれない場合があります。

こんな感じで手軽にHLSを作れます。ちょろい世の中になったと思うわけです。