ソフトウェアエンジニアの日常の雑記

日々思ったことをまとめます

Nginxでお手軽なHLSストリーミング

本家はこちら

スマホで動画再生コンテンツをお手軽にリリースしたいなーって時に、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はこんな感じ iOSで自動再生するには、<video>タグ内に playsinlineとmutedをいれれば自動再生できます

<!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.7/video-js.min.css" rel="stylesheet">
  <title>HTTP Live Streaming Test</title>
  <style>
    .wrapper {
      height: 100%;
      width: 100%;
      position: relative;
    }



video {
  widows: 480px;
}




  </style>
</head>



<body>
  <script src="//vjs.zencdn.net/6.7/video.min.js"></script>
  <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
  <script src="./videojs-contrib-media-sources.js"></script>
  <div class="container">
    <header>
      <h1>HTTP Live Streaming Test</h1>
    </header>
    <video class="video-js vjs-default-skin" id="video" width="360" autoplay controls muted playsinline preload="metadata">
      <source src="video/video.m3u8" type="application/x-mpegURL">
    </video>
    <script>