読者です 読者をやめる 読者になる 読者になる

黄色は止レマ

エッセイあるいはただの戯言

HLS/m3u8の備忘録

HLSについて調べる機会があったので、備忘録として残します。

【HLSとm3u8】

HLS (Http Live Streaming) とは

Appleが策定したライブストリーミングの手法。
httpで通信を行う為、通常のサーバ構成でストリーミング配信が行える便利な規格。
m3u8をブラウザ上で再生する事でストリーミングが可能。
スマホはiOS3以降、Android4.0以降が対応。PCだとMacSafariのみ対応。

HLS形式 とは
http://k-tai.impress.co.jp/docs/column/keyword/20120228_515059.html

m3u8 (m3u) とは

m3uとは、マルチメディアプレイリストのファイルフォーマット。
m3u8は、UTF-8(BOMB無し)で作成する事を明示的にした形式。根本的にはm3uとm3u8は同じ物。 このファイルに分割されたtsファイルのパスを記述していくことで、複数のファイルを一つのファイルとして再生する事が出来る。

Wikipedia
https://ja.wikipedia.org/wiki/M3U

【m3u8ファイルの作り方】

ffmpegを使う

ffmpegを使う事で、m3u8と分割tsファイルの作成が可能

ffmpegのインストール
http://web.plus-idea.net/2015/11/windows-ffmpeg/

ffmpegでm3u8を作るコマンド
ffmpeg.exe -i {tsに分割するファイル(H.264)} -codec copy -map 0 -f segment -vbsf h264_mp4toannexb -segment_format mpegts -segment_time 10 -segment_list {m3u8の名称}.m3u8 {tsファイルの名称}-%03d.ts

上記処理を行うと、m3u8ファイルと分割されたtsファイルが出力される。

テキストエディタで作る

m3u8はただのテキストファイルなので、メモ帳などでも作成が可能。
以下は記述例。

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-ALLOW-CACHE:NO
#EXT-X-TARGETDURATION:{全体の秒数(整数)}
#EXTINF:{tsファイルの秒数},
{tsファイルのパス}
~~~上2行を必要分繰り返し~~~
#EXT-X-ENDLIST

【再生方法】

一番手っ取り早いのは、HTML5のVideoタグAudioタグのパスをm3u8ファイルにする事。

<video width="320" height="240" src="hoge.m3u8" onclick="this.play()" controls>

<audio controls>
    <source src="hoge.m3u8">
</audio>

これだけで再生は問題なく行える。
iPhone6+(9.3)とGalaxy S3(4.1.2)では再生を確認。
しかし、Audioタグの場合はtype属性をちゃんと指定しないとAndroidで動かない等の情報もあったので、もう少し調査の余地あり。

【テストケース】

以下は実験内容。
今回は動画ではなく複数の音声ファイルをプレイリストとして扱いたかったので、色々試みてみた。

  • 1曲分の分割ファイル(mp4->ts)をm3u8に記載して再生 ※通常の手法
    -> iOS/Android共にOK
  • 曲を一つのtsファイルに変換し、複数曲分作成。それらをm3u8に記述。
    -> iOS/Android共にOK (ただし、Androidで時間が経つと曲が切れ切れになる現象を確認)
  • m3u8でmp3のプレイリストを作って再生
    -> iOS OK, Android NG (再生できない)