メディアの更新(Chrome 62)

François Beaufort
François Beaufort

Android の永続ライセンス

Encrypted Media Extensions(EME)の永続ライセンスとは、ライセンスをデバイスに保持できるため、アプリがサーバーに別のライセンス リクエストを送信しなくても、ライセンスをメモリに読み込めるということです。EME でオフライン再生がサポートされる仕組みは次のとおりです。

これまで、永続ライセンスをサポートしていたのは ChromeOS のみでした。ただし、現在はそうではありません。Android でも、デバイスがオフラインのときに EME を介して保護されたコンテンツを再生できるようになりました。

const config = [{
  sessionTypes: ['persistent-license'],
  videoCapabilities: [{
    contentType: 'video/webm; codecs="vp09.00.10.08"',
    robustness: 'SW_SECURE_DECODE' // Widevine L3
  }]
}];

// Chrome will prompt user if website is allowed to uniquely identify
// user's device to play protected content.
navigator.requestMediaKeySystemAccess('com.widevine.alpha', config)
.then(access => {
  // User will be able to watch encrypted content while being offline when
  // license is stored locally on device and loaded later.
})
.catch(error => {
  // Persistent licenses are not supported on this platform yet.
});

永続ライセンスをご自身で試すには、サンプル メディア PWA をチェックアウトし、次の手順に沿って操作します。

  1. https://biograf-155113.appspot.com/ttt/episode-2/ にアクセスします。
  2. [オフラインで使用可能にする] をクリックし、動画がダウンロードされるのを待ちます。
  3. 機内モードをオンにします。
  4. [再生] ボタンをクリックして動画をお楽しみください。

Android 向け Widevine L1

ご存じのとおり、すべての Android デバイスは Widevine セキュリティ レベル 3(Widevine L3)をサポートする必要があります。ただし、最高レベルのセキュリティ(Widevine Security Level 1)をサポートするデバイスも数多くあります。このレベルでは、すべてのコンテンツ処理、暗号化、制御が高信頼実行環境(TEE)内で行われます。

ご案内します。Android 版 Chrome で Widevine L1 がサポートされるようになりました。これにより、メディアを最も安全な方法で再生できるようになります。なお、この機能は ChromeOS ではすでにサポートされています。

const config = [{
  videoCapabilities: [{
    contentType: 'video/webm; codecs="vp09.00.10.08"',
    robustness: 'HW_SECURE_ALL' // Widevine L1
  }]
}];

// Chrome will prompt user if website is allowed to uniquely identify
// user's device to play protected content.
navigator.requestMediaKeySystemAccess('com.widevine.alpha', config)
.then(access => {
  // User will be able to watch encrypted content in the most secure way.
})
.catch(error => {
  // Widevine L1 is not supported on this platform yet.
});

アダプティブ メディア形式(DASH や HLS など)用の JavaScript ライブラリである Shaka Player には、Widevine L1 を試すためのデモがあります。

  1. https://shaka-player-demo.appspot.com/demo/ にアクセスし、メッセージが表示されたら [許可] をクリックします。
  2. [Angel One(マルチコーデック、多言語、Widevine)] を選択します。
  3. [構成] セクションの [動画の堅牢性] フィールドに「HW_SECURE_ALL」と入力します。
  4. [読み込み] ボタンをクリックして動画をお楽しみください。

バックグラウンド動画トラックの最適化(MSE のみ)

Chrome チームは常にバッテリー駆動時間を改善する新しい方法を模索しており、Chrome 62 も例外ではありません。

Chrome で、動画が Media Source Extensions(MSE)を使用している場合、動画がバックグラウンド(非表示のタブなど)で再生されているとき、動画トラックが無効になりました。詳しくは、こちらの記事をご覧ください。

ライブ MSE ストリームのシーケンシャル再生範囲をカスタマイズする

ご存じのとおり、seekable 属性には、ブラウザがシークできるメディア リソースの範囲が含まれます。通常、0 からメディア リソースの長さまでの単一の期間が含まれます。ライブ配信など、時間が不明な場合は、時間範囲が継続的に変更されることがあります。

Media Source Extensions(MSE)を使用すると、現在のバッファリング範囲と結合される単一のシーケンシャル範囲を指定または削除することで、seekable 範囲ロジックをより効果的にカスタマイズできるようになりました。メディアソースの長さが +Infinity の場合、両方に合う単一のシーケンシャル範囲が作成されます。

次のコードでは、メディアソースはすでにメディア要素に接続されており、init セグメントのみが含まれています。

const mediaSource = new MediaSource();
...

mediaSource.duration = +Infinity;
// Seekable time ranges: { }
// Buffered time ranges: { }

mediaSource.setLiveSeekableRange(1 /* start */, 4 /* end */);
// Seekable time ranges: { [1.000, 4.000) }
// Buffered time ranges: { }

// Let's append a media segment that starts at 3 seconds and ends at 6.
mediaSource.sourceBuffers[0].appendBuffer(someData);
// Seekable time ranges: { [1.000, 6.000) }
// Buffered time ranges: { [3.000, 6.000) }

mediaSource.clearLiveSeekableRange();
// Seekable time ranges: { [0.000, 6.000) }
// Buffered time ranges: { [3.000, 6.000) }

上記では説明していないケースも多くありますので、公式サンプルをお試しいただき、バッファリングされた時間範囲とシーク可能な時間範囲がさまざまな MSE イベントにどのように反応するかを確認することをおすすめします。

リリース予定 | Chromestatus トラッカー | Chromium バグ

MSE 用の MP4 の FLAC

ロスレス音声コーディング形式の FLAC は、Chrome 56 以降の通常のメディア再生でサポートされています。その後すぐに、ISO-BMFF での FLAC サポート(MP4 での FLAC)が追加されました。Chrome 62 では、Media Source Extensions(MSE)で MP4 の FLAC が利用可能になりました。

なお、MP4 カプセル化仕様の FLAC のサポートを開発して実装したのは Firefox の担当者であり、BBC は MSE での使用をテストしています。詳しくは、BBC の「Delivering Radio 3 Concert Sound」投稿をご覧ください。

MP4 の FLAC が MSE でサポートされているかどうかを検出する方法は次のとおりです。

if (MediaSource.isTypeSupported('audio/mp4; codecs="flac"')) {
  // TODO: Fetch data and feed it to a media source.
}

完全な例を確認するには、公式のサンプルをご覧ください。

リリースの目的 | Chrome のステータス トラッカー | Chromium のバグ

デバイスを回転すると動画が自動的に全画面表示になる

ビューポートで動画を再生中にデバイスを回転させて横向きにすると、再生は自動的に全画面モードに切り替わります。デバイスを回転させて縦向きにすると、動画がウィンドウ モードに戻ります。詳しくは、過去の記事をご覧ください。