この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
清水です。先日下記のエントリにまとめたようにAWS Media Servicesを使って動画配信テストを行いました。その中で、Video.jsを使うことで各種ブラウザでのHLS形式の動画を再生できるよう設定しました。
個人的に、ちょっと前から「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について今回は以下の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）が直書きだったりしますが、これを元に改変をしていけばりっぱな動画配信ページが作成できるのではないかと考えています！
2
