hls.jsを用いて、もう少し色々なことをしてみる
レジューム再生
続きから再生機能が欲しい場合には、startPositionを設定してあげましょう。
前回の再生地点をDB等に保存しておき、インスタンス作成時にstartPositionに渡すことで、その地点からの再生が可能になります。
var hls = new Hls({
“startPosition”: 10 // 保存しておいた、前回の再生地点の秒数
});
hls.loadSource("playlist.m3u8");
hls.attachMedia(video);
config設定
各種プレイリストファイルやチャンクファイルに対して、読み込みのタイムアウト時間やリトライ回数を設定することができます。
var hls = new Hls({
// マスタープレイリスト用の読み込み設定
// チャンクプレイリストとチャンクファイル用にも、別途同様の設定項目があります
manifestLoadPolicy: {
// 断片的にでも読み込みが始まるまでのタイムアウト時間(ミリ秒)
maxTimeToFirstByteMs: Infinity,
// 読み込みが完了するまでのタイムアウト時間(ミリ秒)
maxLoadTimeMs: 20000,
// タイムアウトした際のリトライ設定
// (エラーの場合用にもerrorRetryという設定項目があります)
timeoutRetry: {
// 最大リトライ回数
maxNumRetry: 2,
// リトライまでの遅延時間(ミリ秒)
retryDelayMs: 0,
// リトライまでの最大遅延時間(ミリ秒)
maxRetryDelayMs: 0,
},
}
});
エラーハンドリング
動画再生を行いたい時にエラーが起きることは往々にしてあります。イベントハンドラーを登録することで、エラーハンドリングが可能になります。
hls.on(Hls.Events.ERROR, onError);
コラム: ABRのロジックについて
hls.jsでは、Shaka Player同様、ABRのロジックにEWMA（Exponentially Weighted Moving Average：指数加重移動平均）というものが使われています。
ロジックの詳しい解説は省略しますが、これにより、帯域が狭まると速やかに画質を落とし、広がるとゆっくりと画質をあげていくようになっています。
コラム: コンテンツ保護においてクライアント側でできること
ストリーミングサービスとして提供する場合、認証無しでは動画を再生できないようにするなど、コンテンツ保護も行う必要が出てきます。
そのために、hls.jsには暗号化された動画を再生する機能が備わっています。
それが、Web Cryptot API もしくは softwareDecrypt（Web Crypto API非対応の環境向けにhls.jsで独自に用意している復号ロジック）によるAES暗号を復号する仕組みです。
しかしながらHLS の AES-128 方式には暗号を復号するための鍵のやり取りが平文で行われるという脆弱性もあります。
また、DMM.comではプラットフォーマーとして動画を配信しており、コンテンツホルダー側からコンテンツ保護要件についての指定が提示されることもあります。
そこで、次回詳しく解説予定のDRMという仕組みが必要になってきます。
DRMの仕組みにおいて、暗号化された動画を再生する際に、クライアント側からは、EME（Encrypted Media Extensions）というWeb APIを用いて鍵情報のリクエストを行います。
取得した鍵を用いて復号することで、動画を再生できるようになります。
v1.3以降のhls.jsやShaka Playerはこの仕組みに対応しており、各種設定項目が用意されています。
まとめ
今回はhls.jsの実装を追いながら、MSE/EMEを用いて動画コンテンツが再生される流れを眺めてきました。
m3u8ファイルの読み込みから再生開始まで一気通貫で眺めることで、フロントエンドにおける動画コンテンツの扱われ方の全体像を理解していただけたかと思います。また、ライブラリによって、MSEの扱いが相当シンプルになっていることを感じていただけたかと思います。
次回は、コラムで紹介したDRMを含む、商用配信には無くてはならないコンテンツ保護の手法についてご紹介させていただきます。
