HTML5のVIDEOタグを使ったストリーミング(HLS)

概要

ffmpegのインストール
mp4ファイルの用意
m3u8リスト ts分割
apacheのmime type追加
ファイルの配置とm3u8の編集
HTMLページを作成してアクセスしてみる

詳細

1. ffmpegのインストール

% sudo apt-get install ffmpeg

2. mp4ファイルの用意 (手持ちのデータを利用する！)

3. m3u8リスト ts分割

分割前のファイルを happy.mp4 とします。
分割後のリストファイルを stream.m3u8 分割ファイルを stream000.ts とします。(000の所は001,002,…と増えていきます)

% mkdir stream
% ffmpeg -i happy.mp4 \
  -acodec copy \
  -vcodec copy \
  -vbsf h264_mp4toannexb \
  -map 0 \
  -f segment \
  -segment_format mpegts \
  -segment_time 30 \
  -segment_list stream.m3u8 \
  -segment_list_flags \
  -cache stream/stream%03d.ts

4. apacheのmime type追加

mine typeに以下を追加します

AddType application/x-mpegURL .m3u8
AddType video/MP2T            .ts

ubuntuのdefaultに追加する場合

% vi /etc/apache2/sites-enabled/000-default.conf
---
AddType application/x-mpegURL .m3u8
AddType video/MP2T            .ts
---

sudo /etc/init.d/apache reload

nginxの場合 mime.typesに以下を追加

types {
    application/x-mpegURL                 m3u8;
    video/MP2T                            ts;
 < 略>

5. ファイルの配置とm3u8の編集

DocumentRootから以下の通りファイルを配置します。

/var/www/html/                    ... DocumentRoot
              stream.m3u8
              stream/             ... ファイルが多いので1階層下げた
                    stream000.ts
                    stream001.ts
                    ...

stream.m3u8リストの中身をパスに合わせて編集します。相対パスでもいけると思います。

% vi /var/www/html/stream.m3u8
---
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-ALLOW-CACHE:NO
#EXT-X-TARGETDURATION:13
#EXTINF:12.053711,
/stream/stream000.ts
#EXTINF:7.966289,
/stream/stream001.ts
 < 略>

6. HTMLページを作成してアクセスしてみる

% vi /var/www/html/index.html
---
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>HTTP Live Streaming Test</title>
  </head>
  <body>
      <h1>HTTP Live Streaming Test</h1>
      <video width="640" 
             height="360" 
             src="stream.m3u8" 
             preload="none" 
             onclick="this.play()" 
             controls />
  </body>
</html>
---

http://URL/index.html

再生されましたか？

H.264の場合

% ffmpeg -i orange.mp4 \ 
  -map 0 \
  -f ssegment \
  -vcodec libx264 \
  -acodec aac \
  -strict experimental \
  -segment_list stream.m3u8 \
  -segment_time 10 stream%03d.ts

MP4Boxを使った、MPEG-DASHの場合

% cd work
% cp DOKOKA/happy.mp4 ./

% ffmpeg -i happy.mp4 \
  -r 25 \
  -g 25 \
  -codec:v libx264 \
  -codec:a aac \
  -b:v 500k \
  -strict \
  -2 output_500k.mp4 \
  -r 25 \
  -g 25 \
  -codec:v libx264 \
  -codec:a aac \
  -strict \
  -2 \
  -b:v 1000k output_1000k.mp4 \
  -r 25 \
  -g 25 \
  -codec:v libx264 \
  -codec:a aac \
  -strict \
  -2 \
  -b:v 4000k output_4000k.mp4

% sudo apt-get install gpac       # MP4Boxが入ったパッケージ

% MP4Box -dash 1500 \
  -profile live \
  -out test.mpd \
  output_500k.mp4#video:id=video_500k \
  output_500k.mp4#audio:id=audio \
  output_4000k.mp4#video:id=video_4000k \
  output_1000k.mp4#video:id=video_1000k

% vi index.html

<script src="http://cdn.dashjs.org/latest/dash.all.min.js"></script>
<style>
  video {
    width: 640px;
    height: 360px;
  }
</style>
<div>
  <video data-dashjs-player="" autoplay="" src="http://URL:8999/test.mpd" controls=""></video>
</div>

 % python -m SimpleHTTPServer 8999

http://URL:8999/index.html にアクセス。WindowsなChromeからもみえるようになった！・・・が、途中でとまっちゃう。URLの所は、適宜HTTPServerを起動したホストのIPや自ホストなら、localhostなどと書き換えてください。