---
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>
```