Intégrer des vidéos avec transparence sur le web

L’intégration de vidéos avec transparence sur un site web peut apporter une touche de modernité et d’élégance à votre design. Cependant, cette tâche n’est pas sans défis techniques. Dans cet article, nous allons partager notre expérience et expliquer les étapes nécessaires pour surmonter ces obstacles.

Les défis techniques

• Compatibilité des navigateurs : Tous les navigateurs ne supportent pas les vidéos avec transparence. Par exemple, le format WebM avec les codecs VP8 ou VP9 est souvent utilisé pour les vidéos transparentes, mais il n’est pas pris en charge par tous les navigateurs. Il est donc crucial de vérifier la compatibilité des formats vidéo avec les navigateurs cibles.
• Formats vidéo : Le format WebM est couramment utilisé pour les vidéos avec transparence. Cependant, pour les navigateurs qui ne supportent pas WebM, il est nécessaire de fournir des alternatives comme le format MP4 ou HEVC. Cela implique de détecter le navigateur utilisé et de charger le format approprié.
• Détection du navigateur : Utiliser JavaScript pour détecter le navigateur et charger le fichier vidéo approprié est une solution courante.
• Performance : Les vidéos avec transparence peuvent être plus lourdes et nécessiter plus de ressources pour être lues correctement. Il est donc important d’optimiser les vidéos pour le web, en réduisant leur taille sans compromettre la qualité. Utilisez des outils de compression vidéo et testez la performance sur différents appareils et navigateurs.
• Solutions de repli : Il est essentiel de prévoir des solutions de repli pour les navigateurs qui ne supportent pas les vidéos avec transparence. Par exemple, vous pouvez afficher une image statique ou un GIF animé ou une version non transparente de la vidéo. Cela garantit que tous les utilisateurs ont une expérience cohérente, quel que soit le navigateur qu’ils utilisent.

Après avoir exploré les divers défis techniques, nous vous proposons un tutoriel (axé MAC) basé sur notre propre expérience pour vous guider pas à pas dans la création de vos propres vidéos transparentes et solutions de repli.

L’objectif est de réaliser des exports variés pour les tester sur les navigateurs et choisir la solution appropriée.

Tuto: Vidéos transparentes et solutions de repli

En priorité, il est impératif d’exporter l’animation dans un format transparent, de la meilleure qualité possible. Nous allons l’utiliser pour les exports qui vont suivre.

Animation

Adobe After Effects

1. Exporter via Media Encoder
2. Quicktime > Apple ProRes 4444 avec alpha
3. Décocher export audio
4. Correspondre à la source > (rendre à la profondeur maximum/ profondeur: 16 bcp + alpha)
5. Cocher utiliser la qualité de rendu maximale
6. Export > test.mov

Vidéo en webm

Shutter Encoder

1. Cliquez sur Parcourir > Sélectionnez le fichier test.mov.
2. Choix de la fonction VP9 > .webm
3. Fonctionnalités avancés : cocher : Activer la couche alpha
4. Démarrer la fonction (exporter) > test.webm

Vidéo en hevc

Finder (MAC)

1. Clic droit sur la vidéo : test.mov
2. Encoder les vidéos sélectionnées > HEVC 1080p >
3. Cocher : Conserver la transparence >
4. Continuer > test.hevc.mov)

Solutions de repli

Vidéo en gif animé

Shutter Encoder

1. Cliquez sur Parcourir > Sélectionnez le fichier test.mov.
2. Choix de la fonction Image > .gif
3. Fonctionnalités avancés : cocher : Activer la couche alpha
4. Démarrer la fonction (exporter) > test.gif

Image statique (PNG)

Photoshop

1. Ouvrir la vidéo : test.mov
2. Exportation > Exporter sous
3. Format PNG
4. Cocher Transparence
5. Exporter > test.png

Bien entendu, il existe d’autres solutions que nous n’avons pas abordées en détail ici, telles que les animations en SMIL (SVG). Ces méthodes offrent également des possibilités intéressantes pour intégrer des vidéos transparentes sur le web.

Conclusion

Pour les vidéos avec transparence sur le web, il est essentiel d’être méthodique. Assurez-vous de la compatibilité des navigateurs, choisissez les bons formats vidéo et optimisez les performances. En testant différents formats et en ayant des solutions de repli, vous pouvez offrir une expérience utilisateur super fluide et agréable.