我能否使用HTML5视频标签获得具有透明背景的视频？

Question

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

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

谢谢。

- DavidE

Answer 1

是的，即使没有Flash，也可以实现这种效果：

• http://hacks.mozilla.org/2009/06/tristan-washing-machine/
• http://jakearchibald.com/scratch/alphavid/

然而，只有非常现代的浏览器支持HTML5视频，所以你应该在考虑使用HTML5时考虑这一点，并提供回退（可能是Flash或仅省略透明度）。

- Lie Ryan

---

第一个演示使用SVG剪切来“创建”视频的alpha区域。第二个演示使用两个HTML5画布以及一个带有显式alpha像素的视频，以在每一帧中明确设置alpha值。这两者都不是带有alpha通道的视频。 - Phrogz

使用Flash，您可以使用FLV文件制作透明背景视频。我在2008年就已经做过了。 - Max S.

我尝试了第二种解决方案。在桌面上可以工作，但在移动设备上无法工作，它应该也能在移动设备上工作吗？ - Derzu

现在您可以使用带有透明度的WebM格式了。https://caniuse.com/#search=webm - movAX13h

Answer 2

Chrome 30以上版本支持视频透明度。

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

- Praveen Vijayan

---

需要使用WebM才能使此工作生效，只能与其一起使用。 - nycynik

这是唯一真正的答案 - 实际使用 <video>。更多信息请参见 https://developers.google.com/web/updates/2013/07/Alpha-transparency-in-Chrome-video。 - mikemaccana

Answer 3

更新：现在Chrome和Firefox支持带alpha通道的Webm。

对于其他浏览器，有一些变通方法，但它们涉及使用Canvas重新渲染视频，而这种方法有点hack。 seeThru 就是一个例子。它在HTML5桌面浏览器（甚至IE9）上运行得非常好，但在移动端上似乎效果不佳。我无法在Android上的Chrome中使其正常工作。它在Firefox for Android上可以工作，但帧率很差。我认为您可能会在移动设备上遇到麻烦，尽管我很乐意被证明是错误的。

- nullability

---

我在移动设备上也没有成功，只有在桌面上成功了。有什么解决方案吗？ - Derzu

你使用Canvas时是否也失去了对视频播放的控制？我想你是这样的。 - Michael Giovanni Pumo

Webm被支持。 - Elijah

更新：Safari现在支持使用H.265编码的MP4中的Alpha通道，具体文档和解释请参见此处：https://supergeekery.com/blog/transparent-video-in-chrome-edge-firefox-and-safari-circa-2022 - Kyle Baker

Answer 4

现在，如果您使用两种不同的视频格式（WebM和HEVC），您可以通过简单的<video>标签创建一个透明度视频，在除Internet Explorer以外的所有主要浏览器中都可以正常工作：

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

注意：WebM版本放在第二个位置很重要，因为Safari目前支持WebM但不支持WebM透明度。

这里有一个可以测试的演示

- Adam Taylor

---

你是如何生成带有透明度的视频的？是使用这里概述的技术：https://kitcross.net/hevc-web-video-alpha-channel/吗？ - Amit

@Amit 是的，我使用Finder生成了HEVC视频。 - Adam Taylor

mp4使用h.265编码似乎也支持透明通道，该通道在iOS Safari中得到支持：https://supergeekery.com/blog/transparent-video-in-chrome-edge-firefox-and-safari-circa-2022 - Kyle Baker

Answer 5

我也曾经为此苦恼。这是我找到的答案。在Adam的回答基础上，以下是更详细的内容，包括如何在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的一部分。

我建议先导出一个带有alpha通道的ProRes4444中间格式，以便在此步骤中不会失去太多质量。 一旦您拥有该文件，制作WebM就像这样简单： ffmpeg -i "your-movie-in-prores.mov" -c:v libvpx-vp9 movie-webm.webm 在此博客文章中查看更多方法。

- Morten J

---

这对我帮助很大，谢谢 :) 重要提示：如果有人阅读此内容，您可能需要将 background: transparent 添加到视频样式中，因为像 normalize 这样的东西会向视频元素添加黑色背景。 - Nicolas R

非常详细的解释，非常感谢！ - Jos

这太棒了，到目前为止我认为这是最好的解决方案，不幸的是它不适用于 Opera。在操作系统上使用 Chrome、Firefox、Brave 和 Safari 取得积极的结果。 - markobarna

Answer 6

此时，唯一真正支持 alpha 通道的视频编解码器是 VP8，Flash 使用它。如果将视频导出为图像序列，则 MP4 可能会支持 alpha 通道，但我相当确定 Ogg 视频文件根本不支持 alpha 通道。这可能是那些坚持使用 Flash 更好的少见情况之一。

- Andrew

Answer 7

虽然视频本身无法实现此功能，但您可以使用画布来绘制视频的帧，除了一定颜色范围内的像素或其他内容。当然，这需要一些javascript等技术。请参见Video Puzzle（目前似乎已经损坏），Exploding Video和Realtime Video -> ASCII。

- cthom06

Answer 8

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

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

- Prathap Parameswar

Answer 9

WebM格式是Chrome > 29的最佳解决方案，但它不支持Firefox IE和Safari，最好的解决方案是使用Flash（wmode="transparent"）。但你必须忘记“iOS”。

- prakashapkota

Answer 10

Quicktime movs导出为动画在Safari中可以工作，但我希望有一个完整的解决方案（或格式）涵盖所有主要浏览器。

- user3893535