この記事では、Chrome 73 で導入された以下の新しいメディア機能について説明します。
- パソコンでのメディア再生の操作で、ハードウェア メディアキーがサポートされるようになりました。
- ウェブ デベロッパーは、特定の HDCP ポリシーを適用できるかどうかを問い合わせることができます。
- デスクトップ PWA の自動ピクチャー イン ピクチャーとピクチャー イン ピクチャーの「広告をスキップ」がオリジン トライアルで提供されます。
- デスクトップ PWA では、音声付きで自動再生できます。
ハードウェア メディアキーのサポート
最近の多くのキーボードには、再生/一時停止、前後のトラックなど、基本的なメディア再生機能を制御するキーがあります。ヘッドセットにも搭載されています。これまで、パソコン ユーザーはこれらのメディアキーを使用して Chrome での音声や動画の再生を操作できませんでした。今日、この点は変わります。
![キーボードのメディアキー](https://developer.chrome.com/static/blog/media-updates-in-chrome-73/image/keyboard-media-keys-b9e8bca41e6ac.jpeg?authuser=6&hl=ja)
ユーザーが一時停止キーを押すと、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 を利用できるようになりました(以前はモバイルでのみサポートされていました)。ウェブ デベロッパーは、メディアキーによってトリガーされるメディア関連のイベント(トラックの変更など)を処理できます。現在、イベント 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 は後で対応する予定です。
既存のデベロッパー向けドキュメントをご確認のうえ、公式のメディア セッションのサンプルをお試しください。
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 用の自動ピクチャー イン ピクチャーのオリジン トライアル
動画要素用にピクチャー イン ピクチャーの開始と終了を自動的に行う必要があるページもあります。たとえば、ビデオ会議のウェブアプリでは、ユーザーがウェブアプリと他のアプリケーションやタブを行き来したときに、自動ピクチャー イン ピクチャー動作を利用できます。残念ながら、これはユーザー操作の要件では不可能です。そこで登場したのが自動ピクチャー イン ピクチャーです。
これらのタブとアプリの切り替えをサポートするために、新しい autopictureinpicture
属性が <video>
要素に追加されています。
<video autopictureinpicture></video>
大まかな仕組みは次のとおりです。
- ドキュメントが非表示になると、
autopictureinpicture
属性が最後に設定された動画要素が自動的にピクチャー イン ピクチャーに切り替わります(許可されている場合)。 - ドキュメントが表示されると、ピクチャー イン ピクチャーの動画要素は自動的にそのドキュメントから消えます。
以上で終了です。自動ピクチャー イン ピクチャー機能は、ユーザーがパソコンにインストールしたプログレッシブ ウェブアプリにのみ適用されます。
specで詳細を確認し、公式の PWA サンプルを使用してお試しください。
テストの目的 | Chromestatus トラッカー | Chromium のバグ
ピクチャー イン ピクチャー ウィンドウでのスキップ広告のオリジン トライアル
通常、動画広告モデルはプレロール広告で構成されます。多くの場合、コンテンツ プロバイダは数秒後に広告をスキップできる機能を備えています。残念ながら、ピクチャー イン ピクチャー ウィンドウはインタラクティブではないため、現在のユーザーはピクチャー イン ピクチャーで動画を視聴することはできません。
Media Session API がパソコンで利用できるようになったため(以前はモバイルでのみサポートされていました)、新しい skipad
メディア セッション アクションを使用して ピクチャー イン ピクチャーでこのオプションを提供できます。
![ピクチャー イン ピクチャー ウィンドウの [広告をスキップ] ボタン](https://developer.chrome.com/static/blog/media-updates-in-chrome-73/image/skip-ad-button-picture-095637cf16a4b.png?authuser=6&hl=ja)
この機能を提供するには、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 で音声付きの自動再生を許可しました。このポリシーは、ウェブアプリ マニフェストのスコープ内のページにのみ適用されます。