メディアの更新（Chrome 73）

François Beaufort
François Beaufort
GitHub

この記事では、Chrome 73 の新しいメディア機能について説明します。これらの機能は次のとおりです。

ハードウェア メディアキーのサポート

最近の多くのキーボードには、再生/一時停止、前のトラック、次のトラックなどの基本的なメディア再生機能を操作するキーがあります。ヘッドセットにも搭載されています。これまで、パソコンのユーザーはこれらのメディアキーを使用して Chrome で音声と動画の再生を操作できませんでした。本日、この点が変更されます。

キーボードのメディアキー
キーボードのメディアキー

ユーザーが一時停止キーを押すと、Chrome で再生中のアクティブなメディア要素が一時停止され、「一時停止」メディア イベントが送信されます。再生キーが押されると、一時停止していたメディア要素が再開され、「再生」メディア イベントが受信されます。Chrome がフォアグラウンドまたはバックグラウンドのどちらにあるかにかかわらず機能します。

ChromeOS では、オーディオ フォーカスを使用する Android アプリが、Chrome にオーディオの一時停止と再開を指示して、Chrome のウェブサイト、Chrome アプリ、Android アプリ間でシームレスなメディア エクスペリエンスを実現できるようになりました。現在、この機能は Android P を搭載した ChromeOS デバイスでのみサポートされています。

つまり、これらのメディア イベントを常にリッスンし、それに応じて対応することをおすすめします。

video.addEventListener('pause', function() {
  // Video is now paused.
  // TODO: Let's update UI accordingly.
});

video.addEventListener('play', function() {
  // Video is now playing.
  // TODO: Let's update UI accordingly.
});

他にもあります。Media Session API が PC で利用可能になりました（これまではモバイルのみに対応していました）。これにより、ウェブ デベロッパーは、メディアキーによってトリガーされるトラックの変更など、メディア関連のイベントを処理できるようになりました。現在、イベント previoustrack と nexttrack がサポートされています。

navigator.mediaSession.setActionHandler('previoustrack', function() {
  // User hit "Previous Track" key.
});

navigator.mediaSession.setActionHandler('nexttrack', function() {
  // User hit "Next Track" key.
});

再生キーと一時停止キーは Chrome によって自動的に処理されます。ただし、デフォルトの動作が適切でない場合は、「再生」と「一時停止」のアクション ハンドラを設定することで、この動作を防ぐことができます。

navigator.mediaSession.setActionHandler('play', function() {
  // User hit "Play" key.
});

navigator.mediaSession.setActionHandler('pause', function() {
  // User hit "Pause" key.
});

ハードウェア メディアキーのサポートは、ChromeOS、macOS、Windows で利用できます。Linux は後で提供されます。

既存のデベロッパー向けドキュメントを確認し、公式の Media Session サンプルをお試しください。

Chromestatus トラッカー | Chromium のバグ

暗号化されたメディア: HDCP ポリシー チェック

HDCP Policy Check API により、ウェブ デベロッパーは、Widevine ライセンスのリクエストとメディアの読み込みの前に、特定のポリシー（HDCP 要件など）を適用できるかどうかをクエリできるようになりました。

const status = await video.mediaKeys.getStatusForPolicy({ minHdcpVersion: '2.2' });

if (status == 'usable')
  console.log('HDCP 2.2 can be enforced.');

この API はすべてのプラットフォームで使用できます。ただし、実際のポリシーチェックは一部のプラットフォームでは利用できない場合があります。たとえば、Android と Android WebView では、HDCP ポリシー チェックの Promise は NotSupportedError で拒否されます。

以前のデベロッパー向けドキュメントと公式サンプルを参照し、サポートされているすべての HDCP バージョンを確認してください。

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

インストール済み PWA の自動ピクチャー イン ピクチャーのオリジン トライアル

一部のページでは、動画要素のピクチャー イン ピクチャーを自動的に開始または終了する必要があります。たとえば、ビデオ会議ウェブアプリでは、ユーザーがウェブアプリと他のアプリやタブを切り替えるときに、自動的なピクチャー イン ピクチャーの動作が役立ちます。残念ながら、ユーザー操作の要件では、この方法は使用できません。そこで登場したのが、ピクチャー イン ピクチャーの自動開始です。

これらのタブとアプリの切り替えをサポートするために、<video> 要素に新しい autopictureinpicture 属性が追加されます。

<video autopictureinpicture></video>

仕組みは次のとおりです。

  • ドキュメントが非表示になると、autopictureinpicture 属性が最後に設定された動画要素が、許可されている場合は自動的にピクチャー イン ピクチャーになります。
  • ドキュメントが表示されると、ピクチャー イン ピクチャーの動画要素は自動的にドキュメントから外れます。

これで完了です。自動ピクチャー イン ピクチャー機能は、ユーザーがパソコンにインストールしたプログレッシブ ウェブアプリにのみ適用されます。

詳しくは仕様を確認し、公式の PWA サンプルをお試しください。

テストの目的 | Chromestatus トラッカー | Chromium のバグ

ピクチャー イン ピクチャー ウィンドウでの広告スキップのオリジン トライアル

動画広告モデルは通常、プレロール広告で構成されます。コンテンツ プロバイダは、広告を数秒後にスキップできるようにすることがよくあります。残念ながら、ピクチャー イン ピクチャー ウィンドウはインタラクティブではないため、ピクチャー イン ピクチャーで動画を視聴しているユーザーは、現在のところこの操作を行うことができません。

Media Session API がパソコンで利用可能になりました（これまではモバイルのみに対応していました）。新しい skipad メディア セッション アクションを使用して、ピクチャー イン ピクチャーでこのオプションを提供できます。

ピクチャー イン ピクチャー ウィンドウの [広告をスキップ] ボタン
ピクチャー イン ピクチャー ウィンドウの [広告をスキップ] ボタン

この機能を提供するには、setActionHandler() を呼び出すときに skipad で関数を渡します。非表示にするには、null を渡します。以下に示すように、手順は非常に簡単です。

try {
  navigator.mediaSession.setActionHandler('skipad', null);
  showSkipAdButton();
} catch(error) {
    // The "Skip Ad" media session action is not supported.
}

function showSkipAdButton() {
  // The Picture-in-Picture window will show a "Skip Ad" button.
  navigator.mediaSession.setActionHandler('skipad', onSkipAdButtonClick);
}

function onSkipAdButtonClick() {
  // User clicked "Skip Ad" button, let's hide it now.
  navigator.mediaSession.setActionHandler('skipad', null);

  // TODO: Stop ad and play video.
}

公式の「広告をスキップ」サンプルをお試しいただき、この機能の改善点についてお知らせください。

テストの目的 | Chromestatus トラッカー | Chromium のバグ

デスクトップ PWA で自動再生が許可される

すべてのデスクトップ プラットフォームでプログレッシブ ウェブアプリが利用可能になったため、モバイルで適用していたルールをデスクトップにも適用します。インストール済みの PWA で、音声付きの自動再生が許可されるようになりました。なお、これはウェブアプリ マニフェストのスコープ内のページにのみ適用されます。

Chromium のバグ