Chrome 61 中的音频/视频更新

François Beaufort
François Beaufort
GitHub

后台视频轨道优化（仅限 MSE）

为了延长电池续航时间，如果视频使用 Media Source Extensions (MSE)，Chrome 现在会在视频在后台（例如在不可见的标签页中）播放时停用视频轨道。

您可以前往 chrome://media-internals 页面，然后过滤“信息”属性，以检查这些更改。当包含正在播放视频的标签页变为非活动状态时，您会看到一条类似 Selected video track: [] 的消息，表明视频轨道已被停用。当标签页再次变为有效状态时，视频轨道会自动重新启用。

chrome://media-internals 页面中的日志面板
图 1. chrome://media-internals 页面中的“日志”面板

对于想要了解幕后情况的用户，以下 JavaScript 代码段可让您大致了解 Chrome 在幕后执行的操作。

    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;
      }
    });

当视频轨道处于停用状态时，您可能需要降低视频流的质量。这非常简单，只需使用上面的页面可见性 API 来检测网页何时处于隐藏状态即可。

以下是一些限制：

  • 此优化仅适用于关键帧距离小于 5 秒的视频。
  • 如果视频不包含任何音轨，则在后台播放时会自动暂停。

Chromium Bug

设备旋转时自动全屏播放视频

如果您在视频于视口中播放时将设备旋转为横屏模式，播放将自动切换为全屏模式。将设备旋转为纵向后，视频会恢复为窗口模式。

请注意，您可以自行手动实现此行为。（请参阅移动网站视频播放一文）。

设备旋转时自动全屏播放视频
图 2. 设备旋转时自动全屏显示视频

只有在以下情况下，才会出现这种神奇的行为：

  • 设备是 Android 手机（而非平板电脑）
  • 用户的屏幕方向设置为“自动旋转”
  • 视频尺寸不小于 200x200 像素
  • 视频使用原生控件
  • 当前正在播放视频
  • 至少 75% 的视频可见（在屏幕上显示）
  • 方向旋转 90 度（而非 180 度）
  • 尚无全屏元素
  • 屏幕未通过 Screen Orientation API 锁定

Chromium Bug