- Chrome では、パフォーマンスを最適化するために、MSE 動画がバックグラウンドで再生されているときに動画トラックを無効にするようになりました。
- デバイスを回転させると動画が全画面表示になります。
バックグラウンド動画トラックの最適化(MSE のみ)
バッテリー駆動時間を改善するため、動画が Media Source Extensions(MSE)を使用している場合、バックグラウンドで(非表示のタブなどで)動画を再生すると、動画トラックが無効になります。
これらの変更を調べるには、chrome://media-internals
ページに移動し、「info」プロパティでフィルタします。再生中の動画を含むタブが非アクティブになると、動画トラックが無効になっていることを示す Selected video track: []
のようなメッセージが表示されます。タブが再びアクティブになると、動画トラックは自動的に再び有効になります。
何が起きているのかを知りたい方のために、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 秒未満の動画にのみ適用されます。
- 動画に音声トラックが含まれていない場合、バックグラウンドでの再生は自動的に一時停止されます。
デバイスを回転させたときに動画を自動的に全画面表示
ビューポートで動画を再生しているときにデバイスを横向きにすると、再生が自動的に全画面モードに切り替わります。デバイスを縦向きに回転すると、動画がウィンドウ モードに戻ります。
この動作は、手動で実装できます。(モバイルウェブ動画の再生に関する記事をご覧ください)。
この魔法のような動作は次の場合にのみ発生します。
- デバイスが Android スマートフォンである(タブレットではない)
- 画面の向きが「自動回転」に設定されている
- 動画サイズが 200×200 ピクセル以上
- 動画はネイティブ コントロールを使用しています
- 動画は現在再生中です
- 動画の 75% 以上が画面上に表示されている
- 向きが(180 度ではなく)90 度回転する
- 全画面要素はまだありません
- Screen Orientation API を使用して画面がロックされていない