# Assets / Vidéo

:::info
++État de la fiche++ : en attente de relecture
:::

:::info
Les contenus vidéo représentaient 80% du trafic mondial en 2018 d'après Cisco et Sandvine, et la tendance va à l'augmentation de ce trafic. La vidéo est le contenu web le plus intense en données car il implique la chargement d'images à un ratio moyen de 24 images par seconde et dont le poids de chaque image dépend de la résolution choisie. Cependant, le média vidéo recouvre de très nombreux formats, usages et modes de diffusion. Il est donc nécessaire de bien définir dans quel cadre l'usage du média vidéo est pertinente et pourquoi.
:::

Une vidéo est un contenu intense en données qui nécessite une bonne connexion fixe ou mobile ainsi qu'un forfait approprié. La vidéo a aussi un fort potentiel narratif ou explicatif qui permet de véhiculer efficacement des émotions ou des instructions. Aujourd'hui, avec les plateformes comme Youtube ont popularisé l'usage du streaming et l'évolution des modèles économiques du numérique a favorisé la vidéo comme méthode d'engagement en ligne.

Méthode de diffusion :
* Téléchargement direct (Lien direct, Torrent, ...)
* Streaming depuis un serveur central (Youtube, Netflix, ...)
* Pair à pair (P2P) (Peertube)
* Copie et transport sur objet de stockage (Clé USB, carte SD, disque dur externe)
* Réseau local (Airdrop, Bluetooth, ...)

Types de contenu :
* Interviews
* Conférences / Évènements
* Tutoriels
* Publicité
* Institutionnel
* Animation (Motion design)

Types de discours :
* Narratif
* Promotionnel
* Explicatif
* Officiel

## Bonnes pratiques

### Redimensionnement
Pour la plupart des vidéos embarquées dans une page il n'est pas nécessaire d'aller au-delà de 1280 pixels par 720 pixels (720p) car il n'y aura pas de différence notable de qualité au-delà d'un écran de 15 pouces. **De manière générale, il n'est pas recommandé d'aller au-delà de 720p, c'est le compromis idéal entre grande qualité d'image et marge de compression.**

Pour des vidéos dont la taille est contrainte dans la page, dans un bloc de 600 pixels de large par exemple, on peut même réduire la qualité de la vidéo à 480p. Toutefois, plus on réduit la résolution de la vidéo plus les textes inclus dedans doivent être gros afin de maintenir la lisibilité même en basse qualité. Il est aussi nécessaire de comprendre qu'un utilisateur avec une mauvaise connexion ou des données payantes ne chargera sûrement pas la vidéo. Il est donc important de ne pas inclurer des informations capitales pour la compréhension du service dans ce medium.

### Limiter l'information par image
Le bitrate indique combien d'information peuvent être encodées dans une image (à hauteur de 24 images / seconde) ou dans une seconde. Plus il y a d'information plus l'image est riche. Toutefois, rajouter de l'information n'augmente pas toujours la qualité de la vidéo. Il s'agit alors de trouver le bon ratio entre la résolution de la vidéo, la taux de compression voulu et le bitrate. **Il est recommandé de rester à un taux constant de 22 à 28 pour une vidéo à 720p (via un outil comme [Handbrake](https://handbrake.fr/)).**

### Choisir le bon codec
Le codec H264 est largement utilisé aujourd'hui mais il date de 2003. De nouveaux formats apparaissent comme le H265, le VP9 et l'AV1 qui sont bien plus performants cependant ils ne sont pas lus par tous les appareils. Par exemple, Youtube utilisait le VP9 pour compresser les vidéos mises en ligne sur sa plateforme (HTML5, navigateur) mais il est aujourd'hui remplacer par l'AV1. Ce codec fonctionne mieux que le H264 et le VP9 pour compresser les vidéos (même si l'encodage consomme beaucoup plus de ressources) et est majoritairement utilisé pour le streaming (Netflix, ...). Toutefois sa comptabilité n'est pas forcément optimale [sur tous les navigateurs notamment Safari](https://caniuse.com/?search=vp9).

Aujourd'hui, même sur H264 est moins performant en termes de compression, il est le plus répandu et le plus comptatible. Toutefois, dans les prochaines années AV1 et le H265 risquent d'être les plus répandus.

### Optimiser le chargement dans une page

#### Vidéo simple sans lecture automatique

La balise HTML `<video>` vous permet d’afficher une vidéo au sein d’une page web à partir du fichier source, que vous aurez pris soin de prélablement [compressé et optimisé](#Compression-amp-optimisation). Pour les vidéos dont a lecture est initiée par l’utilisateur, l’ajout de l’attribut `preload="none"` empêche le navigateur de précharger la vidéo.

<video controls preload="none" poster="ma-video.jpg">
  <source src="ma-video.webm" type="video/webm">
  <source src="ma-video.mp4" type="video/mp4">
</video>

#### Lazy loading video

Pour les vidéos qui doivent se lancer automatiquement (pour remplacer un GIF trop lourd par exemple), la technique du lazy loading permet de ne la charger que lorsqu’elle est présente à l’écran.

<video autoplay muted loop playsinline width="610" height="254" poster="ma-video.jpg" class="lazy">
  <source data-src="ma-video.webm" type="video/webm">
  <source data-src="ma-video.mp4" type="video/mp4">
</video>

document.addEventListener("DOMContentLoaded", function() {
  // 
  var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));
  if ("IntersectionObserver" in window) {
    var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(video) {
        if (video.isIntersecting) {
          for (var source in video.target.children) {
            var videoSource = video.target.children[source];
            if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
              videoSource.src = videoSource.dataset.src;
            }
          }
          video.target.load();
          video.target.classList.remove("lazy");
          lazyVideoObserver.unobserve(video.target);
        }
      });
    });
    lazyVideos.forEach(function(lazyVideo) {
      lazyVideoObserver.observe(lazyVideo);
    });
  }
});

Lorsque vous chargez paresseusement un élément `<video>`, vous devez parcourir tous les éléments `<source>` enfants et convertir leurs attributs `data-src` en attributs `src`. Une fois que vous avez fait cela, vous devez déclencher le chargement de la vidéo en appelant la méthode de chargement de l’élément, après quoi la lecture du média commencera automatiquement grâce à l’attribut de lecture automatique.

#### iframe à la demande
Si votre vidéo doit être intégrée sous la forme d’une `iframe`, l’idée est de ne la charger que si l’utilisateur en fait explicitement la demande (en cliquant sur un bouton play par exemple). Cela peut se faire assez facilement en reprenant les techniques de lazy loading décrites au sein de la fiche [Assets / Images](https://hackmd.io/R_DoKQCiSGy_V9HfzjYCOQ#Lazy-loading).

Exemple d’intégration d'une vidéo YouTube sous la forme d’une `iframe` : l’utilisation de l’attribut `data-src` à la place de `src` empêche l’`iframe` de charger à l’affichage de la page.

<figure class="video">
  <img src="ma-video.jpg" alt="…" loading="lazy" width="1280" height="720">
  <button class="play" aria-label="Lire la vidéo">▶︎</button>
  <iframe width="1280" height="720" data-src="https://www.youtube-nocookie.com/embed/xxxxxxxxxxxx?autoplay=1" title="YouTube video player" … ></iframe>
</figure>	

document.addEventListener("DOMContentLoaded", function() {
  // sélectionne toutes les balises <figure> ayant la classe video
  var videos = document.querySelectorAll("figure.video");
  // pour chaque vidéo
  videos.forEach(function(video) {
    // sélectionne le bouton play
    var playBtn = video.querySelector("button.play");
    // au clique sur le bouton play
    playBtn.addEventListener("click", function() {
      // sélectionne l’iframe
      var iframe = video.querySelector("iframe");
      // définit la valeur de l’attribut src 
      // comme étant égale à celle de data-src
      iframe.src = iframe.dataset.src;
      // supprime l’attribut data-src
      iframe.removeAttribute("data-src");
      // masque le bouton play en ajoutant l’attribut hidden
      playBtn.setAttribute("hidden");
    });
  });
});

## Les bonnes questions à se poser

### Définir la pertinence de la vidéo

Il y a une large différence entre suivre un tutoriel vidéo pour réparer son écran de smartphone et une vidéo promotionnelle insérée dans un fil d'actualité afin de maximiser de l'engagement autour d'un produit. Il ne s'agit pas alors de refuser l'intégration de toute vidéo mais de bien comprendre la pertinence de créer et d'intégrer une vidéo ou non.

**Est-ce que mon format implique forcément l'usage de la vidéo ?**
- [ ] Oui
- [ ] Non

Par exemple, un format explicatif comme un tutoriel n'implique pas forcément l'usage d'une vidéo. Le site [iFixit](https://fr.ifixit.com/) propose des tutoriels où chaque étape est illustrée par une image et un texte d'instruction. Ce format convient bien mieux qu'une vidéo où il serait nécessaire d'appuyer sur pause en à chaque étape.

**Est-ce que ma vidéo a une réelle valeur pour l'utilisateur ou sert-elle plutôt à capter des données ?**
- [ ] Oui
- [ ] Non

La vidéo est parfois utilisé comme mécanisme de captation de l'attention à des fins commerciales. Une vidéo qui attire l'attention de l'utilisateur n'est pas forcément une vidéo qui lui est utile et à ce titre de nombreuses techniques sont utilisées pour capter l'attention : montage rapide, effets visuels, autoplay, ... Les principes d'éco-conception ne vont pas dans le sens de ces pratiques et ne conseillont pas de les reproduire.

**Est-ce que l'usage de la vidéo se fait au détriment de la qualité rédactionnelle de mon service ?**
- [ ] Oui
- [ ] Non

Il est plus important d'avoir les bons mots plutôt qu'une vidéo de remplissage. La qualité rédactionnelle du service numérique est essentielle, vidéo ou non. Cela demande un travail de fond conséquent et mené sur le long terme mais l'effort est généralement payant en termes de qualité de contenu et d'accessibilité.

**Est-ce que je peux faire sous-titrer ma vidéo ?**
- [ ] Oui
- [ ] Non

Il s'agit ici plutôt d'une bonne pratique d'accessibilité. Si le sous-titrage n'est pas prévu alors il est sûrement plus pertinent de se concentrer sur la qualité du texte et des images afin de s'adresser de façon plus inclusive à ces utilisateurs.

## Les cas pour bien comprendre en contexte

### Cas n°1 : Compresser une vidéo avec Handbrake
:::info
++Questions posées par le cas++ : comment compresser le poids d'une vidéo rapidement et sans perdre trop de qualité ?
:::

:::info
**Prérequis**
* Un fichier vidéo prêt à être compresser (.mov, .mp4,...)
* Le logiciel gratuit [Handbrake](https://handbrake.fr/) (Windowns, Mac, Linux)
:::

**Sélection du fichier**
À l’ouverture du logiciel, Handbrake vous demandera quelle vidéo vous souhaitez ouvrir (l’explorateur de fichiers s’ouvre automatiquement). Sélectionnez la vidéo que vous souhaitez compresser.

**Paramètres généraux**
Dans la section “Summary” choisissez le format MP4 et cochez “Web Optimized” et “Align A/V Start”.

**Paramètres vidéo**
Dans la section “Video” choisissez comme video encoder “H264 (x264)”, pour le framerate choisissez “Same as source” et cochez “Constant framerate”.Sur la droite du panneau choisissez “Constant Quality” et faites glisser sur la valeur 22*. Pour les vidéos qui auront comme dimensions 1280 par 720 pixels, il est recommandé d’aller entre 19 et 23.

:::warning
Plus ce chiffre sera bas plus vous gagnerez en qualité (mais aussi en poids). Donc 18 est égal à une meilleure qualité mais un poids plus élevé, 24 donnera une qualité moins élevée mais un poids plus léger.
:::

**Dimensions**
Dans la section “Dimensions”, pour le “Storage Size” indiquez les valeurs 1280 dans la première case et 720 dans la seconde case*, cochez “Keep Aspect Ratio”. Dans le champ “Anamorphic” choisissez “Off” et un modulus de 2. Vous pouvez garder le “Cropping” en automatique.

**Paramètres audio**
Dans la section “Audio” vous devez avoir une seule piste qui sera en haut de la liste. Garder le “Mixdown” en stereo et garder le “Samplerate” en automatique. Vous pouvez descendre le Bitrate en dessous de 160 mais le gain est minime. Il est conseillé de garder le Bitrate d’origine. Le réduire en dessous de 160 pour réduire le poids de votre vidéo permet un gain minime alors que la qualité audio est très importante pour l’usager.

**Paramètres d'export**
En bas de la fenêtre d’Handbrake vous pouvez voir deux champs à modifier. Le premier est “Save As:” dans lequel vous indiquez le nom que vous souhaitez donner à la vidéo qui sera exportée. Pour modifier le champ “To:” cliquez sur “Browse” et choisissez où est-ce que vous souhaitez que la vidéo soit exportée sur votre ordinateur.

**Exportation**
Cliquez sur “Start” et la compression de votre vidéo commencera. Vous trouverez votre nouvelle vidéo à l’endroit que vous avez renseigné

## Ressources

### Guides
- [Comment réduire en 5 minutes le poids d’une vidéo tout en gardant une bonne qualité](https://theshiftproject.org/wp-content/uploads/2019/09/Guide-R%C3%A9duire-le-poids-de-vos-vid%C3%A9os-en-5-minutes_V6.pdf)
- [Lazy-loading video](https://web.dev/lazy-loading-video/)

### Outils

- [Handbrake](https://handbrake.fr/)
- [Shrink my Video](https://acailly.github.io/shrink-my-video/)

## Lexique

#### Résolution vidéo
On retrouve souvent les résolutions 360p, 480p, 720p, 1080p et 4K sur les plateformes vidéo courantes. Toutefois il est rare que le 1080p et le 4K soient nécessaires pour une vidéo embarquée dans une page web, même en plein écran. Nous conseillons d'exporter votre vidéo en 720p au maximum afin de réduire le poids et de maintenir la lisibilité.

#### Le bitrate
Cet indicateur technique permet de sélectionner le nombre d'informations par seconde. Plus il y a d'informations par seconde plus on peut avoir de qualité par image.

#### Codec
Un codec est un programme qui sert à encoder un fichier (video, image, audio) afin de permettre son stockage et sa transmission. Certains codecs ont des fonctions de compression. Codec est l'assemblage du "**cod**eur" et "**déc**odeur".