HLSの作り方

投稿者: | 2014年2月14日

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

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

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

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

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

 

前提

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

FFMPEG

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

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

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

 

手順

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

1、FFMPEGでトランスコード

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

 

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

 

1、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

MP4をMPEG2TSファイルに変換します。

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

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

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

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

 

-segment_time 10

 

 

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

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

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

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

 

test1

 

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,

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

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

 

注意:1

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

 

注意:2

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

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

 

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

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

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

 

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

 

2、Webサーバに放り込む

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

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

 

M3U8 : application/x-mpegURL  または vnd.apple.mpegURL

TSファイル : video/MP2T

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

 

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください