[MPEG-DASH] videoJSでアダプティブストリーミングを再生する

# はじめに

[VideoJS](https://qiita.com/yun_bow/items/fe94d95c4eb4dc3a0803)でアダプティブストリーミングを行う方法を紹介します。（2020年5月現在）

VideoJSについては下記のページで紹介しています。
https://qiita.com/yun_bow/items/fe94d95c4eb4dc3a0803

```Markdown:動作環境
OS: Windows 10 Pro
Google Chrome: 81.0.4044.129
Mozilla Firefox: 75.0
Microsoft Edge: 81.0.416.64（Chromium版）
videoJS: 7.7.5
dashJS: 3.1.0
videoJS MPEG-DASH Source Handler: 2.11.0
```

# ライブラリの読み込み

videoJS
https://github.com/videojs/video.js

dashJS
https://github.com/Dash-Industry-Forum/dash.js

videoJS MPEG-DASH Source Handler
https://github.com/videojs/videojs-contrib-dash

```HTML
<script src="../lib/video.js"></script>
<script src="../lib/dash.all.debug.js"></script>
<script src="../lib/videojs-dash.js"></script>
```

# DRMなし
[デモはこちら](https://yunbow.github.io/sample-mpeg-dash/videojs/std/)

```JavaScript:DRMなし
let video = videojs('video1', {
    width: 640, // 幅
    height: 360, // 高さ
    autoplay: false, // 自動再生
    loop: false, // ループ再生
    controls: true, // コントロール制御表示
    preload: 'auto', // 読み込み制御
});
video.src({
    type: 'application/dash+xml',
    src: '../../mpd/std/profile_live/Bullfinch.mpd'
});
```

|ブラウザ名|動作可否|
|:--|:--|
|Google Chrome|○|
|Mozilla Firefox|○|
|Microsoft Edge|○|

videoJSのメディアソースに`type`にmineType、`src`にビデオリソースを指定します。

# DRMあり
## ClearKey
[デモはこちら](https://yunbow.github.io/sample-mpeg-dash/videojs/drm_clearkey/)

```JavaScript:ClearKey
video.src({
    type: 'application/dash+xml',
    src: '../../mpd/drm/clearkey/Bullfinch.mpd',
    keySystemOptions: [
        {
            name: 'org.w3.clearkey',
            options: {
                'clearkeys': {
                    'OCYfniLWkYVAQNXDwaqUeQ': 'jfUe14GofJhw1Sw0yde2eQ'
                }
            }
        }
    ]
});
```
ClearKeyでは、`keySystemOptions`において、`name`にClearKeyのDRMシステム名、`clearkeys`にKeyID:Key を指定します。

|ブラウザ名|動作可否|
|:--|:--|
|Google Chrome|○|
|Mozilla Firefox|○|
|Microsoft Edge|○|

## Widevine
[デモはこちら](https://yunbow.github.io/sample-mpeg-dash/videojs/drm_widevine/)

```JavaScript:Widevine
video.src({
    type: 'application/dash+xml',
    src: '../../mpd/drm/widevine/Bullfinch.mpd',
    keySystemOptions: [
        {
            name: 'com.widevine.alpha',
            options: {
                serverURL: 'https://widevine-proxy.appspot.com/proxy'
            }
        }
    ]
});
```

Widevineでは、`keySystemOptions`において、`name`にWidevineのDRMシステム名、`serverURL`にライセンスサーバーのURLを指定します。

|ブラウザ名|動作可否|
|:--|:--|
|Google Chrome|○|
|Mozilla Firefox|○|
|Microsoft Edge|○|

## PlayReady 
[デモはこちら](https://yunbow.github.io/sample-mpeg-dash/videojs/drm_playready/)

```JavaScript:PlayReady 
video.src({
    type: 'application/dash+xml',
    src: '../../mpd/drm/playready/Bullfinch.mpd',
    keySystemOptions: [
        {
            name: 'com.microsoft.playready',
            options: {
                serverURL: 'https://test.playready.microsoft.com/service/rightsmanager.asmx?cfg=(kid:header,contentkey:jfUe14GofJhw1Sw0yde2eQ==)'
            }
        }
    ]
});
```

PlayReadyでは、`keySystemOptions`において、`name`にPlayReadyのDRMシステム名、`serverURL`にライセンスサーバーのURLを指定します。

|ブラウザ名|動作可否|
|:--|:--|
|Google Chrome|×|
|Mozilla Firefox|×|
|Microsoft Edge|○|

## マルチDRM(Widevine+PlayReady) 
[デモはこちら](https://yunbow.github.io/sample-mpeg-dash/videojs/drm_multi/)

```JavaScript:マルチDRM
video.src({
    type: 'application/dash+xml',
    src: '../../mpd/drm/multi/Bullfinch.mpd',
    keySystemOptions: [
        {
            name: 'com.widevine.alpha',
            options: {
                serverURL: 'https://widevine-proxy.appspot.com/proxy'
            }
        },
        {
            name: 'com.microsoft.playready',
            options: {
                serverURL: 'https://test.playready.microsoft.com/service/rightsmanager.asmx?cfg=(kid:header,contentkey:O9ovQDRMfe9hQie5wPA+Jg==)'
            }
        }
    ]
});
```

マルチDRMでは、`keySystemOptions`にDRMシステム名を複数指定します。ブラウザ側が対応しているDRMで再生を行います。

|ブラウザ名|動作可否|
|:--|:--|
|Google Chrome|○|
|Mozilla Firefox|○|
|Microsoft Edge|○|

# おわりに
今回、videoJSによるアダプティブストリーミングの再生について纏めました。
メディアファイルの作成方法は別の投稿で紹介していますので
是非ご覧ください。ありがとうございました。

# 関連リンク
- [[MPEG-DASH] 初心者のためのWEBストリーミング入門](https://qiita.com/yun_bow/items/a97ad78615c6ca3a75bb)
- [[MPEG-DASH] Fragmented MP4のファイル構造](https://qiita.com/yun_bow/items/a33266b78d5aab807c71)
- [[MPEG-DASH] MPDのファイル構造](https://qiita.com/yun_bow/items/780e49531174272e7c44)
- [[MPEG-DASH] DRMシステムの概要と種類](https://qiita.com/yun_bow/items/e573f4754579d1627a13)
- [[MPEG-DASH] Bento4でDRMパッケージを行う](https://qiita.com/yun_bow/items/77b86d75e15f245f265b)
- [[MPEG-DASH] dashJSでアダプティブストリーミングを再生する](https://qiita.com/yun_bow/items/88582964c113c8499742)
- [MPEG-DASH] videoJSでアダプティブストリーミングを再生する（本稿）
- [[MPEG-DASH] パフォーマンスチューニングを行う](https://qiita.com/yun_bow/items/e4e37265643a661021ec)

# 参考リンク
- [[Video.js] JavaScriptで動画を再生する](https://qiita.com/yun_bow/items/fe94d95c4eb4dc3a0803)

以上です。