Video.jsのvideojs-http-streaming(VHS)を使ってHLS形式のストリーミング配信を再生する最低限度の設定

次世代のHLS再生環境であるVHS/VideoJS HTTP Streamingを使って、HLS形式のストリーミング配信を再生する最低限度の設定についてまとめてみました。

清水俊也

2019.02.06

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

はじめに

清水です。以前、下記のエントリでVideo.jsのvideojs-contrib-hls(VideoJS HLS)を使って各種ブラウザからHLS形式の配信を再生する最低限度の設定をまとめてみました。

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

さて先日、このvideojs-contrib-hls(VideoJS HLS)のページを確認してみると、以下の記載がありました。

Notice: this project will be deprecated and is succeeded by videojs-http-streaming (VHS). VHS supports HLS and DASH and is built into Video.js 7, see the Video.js 7 blog post for details

VideoJS HLS(https://videojs.github.io/videojs-contrib-hls/)

これまでのvideojs-contrib-hls(VideoJS HLS)プロジェクトは非推奨(deprecated)となり、今後は代わりにvideojs-http-streaming(VideoJS HTTP Streaming/VHS)を使用することが推奨されています。 *1このVideoJS HTTP Streaming(VHS)はHLSとmpeg-DASHをサポートし、Video.jsの最新バージョンであるVideo.js 7に組み込まれているとのことです。

本エントリでは、このVideo.jsのvideojs-http-streaming(VideoJS HTTP Streaming/VHS)を使ってHLS形式のライブ/オンデマンドストリーミング動画を再生した手順を、個人的な備忘録がてらまとめてみたいと思います。

VHSでHLSを再生してみた

video-jsタグの指定

HTMLページ中に動画表示を埋め込む、video-jsタグを設定します。（例えば以前紹介したvideojs-contrib-hlsを使う場合はvideoタグでした。指定する属性など基本的な使い方はvideoタグと同様のようですが注意しましょう。）動画を表示させたい場所に記載します。widthとheighは動画Playerのサイズになります。またsrcでm3u8ファイルのURLを指定します。

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

なお、動画を構成するファイル（m3u8プレイリストファイルとセグメントファイル）を別ドメインから配信する場合は、配信側で適切なCORS設定をしていること（CORSヘッダを付与していること）を確認しましょう。

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

続いてVideo.jsとVideoJS HTTP Streaming(VHS)のJavaScriptライブラリを読み込むコードと、player変数を記載します。タグの直後に以下のようにscriptタグでそれぞれ指定します。

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

ライブラリの読み込みについて、以前紹介したvideojs-contrib-hlsを使う場合ではvideo.jsとvideojs-contrib-hls.jsの2つのファイルの読み込みが必要でしたが、VideoJS HTTP Streaming(VHS)の場合はVideo.js自体に組み込まれているとのことで、バージョン7.4.1で確認したところvideo.jsのみの読み込みで動作しました。 *2

なおバージョンについては本日2019/02/06時点で確認できる最新の7.4.1を使用していますが、適宜読み替えてください。またCDNについてはhttps://unpkg.com/video.js@7.4.1/dist/video.jsなどunpkgで配布されているものを使うこともできるようです。GitHubからコードを取得して自環境に配置するというのも良いかと思います。

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

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

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

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

こちらもunkpgで配布されているhttps://unpkg.com/video.js@7.4.1/dist/video-js.cssも利用可能のようです。必要に応じて自環境に配置などでも良いでしょう。

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

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

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

まとめ

次世代のHLS再生環境であるVideoJS HTTP Streaming/VHSを使ってHLS形式のストリーミング配信を再生する最低限度の設定についてまとめてみました。以前紹介したvideojs-contrib-hlsと大きな違いはないかと思いますが、個人的にはVideo.js 7でVHSが同梱されたことによりライブラリの読み込みが減ったことが大きいかなと思います。もっと言えばVideo.jsに標準でHTTP Stremaing再生機能が追加されたことが大きいですね！（なお、必要に応じてVHSを含まない別のVideo.jsライブラリを使うこともできるそうです。）

なおVideo.js 7については下記のブログエントリににロードマップも公開されています。

これまでのVideo.js 6と比べて大きな変更点としては、今回のVHS(videojs-http-streaming)の追加と、古いバージョンのInternet Explorerのサポート削除とのことです。IEのサポート廃止についてはIE 8、 IE 9、IE 10が対象となるようですので古い環境での再生が必要な場合にはご注意ください。 *3

おまけ: VHSでDASHも再生してみた

最後におまけです。今回紹介したVHS、大きな特徴の一つはこのライブラリでmpeg-DASHの再生も可能なことです。以下のようにvideo-jsタグ内のsourceタグ部分を変更することでmpeg-DASHも再生することができました。srcの他、typeも変更するところがポイントですね。

<html>
  <head>
    <title>VHS de DASH</title>
    <link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
  </head>
  <body>
    <video-js id=example-video width=1280 height=720
              class="vjs-default-skin" controls>
      <source
         src="https://example.com/streaming/mpeg-dash.mpd"
         type="application/dash+xml">
    </video-js>
    <script src="https://vjs.zencdn.net/7.4.1/video.js"></script>
    <script>
      var player = videojs('example-video');
    </script>
  </body>
</html>

参考ページ

脚注

  1. 略称のVHSがとても趣がありますね！ ↩
  2. なおこちらの挙動については、VideoJS HTTP Streamingのサイトにはvideojs-http-streaming.jsファイルを読み込むコードが記載されているなど、Video.jsのバージョンなどで変わる可能性もあります。video.jsの読み込みだけでうまく動作しない場合は、https://unpkg.com/@videojs/http-streaming@1.8.0/dist/videojs-http-streaming.jsなども読み込んで試してみると良いかもしれません。 ↩
  3. 確認はしていませんが、videojs-http-streaming (VHS)自体はVideo.js 6とも互換性があるとのことなので、Video.js 6で対応が必要になるのではないでしょうか。 ↩
AWS

関連記事

JSDoc @depreacted 태그로 점진적 개선해보기

lee.byonghun

2024.04.24

話題の日本酒「ソースコード」を読んで（飲んで）みた

べこみん

2024.02.11

話題の記事

ECMAScript의 해시뱅

lee.byonghun

2024.02.04

ESLintでconsoleの使用をエラーにする

武田隆志

2024.01.31