Javascript 如何（功能）检测浏览器是否支持WebM alpha透明度？

我正在将*.webm视频与alpha透明度集成。目前，只有Chrome和Opera支持透明。（演示：）例如，Firefox播放视频，因为它支持WebM格式，但不是透明，而是黑色背景

如果浏览器不支持alpha透明，我的计划是显示视频海报图像而不是视频。因此，如果浏览器支持WebM alpha透明，视频应该只播放。我知道如何检测浏览器或渲染引擎，从而播放视频（请参见下面的代码）-但有“功能检测”方法吗

---

另请参见

没有显示任何有关视频及其频道信息的属性

做到这一点的唯一方法是：

• 事先知道，将这些知识与数据结合起来，并在请求将视频作为元数据时将其提供给浏览器
• 使用画布分析图像数据
• 将文件作为二进制数据加载，然后手动解析webm格式以提取此信息。可以，但非常不方便，因为必须下载完整的文件，当然还必须制作解析器

如果您事先不知道，或者无法提供元数据，那么画布是您最好的选择

帆布 您可以使用画布来测试实际的透明度，但是，这确实有CORS要求（视频必须在同一台服务器上，或者外部服务器需要接受跨源使用）

此外，您必须实际开始加载视频，这当然会对带宽和性能产生影响。您可能希望使用动态创建的视频和画布标记来实现这一点

从这里开始，这是相当直截了当的

• 创建一个小画布
• 在其中绘制一帧（预期具有alpha通道的帧）
• 提取像素（此处为CORS要求）
• 使用UINT32阵列视图在缓冲区中循环，并检查alpha通道的值是否小于255（

  pixel&0xff000000！==0xff000000

  ）

---

这相当快，您可以使用一半甚至更小的帧大小。

这里有一个可行的解决方案来测试WebM中的alpha支持

我基本上结合了

用于测试的视频是base64编码到源中的。它实际上是一个使用以下方式编码的小型VP9 WebM视频：

ffmpeg -i alpha.png -c:v libvpx-vp9 alpha.webm

如果您想测试VP8 alpha支持，只需对自己的进行编码并删除-vp9。alpha.png是64x64像素的100%透明png图像

var supportsWebMAlpha=函数（回调）
{
var vid=document.createElement（'video'）；
vid.autoplay=false；
vid.loop=false；
vid.style.display=“无”；
vid.addEventListener（“loadeddata”，函数（）
{
文件.body.removeChild（vid）；
//创建画布元素，这是用户看到的。
var canvas=document.createElement（“canvas”）；
//如果我们不支持画布，我们肯定不支持webm alpha视频。
if（！（canvas.getContext&&canvas.getContext（'2d'））
{
回调（假）；
返回；
}
//获取画布的绘图上下文。
var ctx=canvas.getContext（“2d”）；
//将当前视频帧绘制到画布上。
ctx.drawImage（vid，0,0）；
if（ctx.getImageData（0,0,1,1）.data[3]==0）
{
回调（true）；
}
其他的
{
回调（假）；
}
}，假）；
vid.addEventListener（“错误”，函数（）
{
文件.body.removeChild（vid）；
回调（假）；
});
vid.addEventListener（“暂停”，函数（）
{
文件.body.removeChild（vid）；
回调（假）；
});
//以防万一
vid.addEventListener（“中止”，函数（）
{
文件.body.removeChild（vid）；
回调（假）；
});
var source=document.createElement（“源”）；
source.src="数据：video/webm；base64，GKXFoweaaaaaaaaafqfabauL3GQfc8OEEqvobcekchhdly4 ECQOWBAHTGCBaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaak7oEBpZ+CSYNCAAPwA/yaocqgcfqaadbgaabnp///Vttk7swAHFO7awEAAAAAAAARu4+zgQC3iveBAfGCAXXwgQM=“；
addEventListener（“错误”，函数（）
{
文件.body.removeChild（vid）；
回调（假）；
});
参见附录子项（来源）；
//这是IE所必需的
文件.正文.附件（vid）；
};
SupportsWebAlpha（函数（结果）
{
如果（结果）
{
警报（“支持WebM Alpha”）；
}
其他的
{
警报（“不支持WebM Alpha”）；
}
})；

您可以使用JavaScript库来检测用户浏览器中的HTML5和CSS3功能。在我看来，使用Modernizer无法检测webm编解码器中的特定功能。很抱歉我的回答太晚。感谢您提出的解决方案，使用canvas检测alpha透明性是分析v的内容的一种聪明方法ideo.我发现IE11的某些版本倾向于回退

ctx.getImageData（0,0,1,1）。数据
到数组
[0,0,0,0]
，因此通过了测试。我制作了另一个版本的1pixel视频，它在
数据[3]处具有半透明度===128
。不幸的是，它不适合子命令，我不想用它来创建单独的注释，所以：@Luixo:1x1一些旧版本的webkit
ffmpeg -i alpha.png -c:v libvpx-vp9 alpha.webm