如何（功能）检测浏览器是否支持WebM alpha透明度？ [英] How to (feature) detect if browser supports WebM alpha transparency?

问题描述

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

I'm integrating a *.webm Video with alpha transparency. At the moment, the transparency is only supported in Chrome and Opera. (Demo: http://simpl.info/videoalpha/) Firefox for example plays the video as it supports the WebM format, but instead of the transparency, there's a black background.

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

My plan is to display the video poster image instead of the video, if the browser does not support alpha transparency. So the video should only play, if the browser supports WebM alpha transparency. I know how to detect the browser or the rendering engine and therefore play the video (see code below) - but is there a "feature detection" way?

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

推荐答案

这是一个在WebM中测试alpha支持的工作解决方案。

Here's a working solution to test for alpha support in WebM.

我基本上结合了捕获嵌入视频的第一帧和 check_webp_feature

使用的视频使用base64编码进入测试源。它实际上是一个很小的VP9 WebM视频编码使用：

The video used to test with is base64-encoded into the source. It's actually a tiny VP9 WebM video encoded using:

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

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

If you want to test for VP8 alpha support instead, just encode your own and remove the -vp9. alpha.png is a 64x64 pixel 100% transparent PNG image.

var supportsWebMAlpha = function(callback)
{
    var vid = document.createElement('video');
    vid.autoplay = false;
    vid.loop = false;
    vid.style.display = "none";
    vid.addEventListener("loadeddata", function()
    {
        document.body.removeChild(vid);
        // Create a canvas element, this is what user sees.
        var canvas = document.createElement("canvas");

        //If we don't support the canvas, we definitely don't support webm alpha video.
        if (!(canvas.getContext && canvas.getContext('2d')))
        {
            callback(false);
            return;
        }

        // Get the drawing context for canvas.
        var ctx = canvas.getContext("2d");

        // Draw the current frame of video onto canvas.
        ctx.drawImage(vid, 0, 0);
        if (ctx.getImageData(0, 0, 1, 1).data[3] === 0)
        {
            callback(true);
        }
        else
        {
            callback(false);
        }

    }, false);
    vid.addEventListener("error", function()
    {
        document.body.removeChild(vid);
        callback(false);
    });

    vid.addEventListener("stalled", function()
    {
        document.body.removeChild(vid);
        callback(false);
    });

    //Just in case
    vid.addEventListener("abort", function()
    {
        document.body.removeChild(vid);
        callback(false);
    });

    var source = document.createElement("source");
    source.src="data:video/webm;base64,GkXfowEAAAAAAAAfQoaBAUL3gQFC8oEEQvOBCEKChHdlYm1Ch4ECQoWBAhhTgGcBAAAAAAACBRFNm3RALE27i1OrhBVJqWZTrIHlTbuMU6uEFlSua1OsggEjTbuMU6uEHFO7a1OsggHo7AEAAAAAAACqAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAVSalmAQAAAAAAADIq17GDD0JATYCNTGF2ZjU3LjU3LjEwMFdBjUxhdmY1Ny41Ny4xMDBEiYhARAAAAAAAABZUrmsBAAAAAAAARq4BAAAAAAAAPdeBAXPFgQGcgQAitZyDdW5khoVWX1ZQOYOBASPjg4QCYloA4AEAAAAAAAARsIFAuoFAmoECU8CBAVSygQQfQ7Z1AQAAAAAAAGfngQCgAQAAAAAAAFuhooEAAACCSYNCAAPwA/YAOCQcGFQAADBgAABnP///NXgndmB1oQEAAAAAAAAtpgEAAAAAAAAk7oEBpZ+CSYNCAAPwA/YAOCQcGFQAADBgAABnP///Vttk7swAHFO7awEAAAAAAAARu4+zgQC3iveBAfGCAXXwgQM=";
    source.addEventListener("error", function()
    {
       document.body.removeChild(vid);
       callback(false);
    });
    vid.appendChild(source);

    //This is required for IE
    document.body.appendChild(vid);
};

supportsWebMAlpha(function(result)
{
   if (result)
   {
       alert('Supports WebM Alpha');
   }
   else 
   {
       alert('Doesn\'t support WebM Alpha');
   }
});

这篇关于如何（功能）检测浏览器是否支持WebM alpha透明度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！