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

Question

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

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

var supportsAlphaVideo = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor) || (/OPR/.test (navigator.userAgent));
if (supportsAlphaVideo) {
document.querySelector(".js-video").play();
}

另请参见http://updates.html5rocks.com/2013/07/Alpha-transparency-in-Chrome-video

Answer 1

这是一个测试WebM中对alpha支持的有效解决方案。

我基本上将捕获视频的第一帧和check_webp_feature结合在一起

用于进行测试的视频已被base64编码到源中。实际上，这是一个使用以下代码编码的微小VP9 WebM视频：

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

如果要测试VP8 alpha支持，只需编码自己的编码并删除-vp9。alpha.png是64x64像素100％透明的PNG图像。

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