95 lines
2.5 KiB
Markdown
95 lines
2.5 KiB
Markdown
---
|
|
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-25
|
|
tags:
|
|
- écoconception
|
|
- accessibilité
|
|
- éthique
|
|
authors:
|
|
- Nicolas DOBY
|
|
draft: true
|
|
layout: 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 :
|
|
```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>
|
|
```
|
|
|
|
|
|
|