dash.js: 画質を手動で選択する

投稿者: | 2017年9月14日

概要

  • dash.js の動画プレイヤーで手動で画質を選択する

dash.js とは

YouTube などの動画サイトでは、

MPEG-DASH と呼ばれる動画配信規格が使われることが増えてきています。

 

dash.js は、MPEG-DASH での動画配信を行うための、

動画プレイヤーを実装したもので、

DASH Industry Forum (DASH-IF) によって提供されています。

画質を手動で選択したい

今回、dash.js を使ってやりたいことは、

YouTube のように、「動画再生中に、画質を手動で変更する」ことです。

 

dash.js のサンプルコードの動画プレイヤーは、

再生・停止、シークバー、音量、フルスクリーン化

の機能しか持っていないため、

画質の選択機能は自分で実装しないといけません。

 

とはいえ、dash.js は、画質を変更する API を持っているので、

基本的には API をたたくだけで簡単にできます。

ただし、画質を変更するためには、

画質の異なる複数の動画ファイルを準備する必要があるので、

この記事では、動画の準備も含めてまとめておくこととします。

異なる画質の動画ファイルを準備

まずは、再生したい動画ファイル “video.mp4″ をベースに、

その低画質版の動画ファイル”video_low.mp4” を生成して、

それらの情報をまとめたメタ情報ファイル”video_dash.mpd”を生成します。

低画質版の動画ファイルの生成

画質の変更には、ffmpeg を用います。

ffmpeg をダウンロードしたら(パスを通しておくと良いでしょう)、

ffmpeg -i video.mp4 -s [width]x[height] video_low.mp4

で、動画ファイルのサイズ変更ができます。

[width], [height] には変更後の動画の横縦のピクセル数を指定します。

メタ情報ファイルの生成

次は、MPEG-DASH で配信するためのメタ情報ファイルを生成します。

このファイルの中に、選択できる動画ファイルの情報が記述されるので、

今の場合、上で生成した低画質版の “video_low.mp4” と元の画質の “video.mp4” を

まとめたメタ情報ファイルを作成する必要があります。

 

メタ情報ファイルの生成には、GPAC の MP4Box を使います。

MP4Box -dash 1000 -rap -profile onDemand  video.mp4 video_low.mp4

上を実行すると、”video_dash.mpd” というメタ情報ファイルが生成されます。

 

以上で動画ファイルの準備は完了です。

再生中の画質の変更

上で準備した動画ファイルを使って、

HTTP サーバーを立てて、dash.js でプレイヤーから動画を再生すると、

画質はバッファやスループットに基づいて自動的に選択されます。

これは、dash.js が自動で画質を調整する機能を持っているからです。

 

今回の目的は、自分で再生したい画質を選択することなので、

自動で設定される画質を無視して、強制的に画質を変更することが必要になってきます。

画質を変更する API

dash.js では、プレイヤーの操作に関して様々な API が提供されていて、

こちらで確認できます。

その中で、今回使う API は、setQualityFor と setAutoSwitchQualityFor の二つです。

 

setQualityFor

まず、setQualityFor は、動画を再生する際の画質を指定して変更するもので、

次のような形式で使います。

player.setQualityFor(“video”, index);

player は dash.js のプレイヤーを指しています。

index は 0 から始まる数字で画質を表していて、

0 が最もビットレートが低いことを表します。

 

setAutoSwitchQualityFor

setQualityFor を呼び出せば、その時点で指定した画質に変更されますが、

dash.js では自動で画質を変更する機能がデフォルトでオンになっているので、

このままでは、手動で変更した画質が、自動で変更され直してしまいます。

 

そのため、自動での画質変更をオフにする必要があります。

setAutoSwitchQualityFor は自動的な画質変更のオンオフを切り替える API で、

player.setAutoSwitchQualityFor(“video”, false);

とすることで、自動的な画質変更をオフにすることができます。

ボタン操作で画質を変更する

ということで、ボタンを設置して、API を呼び出すようにスクリプトを書けば完成です。

ボタンは <select> でも何でもいいのですが、

こちらのプルダウンメニューを参考にさせて頂きました。

 

CSS は同じなので省略

↓ HTML

 

項目の数は、読み込んだメタ情報に記述されている

画質の種類に合わせて動的に生成するように

JavaScriptを記述しています。

 

↓ JavaScript

このスクリプトでは、

  • プルダウンメニューのスライド
  • メニュー内の項目の動的生成
  • 画質項目クリック時の画質変更
  • “auto”項目クリック時に自動画質変更機能のオン

を行います。

動作の様子

下の画像は、実際にプレイヤーで動画を再生している時の様子です。

左下にプルダウンメニューが表示されていて、

選択できるビットレートがリストアップされています。

動画は DASH-IF が CDN で提供しているものを読み込んでいて、

動画に、現在再生中の画質の情報が埋め込まれています。

下の画像は、より高い画質を選択した時の様子です。

ちゃんと再生中に画質が切り替わっています。

ただし、画質を変更しても、

すでにダウンロードの終わっているフレームは、

そのままの画質で再生されるので、

実際に画質が変わるまでには多少のタイムラグがあります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です