メディアの更新(Chrome 61)

François Beaufort
François Beaufort

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

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

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

chrome://media-internals ページのログパネル
[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 のバグ

デバイスを回転させたときに動画を自動的に全画面表示

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

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

デバイスを回転させたときに動画を自動的に全画面表示

この魔法のような動作は次の場合にのみ発生します。

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

Chromium のバグ