メディアの更新（Chrome 73）

François Beaufort
François Beaufort
GitHub

この記事では、以下を含む Chrome 73 の新しいメディア機能について説明します。

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

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

<ph type="x-smartling-placeholder">
</ph> キーボードのメディアキー <ph type="x-smartling-placeholder">
</ph> キーボードのメディアキー
をご覧ください。

ユーザーが一時停止キーを押すと、Chrome で再生中のアクティブなメディア要素が 一時停止され、「一時停止」の表示できます。再生キーを押すと、 以前一時停止されていたメディア要素が再開され、「再生」を受け取ります。メディア イベントです。この機能は、Chrome がフォアグラウンドとバックグラウンドのどちらで実行されている場合でも機能します。

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

つまり、こうしたメディア イベントを常にリッスンし、 必要があります。

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 後ほど説明します。

既存のデベロッパー向けドキュメントを確認し、公式メディア セッションのサンプルをご覧ください。

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

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

HDCP Policy Check API を使用することで、ウェブ デベロッパーは、 固有のポリシー。たとえば、HDCP 要件は、リクエストする前に適用できる Widevine ライセンス、メディアの読み込みです。

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

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

API はすべてのプラットフォームで使用できます。ただし、実際のポリシー チェックでは 一部のプラットフォームでは利用できません。例: HDCP ポリシー チェックの約束 Android と Android WebView では NotSupportedError で拒否されます。

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

出荷の意向 | Chrome のステータス トラッカー | Chromium のバグ

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

ページによっては、ピクチャー イン ピクチャーの表示を自動的に開始して、 動画要素たとえば、ビデオ会議ウェブアプリには、 モードを切り替えたときのピクチャー イン ピクチャーの自動動作 ウェブ アプリケーションや他のアプリケーションやタブ。残念ながら ユーザー操作の要件をご覧ください。そこで登場するのが自動ピクチャー イン ピクチャーです。

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

<video autopictureinpicture></video>

大まかな仕組みは次のとおりです。

  • ドキュメントが非表示になると、autopictureinpicture の動画要素 設定済みの場合は自動的にピクチャー イン ピクチャーに入ります。 できます。
  • ドキュメントが表示されると、ピクチャー イン ピクチャーの動画要素 自動的に退出します

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

仕様で詳細を確認し、公式 PWA を試してみましょう。 サンプルをご覧ください。

テストの意図 | Chrome のステータス トラッカー | Chromium のバグ

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

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

パソコンで Media Session API を使用できるようになりました（以前は 新しい skipad メディア セッション アクションを使用して、これを実現できます。 ピクチャー イン ピクチャーのオプション。

<ph type="x-smartling-placeholder">
</ph> ピクチャー イン ピクチャー ウィンドウの [広告をスキップ] ボタン <ph type="x-smartling-placeholder">
</ph> 「広告をスキップ」ピクチャー イン ピクチャー ウィンドウのボタン
をご覧ください。

この機能を利用するには、呼び出し時に skipad を含む関数を渡します。 setActionHandler()。非表示にするには、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.
}

公式の「広告をスキップ」サンプルをご確認のうえ、この機能の使用方法をお知らせください 改善できます。

テストの意図 | Chrome のステータス トラッカー | Chromium のバグ

パソコン PWA の自動再生を許可

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

Chromium のバグ