主要观点：在 Shopify 帮助团队改善页面加载性能时，“带有 alpha 通道的视频”问题频繁出现，需将 UI 模拟视频合成到不一致背景上，如较大的 CSS 背景。探讨了多种处理带有 alpha 通道视频的方法，包括使用不同视频格式和技术。
关键信息：

• 视频格式方面：AV1 压缩比佳但不支持透明度，AVIF 支持透明度但在 Safari 中存在问题，VP9 和 HEVC 支持度不同且各有优劣。
• 技术方面：手动将视频拆分为两部分，用 WebGL 片段着色器应用底部的 alpha 通道作为顶部的掩码可减小文件大小；已发布处理渲染的 web 组件stacked-alpha-video，可通过<video>控制播放等；ffmpeg 可用于视频编码，需注意编码参数和视频范围等。
  重要细节：
• AVIF 存储为两个 AV1 流，其中一个是表示 alpha 通道的仅亮度视频。
• Safari 支持 AVIF 透明度但不支持动画 AVIF 的透明度，且性能极差。
• Chrome 和 Firefox 渲染 AVIF 时即使高端设备也难达 60fps，Android 更差。
• 动画 AVIF 在某些方面存在限制，如无法显示浏览器视频播放控制等。
• 编码 VP9 和 HEVC 时的参数设置及注意事项。
• 手动拆分视频的方法及效果，不同设备对 AV1 和 HEVC 的支持情况。
• 发布的 web 组件可通过<video>控制播放且可访问内部 WebGL 部分，但缺少使用原生<video>控制的功能。
• ffmpeg 编码时注意视频范围，8bit 可能导致梯度出现条带，可改为 10bit 像素格式。