[小ネタ] Video.jsのvideojs-contrib-hlsを使ってHLS形式のライブ配信を再生する最低限度の設定

#JavaScript

#初心者向け

清水俊也

2018.04.30

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

清水です。先日下記のエントリにまとめたようにAWS Media Servicesを使って動画配信テストを行いました。その中で、Video.jsを使うことで各種ブラウザでのHLS形式の動画を再生できるよう設定しました。

AKIBA.AWS 第5回ネットワーク基礎編でAWS Media Servicesを使った社内向け動画配信テストをしてみた #akibaaws ｜ Developers.IO

個人的に、ちょっと前から「HLS形式の動画配信はSafariやEdgeなど一部のブラウザでしか再生できない」という問題に対しての解決策の1つが「Video.jsなどJavaScript製のPlayerを使う」ことである、という認識はあったのですが、「JavaScript扱うの大変そうだな…」ということで実際に使ったことはありませんでした。

先日の動画配信テストの際に「それでも使ってみないとな…」と試してみたところ、最低限の動画配信ページ（動的なページ変化などがない、静的なページ）でのライブストリーミング再生についてはそれほどコードを書くこともなく、実現できました。

本エントリでは、このVideo.jsのvideojs-contrib-hlsを使ってHLS形式のライブストリーミング動画を再生した手順を、個人的な備忘録がてらまとめてみたいと思います。

VideoJS HLS(videojs-contrib-hls)によると、videojs-contrib-hls(VideoJS HLS)プロジェクトは非推奨(deprecated)となり、今後は代わりにvideojs-http-streaming(VideoJS HTTP Streaming/VHS)を使用することが推奨されています。VideoJS HTTP Streaming/VHSについてまとめたエントリもご参照ください。（2019/02/06 追記）

やってみた

videoタグの指定

HTMLページ中に動画表示を埋め込む、videoタグを設定します。動画を表示させたい場所に記載します。widthとheighは動画Playerのサイズになります。またsrcでm3u8ファイルのURLを指定します。

  <body>
    ...
    <video id=example-video width=1280 height=720 class="video-js vjs-default-skin" controls>
      <source
         src="[m3u8ファイルのURL]"
         type="application/x-mpegURL">
    </video>
    ...
  </body>

Video.jsライブラリの読み込みとplayer変数の指定

続いてVideo.jsと、HLSの再生に必要なvideojs-contrib-hlsのJavaScriptライブラリを読み込むコードを記載します。</body>タグの直後に以下のようにscriptタグで指定します。Video.jsのライブラリについてはCDNで配信されているものを使用します。（バージョンについては適宜読み替えてください。）またvideojs-contrib-hlsについては下記のページからファイルをダウンロードして、適切な場所に配置します。（この例ではhtmlファイルと同じ場所。）

videojs-contrib-hls

videojs-contrib-hlsについて今回は以下のURLの、現時点の最新版v5.14.1をダウンロードしました。

Release v5.14.1 · videojs/videojs-contrib-hls · GitHub

  <body>
    ...
    <script src="https://vjs.zencdn.net/6.6.3/video.js"></script>
    <script src="./videojs-contrib-hls.js"></script>
    <script>
      var player = videojs('example-video');
      player.play();
    </script>
  </body>

player.play()については、記載することで自動再生がはじまり、記載しなければPlayボタンを押さないと再生が始まりません。

Video.js用スタイルシートの設定

Video.js用のスタイルシート（CSS）についても設定を行います。（これを設定しておかないと、再生ボタンやシークバーなどがきちんと表示されません。）

スタイルシート用ファイルについてもCDNで配布されているものを利用します。以下のように、headタグ間にスタイルシートを指定します。

  <head>
    ...
    <link href="https://vjs.zencdn.net/6.6.3/video-js.css" rel="stylesheet">
    ...
  </head>

htmlファイルにまとめると…

以下となります。（videoタグのsrcについてはダミーのm3u8ファイルのURLとしています。）

<html>
  <head>
    <title>HLS livestreaming</title>
    <link href="https://vjs.zencdn.net/6.6.3/video-js.css" rel="stylesheet">
  </head>
  <body>
    <video id=example-video width=1280 height=720
       class="video-js vjs-default-skin" controls>
      <source
         src="https://example.com/live/hls.m3u8"
         type="application/x-mpegURL">
    </video>
    <script src="https://vjs.zencdn.net/6.6.3/video.js"></script>
    <script src="./videojs-contrib-hls.js"></script>
    <script>
      var player = videojs('example-video');
      player.play();
    </script>
  </body>
</html>

まとめ

Video.jsのvideojs-contrib-hlsを使ってHLS形式のライブ配信を再生する最低限度の設定をまとめてみました。コードとしては数行でしたが、これでHLSのネイティブ再生に対応していないGoogle Chromeなどのブラウザでも、ライブストリーミングが再生できます。あくまで最低限度の設定なのでHLSエンドポイント（m3u8ファイルへのURL）が直書きだったりしますが、これを元に改変をしていけばりっぱな動画配信ページが作成できるのではないかと考えています！