55

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

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

谢谢

4

10 回答 10

32

是的，这种事情在没有 Flash 的情况下是可能的：

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

于 2010-11-05T13:18:41.267 回答
30

Chrome 30> 支持视频 Alpha 透明度。

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

于 2013-08-15T05:25:30.830 回答
23

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

对于其他浏览器，有一些解决方法，但它们涉及使用 Canvas 重新渲染视频，这有点像 hack。seeThru就是一个例子。它在 HTML5 桌面浏览器（甚至 IE9）上运行良好，但在移动设备上似乎运行不佳。我无法让它在 Chrome for Android 上运行。它确实可以在 Firefox for Android 上运行，但帧率非常糟糕。我认为您可能对移动设备不走运，尽管我很想被证明是错误的。

于 2013-03-12T19:08:16.700 回答
11

如今，如果您使用两种不同的视频格式（WebM 和 HEVC），您可以拥有一个透明视频，该视频可在除 Internet Explorer 之外的所有主要浏览器中使用，只需一个简单的<video>标签：

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

这是一个您可以测试的演示

于 2020-08-27T01:10:10.347 回答
8

我也为此苦苦挣扎。这是我发现的。扩展亚当的答案，这里有更多细节，包括如何在 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

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

于 2021-01-07T13:40:52.193 回答
2

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

于 2010-11-05T12:41:08.303 回答
2

虽然视频本身无法做到这一点，但您可以使用画布来绘制视频的帧，除了颜色范围内的像素或其他内容。当然，这需要一些 javascript 之类的。请参阅Video Puzzle（目前显然已损坏）、Exploding Video和Realtime Video -> ASCII

于 2010-11-05T12:50:58.260 回答
1

使用 seeThrou Js 库可以在透明背景下播放 Mp4 文件。您只需在单个视频中组合实际视频和 Alpha 通道即可。还要确保将视频高度尺寸保持在 1400 像素以下，因为一些旧的 iphone 设备不会播放尺寸超过 2000 的视频。这在目前不支持 webm 的 safari 桌面和移动设备中非常有用。

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

于 2018-11-05T05:58:56.633 回答
0

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

于 2014-07-30T22:54:05.447 回答
0

webm 格式是 Chrome > 29 的最佳解决方案，但在 Firefox IE 和 Safari 中不支持，最佳解决方案是使用 Flash (wmode="transparent")。但你必须忘记“ios”。

于 2013-12-10T10:45:33.933 回答