Media Updates in Chrome 61

• Chrome now disables video tracks when a 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 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.

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.

Chromium Bug

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 implement manually this behaviour yourself. (See the Mobile Web Video Playback article).

This magic behaviour 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

Chromium Bug