在 Web Inspector 中调试媒体

媒体元素，例如 <video> 和 <audio>，有时由于可用功能的巨大灵活性而难以调试。内容可以通过多种不同的方式加载，例如从单个文件直接流式传输、从单个文件进行字节范围请求，或从不同来源进行多部分流式传输。过去，很难弄清内容是如何在页面上显示以及它如何与周围其他内容交互的。在 macOS Mojave 10.14.4 中，我们添加了特殊功能，使您更容易理解媒体内容与网络和 JavaScript 活动的关系，特别是这些活动如何会使播放停滞甚至阻止播放。

关联媒体事件和网络活动

有时，媒体播放可能会因网络活动而停滞，例如字节范围请求加载时间过长。以前，无法仅通过 Web Inspector 轻松识别这些问题。然而现在，Web Inspector 提供了一个名为“分组媒体请求”的选项，该选项根据相关的顶级媒体元素组织网络活动。这使得跟踪相关资源（例如字节范围请求或媒体播放列表中的项目）变得更容易。

由于媒体元素不是资源，因此使用通常的“瀑布图”没有意义。取而代之的是，我们创建了一个特殊的 timeline，它记录了媒体元素触发的播放相关事件，例如 loadstart 或 stalled，以及媒体元素的一些基本状态，例如它是否暂停。虚线表示“暂停”，实线表示“播放中”，没有线表示“停止”。如果 <video> 元素进入全屏，将显示一个灰色区域，指示该 <video> 保持全屏模式的时间。在 macOS 上，<video> 元素还可以以一种特殊方式渲染，称为“节能视频播放”，由绿色区域表示。

识别由 JavaScript 引起的媒体问题

然而，有时问题可能由于不正确的 JavaScript 使用或布局问题而出现。对于这些情况，我们还在“时间线”标签页中名为“媒体”的新时间线中，以及在通用时间线概览中添加了相同的事件信息。

类似于“网络”标签页，将媒体事件与附近的脚本活动关联起来，可以快速诊断 JavaScript 导致错误活动发生的情况下的问题。除了这个专用的“媒体”时间线外，所有媒体事件也显示在通用时间线概览中。

诊断节能视频播放的问题

每当 <video> 元素即将在 macOS 上渲染帧时，它会决定是使用电脑的 CPU/GPU 还是显示器本身来合成帧。在显示器可用于帧合成的情况下，通常会更节能。如果您的网站包含全屏视频内容，您应努力遵循这些准则，以确保您的 <video> 能够尽可能频繁地使用显示器合成。

• <video> 必须处于播放状态。
• <video> 必须是全屏的。
• <video> 不得以任何方式被遮挡（例如，不显示控件或其“上方”的任何内容）。

请记住，这些是网页内容本身可能阻止节能视频播放的方式。还有其他原因导致视频可能无法进入节能播放状态，这些原因无法从网页内容中控制，例如连接到外部显示器或设备本身不支持。

WebDriver

从 macOS Mojave 10.14.4 开始，WebDriver 能够访问显示合成帧的总计数，这可用于持续集成测试。

let video = document.querySelector("video");
let videoPlaybackQuality = video.getVideoPlaybackQuality();
videoPlaybackQuality.displayCompositedVideoFrames

每次帧进行显示合成时，该计数都会增加，因此如果计数没有增加，则 <video> 未使用显示合成。

如果您开发的网站以 <video> 为主要内容，请考虑采用这些准则，为您的用户提供更好的体验。

反馈

这些增强功能从 macOS Mojave 10.14.4 和 iOS 12.2 开始可用。您希望我们显示有关媒体元素的更多信息吗？是否有其他符合此“类别”的元素，您希望看到类似的检测工具？请告诉我们！欢迎通过 Twitter (@dcrousso 或 @jonathandavis) 或提交错误报告向我们发送反馈。