Effets vidéo HTML5 avec CSS Blend Modes

Les effets vidéos sont habituellement appliqués au montage et ne peuvent être manipulés une fois la vidéo exportée. Dudley Storey montre comment utiliser les nouveaux effets CSS dans vos vidéos.

Par

Les effets vidéo traditionnels tels que filtres, cross-fades et blends sont habituellement appliqués via une application de montage telle que Adobe Premiere ou Final Cut. Même s’il y a des avantages évidents à procéder ainsi, tous les changements réalisés dans un éditeur sont intégrés “en dur” dans la vidéo et ne peuvent être manipulés ou supprimés une fois la vidéo exportée.

Hier, en donnant une classe de multimédia HTML5, je me suis rendu compte qu’en utilisant les filtres CSS et les nouveaux blend modes il serait possible de reproduire de nombreux effets vidéo simples directement en CSS : l’élément <video> n’est pas différent des autres en ce sens qu’il peut être affecté par filter et mix-blend-mode dans les navigateurs compatibles. Cela déplace les tâches vers le GPU de la machine, mais le résultat peut être étonnamment efficace !

NdT : La Cascade a publié des articles sur les filtres CSS et sur Blend Modes, introduction et approfondissement.

See the Pen HTML5 Video Effects with CSS Blend Modes by Dudley Storey (@dudleystorey) on CodePen.

Simples mélanges de couleurs

Avant d’expliquer l’exemple complet, prenons le cas simple d’une couche de couleur superposée, fréquemment utilisé comme background pour le texte sur une vidéo. Dans ce cas, j’utiliserai un dégradé derrière la vidéo elle-même :

//HTML
<figure>
  <video>
    <source src="lina.webm">
    <source src="lina.mp4">
  </video>
</figure>

Et le CSS :

//CSS
figure {
  background: linear-gradient(90deg,#00f 50%,transparent 50.1%);
}
figure video {
  mix-blend-mode: overlay;
}

Du fait que le dégradé se trouve derrière la vidéo, il ne sera pas vu par les navigateurs qui ne supportent pas mix-blend-mode : ils ne verront que la vidéo elle-même.

Attention : l’élément <video> intègre automatiquement l’UI player, il serait donc affecté également par mix-blend-mode dans les navigateurs compatibles. Pour l’éviter, j’ai créé une UI personnalisée simple en dehors de la vidéo afin de la contrôler dans l’exemple plus complexe ci-dessus (vous pouvez inspecter le code sur CodePen)

Transformer en noir & blanc

Il est aussi possible d’affecter l’élément <video> avec des filtres CSS, tout comme les images :

//CSS
video { filter: grayscale(1); }

Cela peut s’avérer très utile lorsqu’on veut faire des changements rapides sur la vidéo sans avoir à repasser par l’editing.


Animer les couches de couleur

Enfin, il est possible de créer des effets plus sophistiqués tels que ceux montrés dans le CodePen du début de l’article, avec ce HTML :

//HTML
<figure id="fashion">
  <video controls>
    <source src="fashion-export.webm">
    <source src="fashion-export.mp4">
  </video>
  <div id="vid-cover"></div>
  <figcaption>Summer Sale <span>Now On</span></figcaption>
</figure>
<button id="play-button">Play</button>

...et ce CSS :

//CSS
@keyframes overlay {
  30% { left: 0; width: 50%; }
  50% { background: #00f; }
  80% { left: 80%; width: 20%; }
  100% { left: 60%; width: 40%; background: #00f; }
}
figure#fashion {
  display: inline-block;
  position: relative;
  font-size: 0; margin: 0;
}
figure#fashion video { 
  width: 100%;
}
figure#fashion div {
  width: 10%; height: 100%;
  background: #f00;
  position: absolute; top: 0;
  mix-blend-mode: multiply;
  left: 0;
}
video.playing ~ div#vid-cover {
  animation: overlay 10s forwards;
}
figure#fashion video.playing ~ figcaption {
  opacity: 1;
}
figure#fashion figcaption {
  font-size: 50px;
  font-family: Avenir, sans-serif;
  color: white;
  position: absolute;
  width: 40%; right: 0; top: 30%;
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  transition: 3s 9s opacity;
}
figure#fashion figcaption span {
  font-size: 40px;
  text-transform: lowercase;
  display: block;
}

On ajoute une pincée de JavaScript appliqué à la vidéo et au bouton associé :

//JS
var playbutton = document.getElementById("play-button");
var fashion = document.querySelector("#fashion video");
fashion.removeAttribute("controls");
playbutton.addEventListener("click", function() {
  fashion.play();
  fashion.classList.add("playing");
})

On obtient le résultat que vous avez vu dans la vidéo. J’ai choisi de ne pas réinitialiser l’animation à la fin, de façon à ce que vous puissiez voir le résultat quand vous la rejouez. Un inconvénient potentiel de cette méthode est que les navigateurs qui supportent les animations CSS mais pas encore mix-blend-mode afficheront un rectangle solide se déplaçant sur la vidéo, au lieu d’un rectangle qui interagit avec les pixels de la vidéo. On peut l’éviter en plaçant l’élément sous la vidéo, comme dans le premier exemple.

image
Vidéo de Maximilan Kempe, sous licence Creative Commons.

Intéressé par HTML ? Retrouvez une liste des meilleurs articles et ressources du web.

Autres articles sur la vidéo HTML5 dans la Cascade

Du même auteur, dans la Cascade :

Un carrousel responsif en pur CSS
Combiner CSS clip-path et Shapes
Appropriation culturelle : utiliser les collections des musées
Créer un player audio en HTML5 (3 articles)
Qu’est-ce qu’un élément remplacé ?
Utiliser CSS object-fit
Stores vénitiens 3D en CSS
CSS : Aider la veuve et l’orphelin
Toi seul : utiliser only-child de CSS
Créer un background vidéo fullscreen avec HTML5
Rendre un SVG responsif
La première variable CSS : currentColor
Empty, une pseudo-classe pas si vide
Les raccourcis HTML5


original paru le dans le blog de Dudley Storey, Demosthenes.info.

Sur l’auteur : est enseignant, auteur, artisan et cycliste, il vit à Calgary, dans l’État de l’Alberta au Canada. Passionné par le web et le développement (mobile) qu’il enseigne depuis 15 ans, il est l’auteur de Pro CSS3 Animation, et publie régulièrement dans son blog demosthenes.info des articles sur HTML, CSS et SVG. On peut le suivre sur Twitter ou Google+.

Traduit avec l’aimable autorisation de l’auteur.
Copyright Dudley Storey © 2015.