スマホで動画再生コンテンツをお手軽にリリースしたいなーって時に、mp4とかwebmとかだと正直再生までに時間かかるので、ストリーミングをちょっと触る。 Nginxは標準でストリーミング対応できてるっぽいので、これを使う。
お試しの環境はMacで。
下準備(動画変換ライブラリ)
動画変換にはffmpegを使う。 まずは、mp4とかwebmとかmovをHLSで再生できるm3u8に変換したいので、ffmpegを再ビルド・インストールする
$ brew reinstall ffmpeg --with-fdk-aac --with-libvo-aacenc --with-libvorbis --with-libvpx --with-openjpeg --with-theora --with-opencore-amr
動画変換する
動画を下記コマンドで変換かける
$ ffmpeg -i video.mp4 -vcodec libx264 -g 150 -b:a 96k -ar 44100 -flags +loop-global_header -map 0 -f segment -flags +global_header -segment_format mpegts -segment_time 1 -segment_list video.m3u8 video%03d.ts
video.mp4をm3u8形式に変換する。
マークアップに記述する
ブラウザでhlsを再生するのに、video.jsを使用する hlsのcontribモジュールも使用する。
index.htmlはこんな感じ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="//vjs.zencdn.net/6...
本家はこちら
