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

François Beaufort
François Beaufort

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

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

これらの変更を確認するには、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 度ではない)
  • まだ全画面表示要素がない
  • 画面の向き API を使用して画面がロックされていない

Chromium バグ