メディアの更新（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 要件など）を適用できるかどうかを照会できるようになりました。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 バージョンを確認するには、以前のデベロッパー向けドキュメントをご覧ください。また、公式サンプルをお試しください。

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

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

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

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

<video autopictureinpicture></video>

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

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

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

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

テストの目的 | Chromestatus Tracker | 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 Tracker | Chromium バグ

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

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

Chromium のバグ