feat: add draft article
parent
bef7af2d08
commit
c1327242f9
|
@ -0,0 +1,94 @@
|
||||||
|
---
|
||||||
|
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>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,28 +0,0 @@
|
||||||
---
|
|
||||||
title: "Test"
|
|
||||||
description: "test"
|
|
||||||
date: 2022-11-25
|
|
||||||
tags:
|
|
||||||
- test
|
|
||||||
- test2
|
|
||||||
- test3
|
|
||||||
authors:
|
|
||||||
- John Doe
|
|
||||||
draft: true
|
|
||||||
layout: article.njk
|
|
||||||
---
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus deleniti eius, eveniet fugit magni provident
|
|
||||||
vel? Corporis deserunt doloribus ducimus hic iusto nemo neque perspiciatis qui sit totam! Culpa, saepe!
|
|
||||||
|
|
||||||
Accusamus consectetur consequatur cupiditate est neque nisi pariatur possimus quisquam quod ratione. Atque dolorem
|
|
||||||
eius excepturi explicabo, illo, inventore ipsam laborum maxime molestias nisi omnis possimus sequi temporibus ut vero.
|
|
||||||
|
|
||||||
Accusantium aspernatur beatae commodi corporis, delectus dolore earum et explicabo illo illum ipsa ipsam iste magni
|
|
||||||
maiores minus neque omnis quis rem rerum sapiente sed ullam unde velit vitae voluptatum?
|
|
||||||
|
|
||||||
Atque, deserunt enim itaque laborum libero magnam minus pariatur quam, reiciendis repellat suscipit velit. Ad
|
|
||||||
aliquam debitis dolores fuga harum libero minus quaerat quam sequi velit! Recusandae rem, voluptatibus. Possimus?
|
|
||||||
|
|
||||||
Amet id itaque numquam obcaecati rem! Mollitia nostrum numquam quod. Aperiam assumenda, delectus dolor fuga fugiat,
|
|
||||||
iste maxime neque pariatur porro provident quaerat vitae voluptas? Dolorem quia quo tempore voluptatem.
|
|
Loading…
Reference in New Issue