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

はじめに

VideoJSでアダプティブストリーミングを行う方法を紹介します。（2020年5月現在）

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

動作環境

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

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

DRMなし

デモはこちら

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

デモはこちら

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

デモはこちら

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

デモはこちら

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)

デモはこちら

マルチ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ストリーミング入門
• [MPEG-DASH] Fragmented MP4のファイル構造
• [MPEG-DASH] MPDのファイル構造
• [MPEG-DASH] DRMシステムの概要と種類
• [MPEG-DASH] Bento4でDRMパッケージを行う
• [MPEG-DASH] dashJSでアダプティブストリーミングを再生する
• [MPEG-DASH] videoJSでアダプティブストリーミングを再生する（本稿）
• [MPEG-DASH] パフォーマンスチューニングを行う

参考リンク

• [Video.js] JavaScriptで動画を再生する

以上です。