Как (функция) обнаруживает, поддерживает ли браузер поддержку прозрачности WebM alpha?

Question

Я интегрирую видео * .webm с альфа-прозрачностью. На данный момент прозрачность поддерживается только в Chrome и Opera. (Демо: http://simpl.info/videoalpha/) Firefox, например, воспроизводит видео, поскольку он поддерживает формат WebM, но вместо прозрачности есть черный фон.

Мой план состоит в том, чтобы отображать видеоролик вместо видео, если браузер не поддерживает альфа-прозрачность. Поэтому видео должно воспроизводиться только в том случае, если браузер поддерживает прозрачность 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.

Я в основном в сочетании Capture first frame of an embedded video и check_webp_feature

видео, используемом для тестирования с кодировкой base64 в источник. Это на самом деле крошечные VP9 WebM видео, закодированное с помощью:

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

Если вы хотите проверить альфа поддержки VP8 вместо этого, просто закодировать свой собственный и удалить -vp9. alpha.png - это прозрачное PNG-изображение на 100%.

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'); 
 
    } 
 
});

Answer 2

Там нет свойств подвергаются давая какую-либо информацию о видео и его каналы.

Единственный способ сделать это либо:

• Зная заранее, включать эти знания с данными и подавайте в браузере при запросе видео в качестве мета-данных
• Используйте холст проанализировать данные изображения
• Загрузите файл как двоичные данные, затем вручную проанализируйте формат веб-страницы, чтобы извлечь эту информацию. Do-able, но очень неудобный, поскольку полный файл должен быть загружен, и, конечно же, должен быть создан парсер.

Если вы не знаете заранее или не можете предоставить метаданные, тогда ваш лучший вариант - холст.

Холст

Вы можете использовать холст для проверки фактической прозрачности, однако, это действительно есть требования CORS (видео должно быть на том же сервере, или внешний сервер должен принимать использование кросс-происхождения).

Кроме того, вы должны начать загрузку видео, которое, конечно же, может повлиять на пропускную способность, а также на производительность. Вероятно, вы захотите сделать это с помощью динамически созданного тега видео и холста.

Оттуда это довольно прямолинейно.

• Создать небольшой холст
• Нарисуйте рамку в него (тот, который, как ожидается, чтобы иметь альфа-канал)
• извлечь пиксели (требования CORS здесь)
• Loop через буфер с использованием Uint32Array просмотр и проверка альфа-канала для значений < 255 (pixel & 0xff000000 !== 0xff000000).

Это довольно быстро сделать, вы можете использовать размер кадра вдвое или даже меньше.