我可以使用 HTML5 视频标签制作具有透明背景的视频吗？

Question

我们在绿屏上拍摄了一位发言人，并准备好多种格式的视频文件。

使用 Flash，我们可以在 param 和 embed 标签中使用 wmode 透明，但是 HTML5 中的 video 和 source 标签有类似的东西吗？是否可以正确保存 .m4v 或 .ogv 视频，以便我们可以在浏览器上播放这些具有透明背景的文件？

谢谢

原文由 DavidE 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我也为此苦苦挣扎。这是我发现的。扩展亚当的答案，这里有更多细节，包括如何在 Webm 容器中使用 alpha 编码 VP9。

首先， 这是一个您可以玩的 CodePen 游乐场，请随意使用我的视频进行测试。

         <video width="600" height="100%" autoplay loop muted playsinline>
        <source src="https://rotato.netlify.app/alpha-demo/movie-hevc.mov" type='video/mp4'; codecs="hvc1">
        <source src="https://rotato.netlify.app/alpha-demo/movie-webm.webm" type="video/webm">
        </video>

这是 一个完整的演示页面，使用 z-index 在某些元素的顶部和下方分层透明视频。 （您可以克隆 Webflow 模板）

因此，我们需要一个适用于 Chrome 的 Webm 电影和一个带 Alpha 的 HEVC（自 2019 年以来在所有平台上都支持 Safari）

支持哪些浏览器？

对于 Chrome，我已经在 2013 版本 30 上成功测试。 （ Caniuse webm 似乎没有说支持哪个 webm 编解码器，所以我不得不尝试我的方式）。早期版本的 chrome 似乎呈现黑色区域。

对于 Safari，它更简单： Catalina (2019) 或 iOS 11 (2019)

编码

根据您使用的编辑应用程序，我建议直接使用 Alpha 导出 HEVC。

但是许多应用程序不支持 Webm 格式，尤其是在 Mac 上，因为它不是 AVFoundation 的一部分。

我建议导出像 ProRes4444 这样带有 alpha 通道的中间格式，以免在此步骤中损失太多质量。一旦你有了那个文件，制作你的 webm 就像

ffmpeg -i "your-movie-in-prores.mov" -c:v libvpx-vp9 movie-webm.webm

在 此博客文章 中查看更多方法。

原文由 Morten J 发布，翻译遵循 CC BY-SA 4.0 许可协议