探索网页媒体格式

♪ ♪

Jean-Yves：欢迎收看 “探索网页媒体格式” 我是 Jean-Yves Avenard 一名 WebKit 工程师 今天我将介绍 Safari 浏览器支持的媒体格式 重点是图像和视频 以及在 Safari 浏览器 17 中 我们提供的一些新技术 我们正在添加 对一些新图像格式的支持 在简单介绍最常见的图像格式之后 我将帮助你选择 适合你网站的正确格式 然后 我将指导你使用 Safari 浏览器 17 中的全新技术 来优化 MSE (媒体源扩展) 最后 我将介绍如何使用媒体源扩展 为你的视频添加隔空播放支持 多年来 有三种格式被广泛使用 它们受所有浏览器支持 并且易于创建和部署 但在过去十年中 技术飞速发展 现在有优秀的新格式可用了 现有的格式包括 GIF、JPEG 和 PNG 让我们更详细地了解一下它们 GIF 或者 用法国式的读法 “jeef” 是一种 36 年前引入的格式 最适合简单动画、 表情包和社交媒体内容 它只支持 8 位颜色 因此不支持完整的色彩调色板 由于它是一种无损格式 文件大小可能相当大 因此不太适合用于较大的动画 然后是 JPEG 它在 30 多年前被引入 它的一个很棒的特点是渐进加载 你可以在完全加载前看到部分图像 这在网络速度不够快的时候很方便 JPEG 最适合用于照片 与其他颜色和细节丰富的图像 它是一种有损格式 这意味着在压缩过程中 会丢失一些图像数据 压缩还可以实现 较小的文件大小和更快的加载时间 考虑到 GIF 的许多限制 PNG 在 26 年前被创建 PNG 支持透明度 这有助于将图像叠加在一起 它非常适合具有大面积纯色的图像 或商标等清晰文本 以及 WebKit JavaScript 的 Squirrel Fish 等插图 它是无损的 但压缩效果不如 JPEG 因此不太适合用来压缩 具有大量颜色的大图像 它设计之初是为了取代 GIF 与 GIF 类似 PNG 支持动画 尽管我很少在实际应用中看到

通过使用这些格式 你可以覆盖所有用户 无论他们使用什么网络浏览器 Safari 浏览器 17 还支持 额外四种现代格式 它们是除了传统格式之外 你会想要使用的格式 而这也是最合理的地方 它们都非常出色 并且几乎都可以互换使用 它们还都有各自独特的优势 WebP 是在 Safari 浏览器 14 和 macOS Big Sur 中添加的 它是一种现代图像格式 利用先进的压缩算法 在不牺牲图像质量的情况下 实现了更小的文件大小 WebP 文件通常 比那些早期的图像格式更小 这有助于改善网站性能 以及缩短加载时间 WebP 还可以实现 具有类似视频质量的动画效果 因此在由于文件大小太大或颜色不足 而不适合使用 GIF 时 可以选择使用 WebP JPEG-XL 是 Safari 浏览器 17 中 一项令人兴奋的新支持格式 这是一种新图像格式 旨在提供高压缩比和图像质量 JPEG-XL 使用一种名为 “Modular Entropy Coding”的新压缩算法 在调整压缩比时能有强大的灵活性 就像 JPEG JPEG-XL 非常适用于 那些在网速慢的环境下传输的图像 这样 在整个图像被完全加载之前 用户就可以看到部分图像 JPEG-XL 的一个关键特点是 可以进行无损转换 即从现有的 JPEG 文件 转换为 JPEG-XL 时不会丢失任何数据 同时可以大幅缩小 文件大小 高达 60% 它是一个相对较新的格式 因此可能还没有 被所有设备和浏览器广泛支持 AVIF 是另一种现代图像格式 它使用 AV1 视频编解码器 实现高压缩比而不损失图像质量 它被所有浏览器广泛支持 非常适合用于动态照片 并支持高达 12 位的色深 它也有最广泛的支持 你应该将其作为备选方案 AVIF 文件可以比 JPEG 文件小十倍 在 Safari 浏览器 17 中 我们添加了对 HEIC (HEIF) 的支持 它是一种使用 HEVC 视频编解码器压缩算法 实现小文件大小的图像格式 但由于它不被其他平台广泛支持 你可能只想将其用作替代格式 这是 iPhone 和 iPad 用于保存照片的格式 因此你可以直接处理 从 iPhone 上传的照片而无需转换 如果你打算在 App 内使用 WKWebView 显示图像 那么这就是你应该使用的格式 因为它支持硬件加速 并且可以被快速高效地渲染

不过 JPEG-XL、AVIF 和 HEIC 还都有一个关键优势： 它们都支持广色域和 HDR 支持数十亿种颜色的宽色域 能让更多颜色 被保留在文件中 呈现在屏幕上

HDR 可以更好地 定义暗部的深度、 亮部的亮度以及图像的曝光程度 这些特点结合起来 就让你可以在户外风景、 高对比度的明亮场景中 获得更加生动的效果 或完美地呈现出 那些美丽、复杂的肤色

由于你希望你的网站继续支持 所有广泛使用的网页浏览器 因此在未来的几年中 你可能仍需要 提供 GIF、JPEG 和 PNG 格式的图像

然而 通过提供这些额外的格式 你可以使你的网站加载速度更快 减少带宽的使用 同时仍然保持兼容性 你并不需要在这些格式中做出选择 让我向你展示怎么做 使用 JPEG-XL 图像 声明一个 image 元素 意味着不支持该格式的浏览器 和较旧的浏览器将显示损坏的图像

HTML 中的 picture 元素 允许你指定备用图像源 使浏览器可以选择其支持的格式 你甚至可以提供多个备用图像源 优先选择性能最佳的格式 浏览器将按照列表 自上而下查找可用格式 因此在这个示例的浏览器中 如果支持 会优先使用 HEIC 如果没有找到匹配项 或在过程中解码失败 则选择 image 元素源的 URL 这样 无论设备支持何种格式 都可轻松地为用户提供适当的格式 而无需查看用户代理字符串 或担心用户会使用什么浏览器 你不需要选择 让浏览器来决定 现在我们了解了 可以使用的现代图像格式 以及何时使用它们 让我们来看看视频 具体来说 我们来深入了解 自适应流媒体视频 网站上视频呈现的发展非常精彩 自网页的发展初期以来 视频呈现已经取得了长足的进步 以下是网站视频呈现发展的 一些关键里程碑 在网页的发展初期 由于技术限制 视频在网站上并不常用 网站主要由文本和静态图像组成 在 21 世纪初 像 Flash 和 QuickTime 这样的浏览器插件 成为在网站上添加视频的流行方式 2010 年 随着 HTML5 的引入 视频可以直接被嵌入到网页中 而无需使用这些插件 这使得在网站上添加视频更加容易 并且在视频内容的显示和播放上 具有更大的灵活性和控制性 而 WebKit 就在革命前沿 随着移动设备的兴起 网站能够在较小的屏幕上 显示视频内容变得越来越重要 这促进了新技术的发展 使网站能适应不同屏幕大小和方向 HTTP Live Streaming 是由 Apple 于 2009 年引入的 HLS 的一个关键特性是 它支持自适应比特率流媒体 根据用户的 互联网连接速度和设备功能 提供最佳的视频质量 HLS 中的自适应流媒体 通过将视频内容分成小片段 通常为 2 到 10 秒的长度 进行编码 每个段以多个比特率进行编码 并且这些不同比特率版本通过一个 M3U8 多变体播放列表格式的 清单文件提供给客户端 HLS 在选择最合适的变体方面 做得非常出色 它非常简单易用 是最适合最终用户的解决方案 但在桌面上 并非所有浏览器都支持 HLS 即使在今天 也只有 Safari 浏览器支持它 Web 开发者希望获得 更多的控制权和灵活性 比如媒体数据的选择和传输 或者在桌面上 播放 DRMed 内容的能力 因此 在 2013 年 W3C 发布了媒体源扩展 Safari 浏览器 8 和其他浏览器 迅速添加了对它的支持 媒体源扩展 (MSE) 是一个底层工具包 通过给予网页更多的控制和责任 来管理缓冲和分辨率 从而实现自适应流 整体而言 媒体源扩展 对 Web 开发者而言是个革命性的工具 它使开发者能在网页上 开发高质量的流媒体体验 并成为现在最常用的网页视频技术 媒体源扩展也有一些缺点 它在缓冲级别的管理、 网络访问的时机和数量 以及媒体变体的选择方面 做得并不是特别好 这些效率低下的问题 在现代通用计算机等 功能相对强大的设备上 几乎可以忽略不计 移动设备上的耗电量 比 HLS 原生播放器高得多 所以媒体源扩展 从未在 iPhone 上可用 因为我们无法在使用媒体源扩展时 实现所需的电池节省 我们对各种网站的测试证明 启用媒体源扩展将导致 电池寿命的缩减

在功能有限的设备上 或网络连接不稳定的地方 使用 MediaSource API 实现与 HLS 相同的播放质量 可能会很困难

其中一个原因是 媒体源扩展将流媒体数据的控制权 从用户代理 转移给网页中运行的 App 这种控制权的转移 增加了一些低效的因素 页面并没有与用户代理拥有 相同的知识水平甚至目标 例如它们可能寻求 最便宜的网络连接路径 而这通常会导致更高的电量消耗 今年 我们希望解决这些缺点 并努力找到一种 将媒体源扩展的灵活性 与 HLS 的高效性结合的方法 因此 我非常高兴地介绍这项 将媒体源扩展的优势 与 HLS 的特点 结合在一起的新技术 Managed Media Source API “托管”媒体源是指将 对媒体源及其关联对象的更多控制权 移交给浏览器的媒体源 这使媒体网站作者更容易 在功能受限的设备上 支持流媒体播放 同时允许用户代理 回应可用内存和网络能力的变化 让我们看看 与旧的媒体源扩展相比的一些区别 托管媒体源可以通过告知网页 何时是缓冲更多媒体数据的好时机 来降低电量消耗 在不缓冲数据时 它使蜂窝调制解调器能 更长时间进入低功耗状态 从而延长电池寿命 当系统进入低内存状态时 托管媒体源会智能地清理 未使用或废弃的缓冲内存 使页面更加高效 由于托管媒体源追踪 缓冲应该开始和停止的时机 页面更容易检测低缓冲 和全缓冲状态 浏览器会完成这个工作

有了这些改进 Safari 浏览器可以通过 5G 调制解调器发送媒体请求 这使你的网站 可以使用快速的 5G 网络 来快速加载媒体数据 同时消耗最少的电量 如果你需要播放实时节目 托管媒体源将自动检测到实时节目 并切到可用的 LTE 或 4G 以延长电池寿命 你仍然掌控着一切 你仍然可以控制要获取的分辨率 以及下载每个段的方式和来源 托管媒体源只提供提示 以及更高效的媒体源扩展版本 通过使用托管媒体源 你可以节省带宽 延长电池寿命 使用户不仅能够在 iPhone 还能在 iPad 和 Mac 更长时间观看你的视频 让我向你展示如何轻松地 从媒体源扩展迁移到托管媒体源 将你的视频播放器从媒体源扩展 迁移到托管媒体源非常简单 只需要几个步骤 这里 我会打开一个 简单的 HTML 页面 我之前测试媒体源扩展开发时 多次用过这个页面 页面创建一个 video 元素 加载 12 秒的数据 然后播放 所有逻辑实际上都在实用程序文件 mediasource.js 中 让我们来看看这个文件 特别是 runWithMSE 方法 等页面加载完毕后 RunwithMSE 创建一个 video 元素 将其附加到一个 MediaSource 对象上 并将对象添加到 HTML 主体 首先 你需要确保托管媒体源可用 这很简单 只需检查 定义 ManagedMediaSource 对象的文档 如果不可用 就使用媒体源扩展 然后 将所有对 MediaSource 的调用 替换为 ManagedMediaSource 本身 我认为另一种更简单的方式是 覆盖 MediaSource 本身 像这样： 定义一个 getMediaSource() 方法 并设置一个 MediaSource 的替代实现

现在 无论何时提到 MediaSource 你实际上都在使用 ManagedMediaSource 你应该总是优先使用托管媒体源 而不是较旧的媒体源扩展 现在回到我的 HTML 页面

在创建 SourceBuffer 之后 现在是 ManagedSourceBuffer 你要添加两个事件处理器 Startstreaming 会通知播放器 何时应开始获取新内容 并将内容添加到 托管的 sourceBuffer

另一个事件处理器 处理“endstreaming”事件 通知播放器何时停止获取新数据 用户代理现在确定已有足够的数据 现在可以进入低功耗模式了 出于演示目的 endstreaming 事件处理器 只是一个占位符 与媒体源扩展不同 sourceBuffer 可能随时会清除内容 而是不仅仅在追加数据时 使用媒体源扩展时 永远不要假定 缓冲范围仅在追加新数据时增加 这将导致播放停顿 媒体源扩展规范鼓励你定期检查 因此 你还需要 为 bufferedchange 事件 添加一个事件处理器 检查哪些数据被清除了

如果遵循 Managed Media Source 事件的指导 并且只在元素要求时追加数据 你将在 iPhone 和 iPad 上 获得 5G 速度 使用户能够享受更高的分辨率、 更短的重新缓冲时间 和最佳的电池寿命 现在 你已经准备好 使用 Safari 浏览器 17 中的 新 ManagedMediaSource 来处理自适应流媒体 不过 如果你只对 Apple 设备感兴趣 那么使用 HLS 可能会更有意义 还有一件事是你的用户 希望继续看到的： 通过隔空播放将内容播放到 他们喜爱的电视上 使用原生 HLS 的一个优点就是 自动支持隔空播放 通过隔空播放 你可以坐在沙发上 将视频从手机 播放到大屏幕的隔空播放设备上 隔空播放需要一个可发送的 URL 但在媒体源扩展中这并不存在 这就产生了一个问题 我们也一直想解决 在之前谈到选择正确的图像格式时 我向你展示了如何通过 picture 元素添加替代源 video 元素也提供了相同的机制 只需将你的 HTTP Live Streaming 播放列表 添加到 video 元素的 子 source 元素中 当用户隔空播放你的内容时 Safari 浏览器将从托管媒体源切换到 在隔空播放设备上 播放 HLS 流 Safari 浏览器会自动将隔空播放图标 添加到视频播放器控件上 让用户隔空播放视频 如果这听起来太复杂了 你可以使用一些框架 比如 HLS.js 它会自动支持可用的 Managed Media Source 并替你做好所有困难的工作 使用 HLS.js 处理视频 在所有浏览器上都相当简单易用 甚至在那些没有 HLS 原生支持的浏览器上也是如此 首先 你需要像往常一样 在 HTML 文件中创建一个 video 元素 我们首先检查 浏览器是否原生支持 HLS 如果支持 我们可以直接将 video 元素的源属性设置为清单 URL 如果不支持 我们检查是否可以运行 HLS.js 如果可以 创建一个 HLS.js 库的新实例 并将其附加到 ID 为 “my-video”的 video 元素上 然后加载 HLS 播放列表文件 在这里是 my-video.m3u8 这就完成了 通过这些步骤 你应该能在大多数 浏览器上播放 HLS 视频

设计托管媒体源扩展时 我们希望确保没有遗漏什么 并确保用户能够获得 与过去水平一致的功能 因此 为了在 Mac、iPad 和 iPhone 上 激活托管媒体源扩展 你的播放器必须提供一个 隔空播放源替代方案 你仍然可以在没有替代方案的情况下 使用托管媒体元扩展 但必须通过从 Remote Playback API 调用媒体元素的 disableRemotePlayback 来明确禁用隔空播放功能 这样就可以了 托管媒体源扩展同样支持 所有我们去年添加的技术 例如同播共享、 空间化音频 和 HDR 托管媒体源扩展在 macOS 和 iPad OS 上的 Safari 浏览器 17 中可用 并在 iPhone 作为实验性功能进行测试 我们非常期待它最终 能在 iPhone 上可用 我希望你能尝试新的图像格式 并试验 Managed Media Source 请确保在 Safari 浏览器上 测试你的网站 此外 我们每两周发布一次 Safari 浏览器技术预览版本 你可以在里面测试最新的功能 并在最终用户使用之前进行测试 与所有积极开发的程序一样 故障和错误时不时会出现 如果你遇到这些问题 请向 bugs.webkit.org 报告 我们非常感谢你的反馈 你也可以提交评论或建议 我们一直在倾听开发者的声音 你可以在“CSS 新功能”中了解 有关 Safari 浏览器中的新 CSS 特性 还可以看 “重新发现 Safari 浏览器开发者功能” 以了解如何打开功能标志 以尝试 Managed Media Source 感谢你的观看 ♪ ♪