2.5 KiB
title, description, date, tags, authors, draft, layout
| title | description | date | tags | authors | draft | layout | ||||
|---|---|---|---|---|---|---|---|---|---|---|
| Intégrer une vidéo sur une page Web | Intégrer au mieux une vidéo sur une page Web en prenant en compte les aspects éco-conception, accessibilité et éthique. | 2022-11-25 |
|
|
true | article.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 :
<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>