Html 我可以使用 HTML5 视频标签制作具有透明背景的视频吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4073303/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I have a video with transparent background using HTML5 video tag?
提问by DavidE
We filmed a spokesperson on a green screen and have the video files ready in multiple formats.
我们在绿屏上拍摄了一位发言人，并准备了多种格式的视频文件。
With Flash we could use the wmode transparent within the param and embed tags, but is there something similar to this with the video and source tags in HTML5? Is it even possible to properly save .m4v or .ogv videos so that we can play these files with transparent backgrounds on our browsers?
对于 Flash，我们可以在 param 和 embed 标签中使用透明的 wmode，但是 HTML5 中的 video 和 source 标签是否有类似的东西？甚至可以正确保存 .m4v 或 .ogv 视频，以便我们可以在浏览器上以透明背景播放这些文件吗？
Thanks
谢谢
回答by Lie Ryan
Yes, this sort of thing is possible without Flash:
是的，这种事情在没有 Flash 的情况下是可能的：
However, only very modern browsers supports HTML5 videos, and this should be your consideration when deploying in HTML 5, and you should provide a fallback (probably Flash or just omit the transparency).
但是，只有非常现代的浏览器支持 HTML5 视频，这应该是您在 HTML 5 中部署时的考虑因素，并且您应该提供后备（可能是 Flash 或只是省略透明度）。
回答by Praveen Vijayan
Chrome 30> supports video alpha transparency.
Chrome 30> 支持视频 alpha 透明度。
http://updates.html5rocks.com/2013/07/Alpha-transparency-in-Chrome-video
http://updates.html5rocks.com/2013/07/Alpha-transparency-in-Chrome-video
回答by nullability
Update: Webm with an alpha channel is now supported in Chrome and Firefox.
更新：Chrome 和 Firefox 现在支持带有 alpha 通道的 Webm。
For other browers, there are workarounds, but they involve re-rendering the video using Canvas and it is kind of a hack. seeThruis one example. It works pretty well on HTML5 desktop browsers (even IE9) but it doesn't seem to work very well on mobile. I couldn't get it to work at all on Chrome for Android. It did work on Firefox for Android but with a pretty lousy framerate. I think you might be out of luck for mobile, although I'd love to be proven wrong.
对于其他浏览器，有一些解决方法，但它们涉及使用 Canvas 重新渲染视频，这有点像黑客。seeThru就是一个例子。它在 HTML5 桌面浏览器（甚至 IE9）上工作得很好，但在移动设备上似乎不太好用。我根本无法在 Android 版 Chrome 上使用它。它确实在 Firefox for Android 上工作，但帧率非常糟糕。我认为您可能对移动设备不走运，尽管我很乐意被证明是错误的。
回答by Andrew
At this time, the only video codec that truly supports an alpha channel is VP8, which Flash uses. MP4 would probably support it if the video was exported as an image sequence, but I'm fairly certain Ogg video files have no support whatsoever for an alpha channel. This might be one of those rare instances where sticking with Flash would serve you better.
目前，唯一真正支持 alpha 通道的视频编解码器是 Flash 使用的 VP8。如果将视频导出为图像序列，MP4 可能会支持它，但我相当确定 Ogg 视频文件不支持任何 alpha 通道。这可能是坚持使用 Flash 会更好地为您服务的少数情况之一。
回答by cthom06
While this isn't possible with the video itself, you could use a canvas to draw the frames of the video except for pixels in a color range or whatever. It would take some javascript and such of course. See Video Puzzle(apparently broken at the moment), Exploding Video, and Realtime Video -> ASCII
虽然这对于视频本身是不可能的，但您可以使用画布来绘制视频的帧，颜色范围内的像素或其他像素除外。当然，这需要一些 javascript 等。参见Video Puzzle（目前显然已损坏）、Exploding Video和Realtime Video -> ASCII
回答by Prathap Parameswar
Mp4 files can be playable with transparent background using seeThrou Js library. All you need to combine actual video and alpha channel in the single video. Also make sure to keep video height dimension below 1400 px as some of the old iphone devices wont play videos with dimension more than 2000. This is pretty useful in safari desktop and mobile devices which doesnt support webm at this time.
Mp4 文件可以使用 seeThrou Js 库在透明背景下播放。在单个视频中结合实际视频和 Alpha 通道所需的一切。还要确保将视频高度尺寸保持在 1400 像素以下，因为一些旧的 iphone 设备不会播放尺寸超过 2000 的视频。这在目前不支持 webm 的 safari 桌面和移动设备中非常有用。
more details can be found in the below link https://github.com/m90/seeThru
可以在以下链接中找到更多详细信息 https://github.com/m90/seeThru
回答by prakashapkota
webm format is the best solution for Chrome > 29, but it is not supported in Firefox IE and Safari, the best solution is using Flash (wmode="transparent"). but you have to forget "ios".
webm 格式是 Chrome > 29 的最佳解决方案，但在 Firefox IE 和 Safari 中不支持，最佳解决方案是使用 Flash (wmode="transparent")。但你必须忘记“ios”。
回答by user3893535
Quicktime movs exported as animation work but in safari only. I wish there was a complete solution (or format) that covered all major browsers.
Quicktime movs 导出为动画作品，但仅在 safari 中。我希望有一个涵盖所有主要浏览器的完整解决方案（或格式）。
