JavaScriptのVideo.jsを使うとHLSとMPEG-DASHに対応したplayerが簡単に作れそうだったので作ってみた。
今回使ったVideo.jsの基本機能をまとめていく。

作ったplayer

f:id:takuroooooo:20200809152120p:plain

Video URLにHLS or MPEG-DASHのManifestファイルのURLを指定してLoadボタンを押すと再生を開始する。デフォルトではHLSのURLを読み込むようにしている。

Video.js CDN

以下のように書くとCDN経由でVideo.jsを読み込むことができる。

<head>
  <link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet" />
  <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>

Player生成

video-jsタグでplayerを作ることができる。ここに動画が表示される。

<video-js id=videoPlayer class="vjs-fluid  vjs-default-skin vjs-big-play-centered mx-auto"></video-js>

vjs-fluidはロードしたビデオのアスペクト比を自動で計算してplayerに反映してくれる。
vjs-big-play-centeredはプレイボタンをplayerの中心に配置してくれる。
mx-autoはBootStrapのクラスで画面の中央にplayerを配置してくれる。

classの他にも色々なattributeを付けることでplayerを定義できる。
例えば、

controlsを定義するとplayerにコントロールパネルが付与される。
width=640 height=480のように書くとplayerの大きさを定義できる。

これらのパラメータはJavaScript側でも設定することができる。

playerはvideoタグでも作れるがVideo.jsの公式ドキュメトによるとvideo-jsタグを使う方が望ましいとのこと。

You can use a video-js element instead of video. Using a video element is undesirable in some circumstances, as the browser may show unstyled controls or try to load a source in the moments before the player initialises, which does not happen with the video-js custom element.

Tutorial: setup | Video.js Documentation

Playerオブジェクト生成

JavaScript側でplayerを制御するためにオブジェクトを生成する。

var player = videojs('videoPlayer', {
    autoplay      : false,
    loop          : false,
    controls      : true,
    preload       : 'auto',
    playbackRates : [0.5, 1, 1.5, 2]
});

videojsの第一引数はvideo-jsタグのidを指定する。
第二引数には先に説明したplayerに関するattributeを付与することができる。
- autoplayは動画をロードした直後にすぐ再生を開始するかを指定
- loopは動画をループするかを指定
- controlsはplayerにコントロールパネルをつけるかどうかを指定
- preloadは動画の先行してロードするかを指定
- playbackRatesはコントロールパネルに動画の再生速度を制御するボタンをつけるかどうかを指定

Playerに再生する動画を設定

src()を使うと再生する動画を指定できる。

player.src({
    type: "application/x-mpegURL",
    src: "https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"
});

typeは再生する動画のmimeTypeを指定
srcはHLSもしくはMPEG-DASHのManifestファイルのパスを指定

HLSで再生する場合、mimeTypeはapplication/x-mpegURL、MPEG-DASHで再生する場合はapplication/dash+xmlを設定する。

Playerで動画を再生

play()を呼ぶと動画の再生が開始される。

player.play()

play()を呼ばないと動画のロードだけ実行して再生待ち状態になる。

参考

videojs.com

github.com

takuroooのブログ

勉強したこととか

Video.jsでHLS/MPEG-DASH対応Playerを作る

目次