- Chrome now disables video tracks when an MSE video is played in the background to optimize performance.
- Video will go fullscreen when device is rotated.
Background video track optimizations (MSE only)
To improve battery life, Chrome now disables video tracks when the video is played in the background (e.g., in a non-visible tab) if the video uses Media Source Extensions (MSE).
You can inspect these changes by going to the chrome://media-internals page,
and filter for the "info" property. When the tab containing a playing video
becomes inactive, you'll see a message like Selected video track: []
indicating that the video track has been disabled. When the tab becomes active
again, video track is re-enabled automatically.
chrome://media-internals page
For those who want to understand what is happening, here's a JavaScript code snippet that shows you what Chrome is roughly doing behind the scenes.
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;
}
});
You may want to reduce the quality of the video stream when video track is disabled. It would be as simple as using the Page Visibility API as shown above to detect when a page is hidden.
And here are some restrictions:
- This optimization only applies to videos with a keyframe distance < 5s.
- If the video doesn't contain any audio tracks, the video will be automatically paused when played in the background.
Automatic video fullscreen when device is rotated
If you rotate a device to landscape while a video is playing in the viewport, playback will automatically switch to fullscreen mode. Rotating the device to portrait puts the video back to windowed mode.
Note that you can manually implement this behavior yourself. (See the Mobile Web Video Playback article).
This magic behavior only happens when:
- device is an Android phone (not a tablet)
- user's screen orientation is set to "Auto-rotate"
- video size is at least 200x200px
- video uses native controls
- video is currently playing
- at least 75% of the video is visible (on-screen)
- orientation rotates by 90 degrees (not 180 degrees)
- there is no fullscreen element yet
- screen is not locked using the Screen Orientation API