feat: new article

src/_pages/blog/integration_video.md

@@ -0,0 +1,93 @@
+---
+title: Intégrer une vidéo sur une page Web
+description: Intégrer au mieux une vidéo sur une page Web en prenant en compte les aspects éco-conception, accessibilité et éthique.
+date: 2022-11-02
+tags:
+  - écoconception
+  - accessibilité
+  - éthique
+authors:
+  - Nicolas DOBY
+layout: post.njk
+---
+
+
+margaux.escande
+16:24
+donner un exemple de truc relou
+
+poser la problématique principale : environnemental / accessibilité numérique
+
+poser les sous problématique : Gafam
+
+l'usage des vidéos explose : tik tok ...
+
+expliquer ce qui peut être fait d'un point de vue métier / technique et à quel moment une vidéo fait sens
+
+## Introduction
+
+Chiffre du poids des vidéos
+
+Google / auto hébergement
+
+Bannir l'autoplay
+
+Rendre accessible
+
+Afficher la durée, le poids
+
+Encoder sur un format standard
+
+Limiter le poids, 720p max
+
+Exemple https://couleur-science.eu/ qui explique des phon
+
+## Conseils
+
+Pour un tuto technique, bannissez le format vidéo. Rien de plus frustrant de voir un tutoriel expliquant une technologie, un framework, .. sous forme de vidéo.
+La plupart du temps, le code source n'est pas disponible.
+
+Rien de mieux que de présenter un tutoriel avec des explications ponctuées d'exemples de code au format textuel !
+
+## Se passer de Google
+
+Indépendance face aux GAFAM,
+
+Vidéo peut être supprimée,
+
+le lecteur ajoute une surcouche non nécessaire
+
+Si vous avez besoin Peertube vs. lecteur HTML5
+
+https://www.youtube.com/watch?v=dQw4w9WgXcQ
+
+
+## Rendre une vidéo accessible
+
+Ajouter une transcription :
+```html
+<figure>
+  <video aria-describedby="transcription" preload="metadata" poster="/videos/video1_poster.jpg" width="620">
+    <source src="/videos/video1.mp4" type="video/mp4">
+    <p>Votre navigateur ne prend pas en charge les vidéos HTML5. <a href="/videos/video1.mp4">un lien pour télécharger la vidéo</a>.</p>
+  </video>
+  <figcaption>
+    <details>
+      <summary>Afficher la transcription</summary>
+      <div id="transcription">
+        <p>
+          - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad commodi, dolorum incidunt laudantium, mollitia
+            nihil nisi obcaecati porro quaerat, quam quas quidem quis quos recusandae repellendus reprehenderit suscipit temporibus vitae?
+        </p>
+        <p>
+          - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus earum neque tempore? A ab animi dolorum ea eos, fuga, hic numquam
+          obcaecati perferendis reiciendis sapiente vero vitae voluptatem. Iusto, natus?
+        </p>
+      </div>
+    </details>
+  </figcaption>
+</figure>
+```
+
+
+