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

スタートプラン

はじめに

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

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

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

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

やってみた

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について今回は以下のURLの、現時点の最新版v5.14.1をダウンロードしました。

<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）が直書きだったりしますが、これを元に改変をしていけばりっぱな動画配信ページが作成できるのではないかと考えています！

参考ページ

スタートプラン