Vidéo superposée avec transparence tout en se disputant le support de croisement croisé

Étant donné que les sites Web deviennent de plus en plus dynamiques en matière de conception, il est parfois nécessaire d'incorporer des éléments complexes et animés. Il existe de nombreuses façons de le faire, des transitions CSS au rendu 3D sur toile, et SVG animé. Mais il est souvent plus facile d'utiliser une

Mais que se passe-t-il si vous avez besoin d'un arrière-plan transparent sur cette vidéo, afin qu'il puisse superposer et sembler interagir avec d'autres contenus sur la page? C'est possible, mais peut être délicat, en particulier le croisement. Explorons cela.

Voici un exemple

Pour voir comment fonctionnent les superpositions vidéo transparentes, j'ai préparé un exemple qui, je l'espère, se sent à la fois amusant et relatable. L'idée est d'intégrer la vidéo avec du contenu interactif en dessous afin que le contenu derrière la vidéo change à mesure que le curseur progresse. C'est un curseur publicitaire de nourriture pour chiens avec une vraie vidéo de chien sur la superposition et je suis sûr que ce chien réaliste et mignon améliorerait le taux de conversion!

Vous pouvez suivre cet article pour recréer cette démo par vous-même. Une partie de ce dont vous aurez besoin pour créer une vidéo comme celle-ci est une «séquence d'images» (un tas d'images alpha-transparentes que nous coucherons dans une vidéo). Je fournis les images que j'ai utilisées pour l'exemple.

Télécharger des images

Exploration des possibilités

Pour réaliser cet effet, j'ai commencé avec une recherche d' une solution NY qui me permettrait d'insérer du contenu animé avec un arrière-plan transparent sur la page.

Gif

La première chose qui est arrivée était un GIF. Même si le format GIF a été introduit il y a plus de 30 ans, il est toujours largement utilisé. Malheureusement, il a ses limites. Bien qu'il fonctionne parfaitement pour des graphiques animés simples et petits, il n'est pas si idéal pour les séquences vidéo longues et colorées, il a un espace colorimétrique limité et se développera beaucoup en taille pour des vidéos complexes.

Apng

La prochaine option que j'ai examinée était l'apng , qui pour une raison quelconque, n'est pas aussi populaire que GIF mais est bien meilleure. (Je ne savais même pas qu'il existait, n'est-ce pas?) APNG fonctionne de manière similaire aux fichiers GIF animés tout en prenant en charge les images 24 bits et la transparence 8 bits. Il est également compatible avec le PNG régulier. Si APNG n'est pas pris en charge, la première trame s'affiche. Il est soutenu par des navigateurs populaires, mais aucun support dans Internet Explorer 11 (Yup, certaines personnes doivent encore le soutenir). Bien que cela semblait être la voie à suivre un instant, je n'étais pas satisfait de la taille et des performances de son fichier.

Fait amusant: Apple a adopté le format APNG comme leur format préféré pour les autocollants animés dans les applications iOS 10 iMessage.

Boucle à travers les pngs

Ensuite, une idée grossière, mais qui fonctionne, me venait à l'esprit: utilisez un tas de PNG et boucle à travers eux avec JavaScript pour imiter la vidéo. Mais cela nécessite d'utiliser beaucoup de transfert de données (chaque trame vidéo serait une image distincte) et des ressources pour animer (vous pouvez drainer rapidement la batterie d'un utilisateur ou rendre le ventilateur d'ordinateur fou).

J'ai rapidement abandonné cette idée, mais cela s'est avéré utile plus tard. J'y reviendrai à la fin de l'article.

Webm avec transparence alpha

Comme tous les formats pour ont échoué ici, j'ai commencé à étudier les vidéos. J'ai trouvé un article sur la transparence alpha dans Chrome Video publié en 2013, qui annonce la prise en charge de Google Chrome pour WebM avec une chaîne Alpha. Il montre même un exemple et partage des conseils sur la façon de l'utiliser. J'ai parcouru l'article et c'était immédiatement comme la voie à suivre. J'étais encore plus convaincu après avoir converti ma séquence d'image en webm car, alors que GIF pesait 5,8 Mo, WebM avec transparence, en utilisant la même fréquence d'images et les mêmes couleurs comprises n'était que de 540 Ko! C'est plus de 10 fois plus petit tout en offrant de meilleures performances et qualité. Génial!

La joie n'a pas duré longtemps cependant. Dès que j'ai ouvert le site Web sur mon téléphone iOS, j'ai réalisé que j'aurais dû commencer par la vérification de la compatibilité du navigateur. Malheureusement, Safari (iOS et MacOS) ne prend pas en charge la transparence dans WebM. Alors que ma vidéo fonctionnait parfaitement sur Chrome, Firefox et Edge, Safari m'a accueilli avec un fond noir laid.

La recherche continue…

Une bonne solution

Heureusement, j'ai trouvé une vidéo de la WWDC 2019 annonçant la vidéo HEVC avec le support Alpha pour Safari à partir de iOS 13 et MacOS Catalina. Il semblait fournir la même fonctionnalité que WebM mais avec le support sur les appareils Apple. J'ai donc décidé d'utiliser la solution hybride: HEVC pour Safari et WebM pour d'autres navigateurs.

Cela semble être la solution parfaite. Mais maintenant, nous avons deux tâches:

1. Créer un HEVC avec la transparence alpha
2. Détecter pour Safari (et la version) pour servir le format correct

Création d'une vidéo transparente

Nous commencerons par la partie facile: la création d'un fichier WebM. Si vous souhaitez créer, convertir ou même modifier des fichiers vidéo, FFMPEG est votre ami. Il s'agit d'un cadre multimédia open source extrêmement puissant, et si vous avez quelque chose à voir avec les fichiers multimédias, je recommanderais de commencer là-bas car il est capable de tant de choses. Je peux dire que FFMPEG m'a aidé à réduire les tailles de fichiers vidéo plus de 10 fois sans aucune dégradation de la qualité d'image visible. Mais revenons à la transparence.

D'après mon expérience, si vous devez inclure des éléments animés dans la mise en page du site Web, vous les obtenez comme un ensemble de trames vidéo en PNG. Même en travaillant sur mon exemple de projet, un outil qui supprime l'arrière-plan des vidéos a généré un ensemble d'images pour moi. Je vais donc continuer ici en supposant que nous construisons la vidéo à partir d'un ensemble d'images (rappelez-vous, vous pouvez télécharger notre ensemble), mais même si vous avez un fichier vidéo à la place, le processus sera similaire (ajustez les options FFMPEG à vos besoins).

Nous sommes maintenant prêts à créer une vidéo. À l'aide de la ligne de commande, nous allons accéder au dossier qui contient les fichiers PNG et exécuter la commande suivante:

 ffmpeg -framerate 25 -i unseen - =. png -c: v libvpx-vp9 -pix_fmt yuva420p output.webm

Vous pouvez ajuster les arguments en fonction de vos besoins:

• Framerate: combien d'images seront utilisées pour 1 s de la vidéo de sortie
• -I UNSCREEN - =. PNG: Nom et format de fichier d'entrée. Mes fichiers ont des numéros de 001 à 150, j'ai donc utilisé = comme masque pour sélectionner tous les fichiers avec trois chiffres dans le nom.
• -C: V: Spécifie le codec à utiliser. Je veux que la vidéo soit encodée avec VP9, ​​qui est prise en charge par la plupart des navigateurs Web.
• -PIX_FMT: Spécifie le format de pixel à utiliser. Dans notre CAS, il devrait prendre en charge un canal alpha. Vous pouvez voir tous les formats pris en charge si vous exécutez FFMPEG --PIX_FMTS.
• output.webm: fournit le nom de fichier de sortie souhaité comme dernier argument

Il y a beaucoup plus d'options disponibles, mais je ne plongerai pas dans les détails car il faudrait probablement plus d'un article pour les parcourir. Ceux fournis dans l'exemple de commande fonctionnent bien pour notre cas d'utilisation.

Une fois le processus terminé, nous devrions voir un nouveau fichier Output.webm, et si vous l'ouvrez dans un navigateur pris en charge, vous verrez une vidéo. Facile, non?

Création de Hevc Alpha

Étant donné que nous avons un fichier WebP prêt, il est temps de passer au deuxième format que nous utiliserons: HEVC avec la transparence alpha. Malheureusement, au moment de la rédaction, FFMPEG ne prend pas en charge HEVC, nous devons donc utiliser un autre outil. Pour autant que je sache, la seule façon de créer HEVC avec Alpha est d'utiliser le chercheur ou le compresseur sur Mac. Si vous avez un PC, vous devrez probablement demander à quelqu'un avec Mac de le faire pour vous. L'application du compresseur n'est fournie qu'avec Final Cut Pro, donc je ne l'utiliserai pas, bien qu'il puisse être utile d'envisager si vous avez besoin de paramètres personnalisés.

Depuis MacOS Catalina, le Finder a un outil Media Encodage intégré pour convertir des vidéos. Il est simple (et gratuit), donc il répond à nos besoins.

Le Finder s'attend à un fichier vidéo comme entrée, donc nous devons d'abord convertir la séquence d'images en PRORES 4444. Il s'agit d'une étape importante, car l'outil de média d'encodage n'acceptera pas n'importe quelle vidéo - il échouera à moins que vous ne fournissiez le format qu'il accepte. Cela m'a donné un mal de tête ou deux jusqu'à ce que je découvre le codage correct pour le fichier d'entrée.

Nous pouvons créer une vidéo d'entrée à l'aide de ffmpeg. Comme nous l'avons fait lors de la création de WebM, nous devons simplement exécuter FFMPEG avec les arguments appropriés:

 ffmpeg -framerate 25 -i unseen - =. png -c: v prores_ks -pix_fmt yuva444p10le -alpha_bits 16 -profile: v 4444 -f mov -vframes 150 output.mov

À partir de ce moment, un Mac est nécessaire. Mais le processus est simple et n'implique rien à taper dans le terminal, donc même si vous demandez à un ami non technique avec un Mac pour le faire pour vous, je suis sûr qu'ils peuvent gérer.

Ayant une vidéo PRORES4444 prête, vous pouvez accéder au dossier contenant de Finder, cliquez avec le bouton droit dessus et dans le menu contextuel, sélectionnez Encoder les fichiers vidéo sélectionnés .

Une fenêtre apparaîtra. Sélectionnez la qualité HEVC souhaitée (il y en a deux à choisir) et vérifiez l'option pour préserver la transparence. Cliquez ensuite sur le bouton «Continuer».

Après un moment, vous devriez voir un nouveau fichier, qui est codé dans HEVC avec Alpha. C'est fait! L'ouverture de ce fichier dans Safari confirme que la transparence fonctionne.

Enfin et surtout, il est temps d'utiliser des vidéos sur le site Web!

Servir des vidéos transparentes pour tous les navigateurs

Nous pouvons utiliser un élément

Il y a encore une chose à prendre en charge: certains navigateurs prennent en charge WebM ou HEVC lui-même mais sans transparence . Ces navigateurs joueront la vidéo mais avec un fond noir au lieu d'un canal alpha. Par exemple, Safari 12 jouera HEVC sans transparence. C'est inacceptable pour nous.

Normalement, j'utiliserais l'élément pour fournir la vidéo ainsi que plusieurs formats comme des replies, et le navigateur choisirait celui qu'il prendrait en charge. Cependant, comme nous voulons afficher HEVC uniquement sur des versions Safari spécifiques, nous devrons définir l'attribut SRC vidéo à la place à l'aide de JavaScript.

HEVC avec transparence est pris en charge dans iOS 13 et Mac Safari 13, alors commençons par les détecter. La façon recommandée d'ajuster les fonctionnalités du site Web en fonction du support est de détecter l'existence d'une API plutôt que de regarder l'agent utilisateur, mais je n'ai trouvé aucun moyen simple de détecter si le navigateur prend en charge la transparence au format vidéo. Au lieu de cela, j'ai trouvé ma propre solution. Ce n'est pas joli, mais ça fait le travail.

 fonction supportShevCalpha () {
  const Navigator = window.navigator;
  const ua = navigator.useragent.tolowercase ()
  const Hasmediacapabilities = !! (Navigator.Mediacapabilities && navigator.mediacapabilities.decodingInfo)
  const issafari = ((ua.indexof ('safari')! = -1) && (! (ua.indexof ('chrome')! = -1) && (ua.indexof ('version /')! = -1)))
  retourner issafari && hasmediacapability
}

Cela cible Safari 13 et plus en regardant Navigator.Mediacapabilities, qui n'est pas pris en charge dans les anciennes versions, ainsi que pour regarder que le navigateur est Safari du tout. Si la fonction renvoie vrai, alors je suis prêt à aller avec Hevc Alpha. Pour tout autre cas, je chargerai la vidéo WebM.

Voici un exemple de la façon dont cela se rassemble en HTML:

 <loop video loop autoplay playsinline>  Video>

<cript>
const Player = Document.getElementById («lecteur»);
le player.src = supportShevCalpha ()? 'output.mov': 'output.webm';
</cript></loop>

Si vous êtes curieux à propos de ces arguments Loop Disond Playsinline sur l'élément vidéo, il s'agit de reproduire une expérience de type GIF:

• Sans muet, la vidéo ne jouera pas sans interaction utilisateur.
• Avec PlaySinline, sur iOS, la vidéo joue là où elle se trouve dans la disposition au lieu de s'ouvrir à FullScreen.
• Avec Loop, la vidéo se répète encore et encore.
• Avec AutoPlay, il commencera à lire automatiquement la vidéo sur le chargement de la page (tant que nous avons également coupé en place).

C'est ça! Nous avons une solution légère, performante et de haute qualité pour des vidéos transparentes, qui fonctionne sur la plupart des navigateurs modernes (au moins les deux dernières versions récentes de Chrome, Firefox, Safari et Edge). Nous pouvons ajouter des HTML et CSS de base pour intégrer le contenu statique avec lui et le rendre un peu plus réel, ou simplement utiliser la même idée que dans ma démo. Ce n'était pas trop mal, n'est-ce pas?

Hé, mais qu'en est-il de IE 11? Toute mon entreprise l'utilise!

En général, je recommanderais de limiter une fonctionnalité comme celle-ci aux navigateurs modernes et de cacher la vidéo dans IE. La vidéo n'est probablement pas un élément critique du site Web. Cependant, je travaillais sur un projet commercial où le support de IE 11 était un must et j'ai été obligé de comprendre quelque chose pour montrer la vidéo transparente là-bas. En fin de compte, j'ai fini par faire du vélo à travers des images PNG avec JavaScript. J'ai réduit la quantité de trames et jeté entre eux à l'aide d'une minuterie. Bien sûr, la performance était horrible, mais cela a fonctionné. La vidéo était assez importante pour l'ensemble du design, nous avons donc intentionnellement décidé de sacrifier les performances sur IE 11 pour fournir une expérience complète.

Résumé

J'espère que je vous ai fait gagner du temps à rechercher l'idée d'une vidéo alpha-transparent et que maintenant vous pouvez intégrer des éléments animés comme celui-ci sur votre site Web. Je parie que vous en aurez besoin un jour!

Avez-vous une idée différente de la façon d'utiliser une vidéo transparente? Ou peut-être déjà une certaine expérience avec ça? Faites-moi savoir dans les commentaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!