音声と動画の更新(Chrome 61)

フランソワ ボーフォール
François Beaufort

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

Chrome では、バッテリー駆動時間を改善するために、動画が Media Source Extensions(MSE)を使用している場合、バックグラウンドで(非表示のタブなどで)動画が再生されると、動画トラックが無効になりました。

これらの変更を調べるには、chrome://media-internals ページに移動し、[info] プロパティでフィルタします。再生中の動画を含むタブがアクティブになると、動画トラックが無効になっていることを示す Selected video track: [] などのメッセージが表示されます。タブが再びアクティブになると、動画トラックは自動的に再有効化されます。

chrome://media-internals ページのログパネル
図 1. chrome://media-internals ページのログパネル

何が起きているのか把握したい方のために、Chrome のバックグラウンドのおおまかな処理を JavaScript コード スニペットに示します。

    var video = document.querySelector('video');
    var selectedVideoTrackIndex;

    document.addEventListener('visibilitychange', function() {
      if (document.hidden) {
        // Disable video track when page is hidden.
        selectedVideoTrackIndex = video.videoTracks.selectedIndex;
        video.videoTracks[selectedVideoTrackIndex].selected = false;
      } else {
        // Re-enable video track when page is not hidden anymore.
        video.videoTracks[selectedVideoTrackIndex].selected = true;
      }
    });

動画トラックが無効になっている場合は、動画ストリームの画質を下げることをおすすめします。上記のように Page Visibility API を使用するだけで、ページが非表示になったことを簡単に検出できます。

次のような制限があります。

  • この最適化は、キーフレーム距離が 5 秒未満の動画にのみ適用されます。
  • 動画に音声トラックが含まれていない場合、動画はバックグラウンドで再生されたときに自動的に一時停止します。

Chromium のバグ

デバイスの回転時に動画を自動で全画面表示する

ビューポートで動画を再生しているときにデバイスを横向きに回転すると、再生モードが自動的に全画面モードに切り替わります。デバイスを縦向きに回転すると、動画はウィンドウ モードに戻ります。

この動作は手動で実装できます。(モバイルウェブ動画再生の記事をご覧ください)。

デバイスの回転時に動画を自動で全画面表示する
図 2. デバイスの回転時に動画を自動で全画面表示

この現象は、次の場合にのみ発生します。

  • デバイスが Android スマートフォン(タブレットではない)であること
  • ユーザーの画面の向きが「自動回転」に設定されている
  • 動画サイズが 200×200 ピクセル以上
  • 動画でネイティブ コントロールを使用しています
  • 動画は現在再生中です
  • 動画の 75% 以上が画面上に表示されている
  • 向きが 90 度(180 度ではなく)回転する
  • 全画面要素がまだない
  • Screen Orientation API を使用して画面がロックされていない

Chromium のバグ