html5中的透明视频[关闭]答案

【问题标题】：Transparent video in html5 [closed]html5中的透明视频[关闭]
【发布时间】：2019-09-03 18:59:40
【问题描述】：

我有一个 mp4 格式的透明背景视频。我正在尝试在 html 中添加此视频。每次都会添加视频，但屏幕上没有显示任何内容，但此视频在 vlc 播放器中运行良好。我已将此视频从 flv 转换为 mp4。我也尝试了另一个 mp4 视频，它们可以正常工作，但不是这个。

【问题讨论】：

【解决方案1】：

MP4 视频不支持 Alpha 通道，因此您不能使用 MP4 来获得透明背景。

您可以改用webm。 Here is some details about webm 来自谷歌。并非所有浏览器都支持webm，这里有一个support list。

如果你真的想使用MP4，这里有一个 javascript 库可以做到这一点：seeThru

您的 HTML5 视频源被重新渲染为画布元素，添加在您的视频中使用透明胶片的可能性。阿尔法信息要么包含在视频的源文件（移动）中，要么包含在单独的元素（静态）。

它在 HTML5 桌面浏览器（甚至 IE9）上运行良好。

【讨论】：

【解决方案2】：

我建议您直接使用gif。我不确定我是否正确理解了您的问题。但通常mp4 不支持透明背景。 GIF 确实如此。如果你想要它的声音，你需要在代码中手动播放它的声音文件。

【讨论】：

【解决方案3】：

mp4 和大多数其他常见视频格式不支持 Alpha 透明度。

您需要做的是确定要嵌入视频的网站的背景颜色，并将视频的背景颜色设置为编码时的背景颜色。

【讨论】：