Comment (fonctionnalité) détecter si le navigateur prend en charge la transparence WebM alpha?

Question

J'intègre une vidéo * .webm avec transparence alpha. À l'heure actuelle, la transparence est uniquement prise en charge dans Chrome et Opera. (Démo: http://simpl.info/videoalpha/) Firefox par exemple lit la vidéo car elle supporte le format WebM, mais au lieu de la transparence, il y a un fond noir.

Mon plan est d'afficher l'image de l'affiche vidéo au lieu de la vidéo, si le navigateur ne supporte pas la transparence alpha. La vidéo ne doit donc être lue que si le navigateur prend en charge la transparence WebM alpha. Je sais comment détecter le navigateur ou le moteur de rendu et donc lire la vidéo (voir le code ci-dessous) - mais existe-t-il un moyen de "détection des fonctionnalités"?

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

Voir aussi http://updates.html5rocks.com/2013/07/Alpha-transparency-in-Chrome-video

Answer 1

Voici une solution de travail pour tester le support alpha dans WebM.

I essentiellement combiné Capture first frame of an embedded video et check_webp_feature

La vidéo utilisée pour tester avec est codé en base64 dans la source. Il est en fait une petite vidéo WebM VP9 codé en utilisant:

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

Si vous souhaitez tester le soutien VP8 alpha à la place, il suffit de coder votre propre et retirez le -vp9. alpha.png est une image PNG 100% transparente de 64x64 pixels.

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

Il n'y a pas de propriétés exposées donnant des informations sur la vidéo et ses canaux.

La seule façon de le faire est soit:

• Sachant à l'avance, intégrer ces connaissances avec les données et servir au navigateur lorsque la vidéo est demandé en tant que méta-données
• Utilisez une toile à analyse les données d'image
• Chargez le fichier sous forme de données binaires, puis analysez le format webm manuellement pour extraire cette information. Pratique mais très gênant car le fichier complet doit être téléchargé, et bien sûr un analyseur doit être fait.

Si vous ne savez pas à l'avance ou n'avez aucun moyen de fournir les métadonnées, alors canvas est votre meilleure option.

Toile

Vous pouvez utiliser une toile pour tester la transparence réelle, cependant, ce n'ont des exigences CORS (vidéo doit être sur le même serveur, ou le serveur externe doivent accepter l'utilisation croisée d'origine).

De plus, vous devez réellement commencer à charger la vidéo, ce qui peut bien sûr avoir un impact sur la bande passante ainsi que sur les performances. Vous voulez probablement le faire avec une balise vidéo et canvas dynamiquement créée.

De là, c'est assez simple.

• créer une petite toile
• Tracer une trame dans le (celui qui est prévu pour avoir un canal alpha)
• Extraire les pixels (exigences CORS ici)
• boucle à travers le tampon en utilisant un Uint32Array afficher et vérifier la couche alpha pour les valeurs < 255 (pixel & 0xff000000 !== 0xff000000).

Ceci est assez rapide à faire, vous pouvez utiliser une taille d'image de moitié ou même plus petit.