Question

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

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

由于

Answer 1

是的，没有Flash可以做到这一点：

但是，只有非常现代的浏览器支持HTML5视频，在HTML 5中进行部署时应该考虑这一点，并且应该提供后备（可能是Flash或只是省略透明度）。

Answer 2

Chrome 30＆gt;支持视频alpha透明度。

http://updates.html5rocks.com/2013/07/Alpha-transparency-in-Chrome-video

Answer 3

没有。这是浏览器支持的视频编解码器的限制：mp4，ogv和webm目前不支持Alpha通道。

有一些解决方法，但它们涉及使用Canvas重新渲染视频，这有点像黑客。 seeThru就是一个例子。它在HTML5桌面浏览器（甚至IE9）上运行良好，但它在移动设备上似乎不太好用。我无法在Chrome for Android上使用它。它确实可以在Firefox for Android上运行，但是它具有相当糟糕的帧率。我想你可能会因为手机运气不好，虽然我很想被证明是错的。

Answer 4

这几天，如果您使用两种不同的视频格式（WebM和HEVC），则可以使用一个简单的<video>标签将透明的视频在除Internet Explorer之外的所有主要浏览器上运行：

<video>
  <source src="video.webm" type="video/webm">
  <source src="video.mov" type="video/quicktime">
</video>

Here's a demo you can test with

Answer 5

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

首先，Here's a CodePen playground 你可以玩，请随意使用我的视频进行测试。

        <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>

这里是 a full demo page 使用 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 的一部分。

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

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

在 this blog post 中查看更多方法。

Answer 6

目前，真正支持Alpha通道的唯一视频编解码器是Flash使用的VP8。如果视频作为图像序列导出，MP4可能会支持它，但我相当确定Ogg视频文件对alpha通道没有任何支持。这可能是极少数情况下，坚持使用Flash可以更好地为您服务。

Answer 7

虽然视频本身无法做到这一点，但您可以使用画布绘制视频的帧，但颜色范围内的像素除外。这需要一些javascript等当然。见Video Puzzle（目前显然已被破坏），Exploding Video和Realtime Video -> ASCII

Answer 8

使用seeThrou Js库，可以在透明背景下播放MP4文件。您需要在单个视频中结合实际视频和Alpha通道。另外，请确保将视频高度尺寸保持在1400像素以下，因为某些旧的iPhone设备将无法播放尺寸超过2000的视频。这在目前不支持webm的Safari桌面和移动设备中非常有用。

更多细节可以在下面的链接中找到 https://github.com/m90/seeThru

Answer 9

webm格式是Chrome的最佳解决方案＆gt; 29，但Firefox IE和Safari不支持，最好的解决方案是使用Flash（wmode =＆＃34;透明＆＃34;）。但你必须忘记＆＃34; ios＆＃34;。

Answer 10

Quicktime movs作为动画工作导出但仅限于safari。我希望有一个涵盖所有主流浏览器的完整解决方案（或格式）。

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

10 个答案:

支持哪些浏览器？

编码