WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Explore media formats for the web

Explore media formats for the web

SafariWebMedia
观看原视频

Highlight

Safari 17 新增 JPEG-XL、AVIF、HEIC 三种现代图像格式支持，同时引入 Managed Media Source API，让网页视频流在 iPhone 上也能使用 5G 网络且大幅降低功耗。

核心内容

图像格式的困境

网页上的图片已经用了几十年的老格式。GIF 诞生于 36 年前，只支持 8 位色，动画文件巨大。JPEG 用了 30 多年，适合照片但压缩会损失画质。PNG 支持透明但压缩率不如 JPEG。这些格式所有浏览器都支持，但技术已经落后。

Safari 17 新增了四种现代图像格式，开发者可以按需选择：

  • WebP：Safari 14 已支持，文件比传统格式更小，动画质量接近视频
  • JPEG-XL：新加入，支持无损转换现有 JPEG 文件，体积可缩小 60%
  • AVIF：使用 AV1 视频编码，体积可比 JPEG 小 10 倍，浏览器支持最广泛
  • HEIC：iPhone 和 iPad 拍照的默认格式，在 WKWebView 中可直接硬件加速渲染

（02:56）

让浏览器自己选择格式

开发者不需要在代码里判断浏览器类型。HTML 的 picture 元素可以列出多个备选源，浏览器从上到下选择第一个支持的格式。

<picture>
  <source srcset="image.heic" type="image/heic">
  <source srcset="image.jxl" type="image/jxl">
  <source srcset="image.avif" type="image/avif">
  <img src="image.jpg" alt="描述">
</picture>

关键点：

  • picture 元素内的 source 按顺序匹配
  • 浏览器优先尝试 HEIC，然后是 JPEG-XL，然后是 AVIF
  • 如果都不支持，回退到 img 标签的 JPEG
  • 不需要读取 User-Agent 字符串

（06:59）

视频流的功耗问题

Media Source Extensions（MSE）是 2013 年 W3C 发布的标准，让网页可以控制视频缓冲和分辨率切换。但它把太多控制权交给了网页，浏览器无法优化网络请求时机和功耗。MSE 在 iPhone 上从未启用，因为测试证明会导致电池续航下降。

（11:05）

Managed Media Source API

Safari 17 引入 Managed Media Source，把缓冲控制权交还给浏览器。浏览器决定何时下载数据，让蜂窝调制解调器可以更长时间处于低功耗状态。

迁移代码很简单：

// 检查 Managed Media Source 是否可用
const MediaSource = window.ManagedMediaSource || window.MediaSource;

// 创建视频元素
const video = document.createElement('video');
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);

// 监听缓冲事件
mediaSource.addEventListener('startstreaming', () => {
  // 开始获取新内容
  fetchAndAppendNextSegment();
});

mediaSource.addEventListener('endstreaming', () => {
  // 停止获取，进入低功耗模式
});

// 监听缓冲内容被清理的事件
sourceBuffer.addEventListener('bufferedchange', (event) => {
  // 检查哪些数据被移除了
  console.log('Removed ranges:', event.removedRanges);
});

关键点：

  • ManagedMediaSource 在 Safari 17 的 macOS 和 iPadOS 上默认可用，iPhone 上在实验性标志后可用
  • startstreaming 事件告诉播放器何时开始获取数据
  • endstreaming 事件告诉播放器何时停止，让设备进入低功耗
  • bufferedchange 事件处理缓冲区内容被清理的情况
  • 遵循这些事件提示，就能在 iPhone 和 iPad 上使用 5G 高速网络

（14:49）

AirPlay 支持

MSE 视频无法 AirPlay，因为 AirPlay 需要一个可发送的 URL。解决方案是在 video 元素中添加 HLS 源作为备选：

<video id="my-video" controls>
  <source src="my-video.m3u8" type="application/vnd.apple.mpegurl">
</video>

当用户点击 AirPlay 时，Safari 会自动从 Managed Media Source 切换到 HLS 流。如果不想支持 AirPlay，需要在视频元素上调用 disableRemotePlayback()。

（18:01）

详细内容

现代图像格式的选择策略

JPEG-XL、AVIF 和 HEIC 都支持广色域和 HDR。广色域保存更多颜色信息，HDR 定义了更暗的黑色和更亮的白色。两者结合，户外风景、高对比度场景、复杂肤色都能更好呈现。

选择建议：

  • AVIF 作为首选 fallback，浏览器支持最广泛
  • JPEG-XL 适合需要渐进加载的图片，且可从现有 JPEG 无损转换
  • HEIC 适合 WKWebView 内使用，直接处理 iPhone 上传的照片

（05:53）

使用 HLS.js 简化视频处理

如果不想自己处理 Managed Media Source 的细节，可以使用 HLS.js：

const video = document.getElementById('my-video');

if (video.canPlayType('application/vnd.apple.mpegurl')) {
  // Safari 原生支持 HLS
  video.src = 'my-video.m3u8';
} else if (Hls.isSupported()) {
  // 使用 HLS.js，会自动支持 Managed Media Source
  const hls = new Hls();
  hls.loadSource('my-video.m3u8');
  hls.attachMedia(video);
}

关键点：

  • HLS.js 在 Safari 17 上会自动使用 Managed Media Source
  • 非 Safari 浏览器也能播放 HLS 视频
  • 几行代码就能覆盖大多数浏览器

（19:03）

核心启发

  • 做什么：为网站图片添加 AVIF 和 JPEG-XL 格式支持

    • 为什么值得做：AVIF 可比 JPEG 小 10 倍，JPEG-XL 可从现有 JPEG 无损转换并缩小 60%
    • 怎么开始：使用 picture 元素列出多个 source，让浏览器自动选择

  • 做什么：在视频播放网站中迁移到 Managed Media Source

    • 为什么值得做：iPhone 上首次可用 MSE 类功能，且 5G 下载更快、功耗更低
    • 怎么开始：把 new MediaSource() 替换为 new ManagedMediaSource()，添加 startstreaming 和 endstreaming 事件监听

  • 做什么：为视频添加 AirPlay 支持

    • 为什么值得做：用户期望从手机投屏到电视，MSE 视频原本不支持
    • 怎么开始：在 video 元素内添加 source 子元素指向 HLS 播放列表

  • 做什么：在 WKWebView 应用中直接使用 HEIC 图片

    • 为什么值得做：iPhone 拍照就是 HEIC 格式，无需转换即可显示，且硬件加速渲染
    • 怎么开始：直接把 HEIC 文件作为图片源，WKWebView 在 Safari 17 中原生支持

关联 Session

评论

GitHub Issues · utterances