超簡単にエックスサーバでストリーミング配信する

エックスサーバでストリーミング配信しているサービスを見つけました。一番ランクの低いエックスサーバのみでストリーミング配信ができるということで、HLSを使っていて、webサーバはhttpd.confの編集レベルで動くようになってるのかなと思い、やってみました。

HLSファイルをつくる

まずは、mp4、movなどの動画ファイルをHLSファイルにする必要があります。HLSファイルは、FFmpegで下記のように簡単に作成できます。

sudo ffmpeg -i movie.mov -c:v copy -c:a copy -map 0 -f segment -segment_format mpegts  -segment_time 5 -segment_list  movie/movie.m3u8 movie/movie_%3d.ts

blog.logicky.com

作成したHLSファイルを、エックスサーバにアップロードします。

FTPでもいいですし、SCPだと下記のような感じでやります。

$ zip -r movie.zip movie
$ scp movie.zip hogehoge.com:~

閲覧用HTMLを作成します。

iOSなどHLSに対応しているブラウザであれば、HLSファイルをvideoタグで読み込むだけで表示されますが、Ubuntuのchromeとかだと表示されません。表示するには、video.jsを使うのが流行っているようです。

github.com

<html>
  <head>
    <title>Movie Test</title>
    <link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
    <style>
    body {
      background: black;
      color: white;
      padding: 20px;
    }
    #player1 {
      width: 500px;
      height: 300px;
    }
    </style>
  </head>
  <body>
    <h1>Movie Test</h1>
    <video-js
      id="player1"
      class="vjs-default-skin"
      controls
      autoplay
    >
      <source
        src="./movie/movie.m3u8"
        type="application/x-mpegURL"
      >
    </video-js>
  </div>
  <script src="https://vjs.zencdn.net/7.4.1/video.js"></script>
    <script>
      var player = videojs('player1');
    </script>
  </body>
</html>