- パフォーマンスを最適化するため、Chrome では MSE 動画がバックグラウンドで再生されると動画トラックが無効になります。
- デバイスを回転させると動画が全画面表示になります。
バックグラウンド動画トラックの最適化(MSE のみ)
バッテリーを長持ちさせるため、動画がバックグラウンド(非表示のタブなど)で再生され、その動画が Media Source Extensions(MSE)を使用している場合、Chrome は動画トラックを無効にするようになりました。
これらの変更を確認するには、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 を使用して、ページが非表示になったタイミングを検出するだけです。
以下の制限事項があります。
デバイスを回転させたときに動画を自動的に全画面表示にする
動画がビューポートで再生されているときにデバイスを横向きにすると、再生が自動的に全画面モードに切り替わります。デバイスを縦向きにすると、動画はウィンドウ モードに戻ります。
なお、この動作はご自身で手動で実装できます。(モバイルウェブでの動画再生の記事を参照)。
この魔法のような動作は、次の場合にのみ発生します。