我可以使用HTML5视频标签制作透明背景的视频吗？
Dav*_*idE 41 html5 mp4 html5-video
我们在绿色屏幕上拍摄了一位发言人,并准备好多种格式的视频文件.
使用Flash,我们可以在param和embed标签中使用wmode透明,但HTML5中的视频和源标签是否与此类似？是否可以正确保存.m4v或.ogv视频,以便我们可以在浏览器中播放具有透明背景的这些文件？
谢谢
Lie*_*yan 28
是的,没有Flash,这种事情是可能的:
- http://hacks.mozilla.org/2009/06/tristan-washing-machine/
- http://jakearchibald.com/scratch/alphavid/
但是,只有非常现代的浏览器支持HTML5视频,在HTML 5中进行部署时应该考虑这一点,并且应该提供后备(可能是Flash或只是省略透明度).
- 第一个演示使用SVG裁剪为视频"创建"alpha区域.第二演示使用两个HTML5画布与[明确的阿尔法像素(http://jakearchibald.com/scratch/alphavid/compressed.mp4)明确地设置每个帧的alpha一个视频一起.这些都不是具有Alpha通道的视频. (29认同)
Pra*_*yan 23
Chrome 30>支持视频Alpha透明度.
http://updates.html5rocks.com/2013/07/Alpha-transparency-in-Chrome-video
- WebM是必需的,只能使用它. (8认同)
Ada*_*lor 10
现在，如果您使用两种不同的视频格式（WebM 和 HEVC），您可以使用一个简单的<video>标签制作一个透明的视频，它可以在除 Internet Explorer 之外的所有主要浏览器中运行：
<video>
<source src="video.webm" type="video/webm">
<source src="video.mov" type="video/quicktime">
</video>
我也为此苦苦挣扎。这是我发现的。扩展 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
在此博客文章中查看更多方法。
目前，唯一真正支持 Alpha 通道的视频编解码器是 Flash 使用的 VP8。如果视频作为图像序列导出，MP4 可能会支持它，但我相当确定 Ogg 视频文件不支持 Alpha 通道。这可能是少数情况之一，坚持使用 Flash 会为您带来更好的效果。