Lorsque l’on intègre une vidéo MP4 dans une page web, on s’attend à ce qu’elle démarre rapidement. Pourtant, il arrive qu’un lecteur HTML5 attende le téléchargement complet du fichier avant de lancer la lecture.

Le problème ne vient pas forcément du navigateur, ni du lecteur, ni même du serveur. Très souvent, il vient de la structure interne du fichier MP4.

Pour qu’une vidéo MP4 puisse être lue progressivement, les métadonnées nécessaires à la lecture doivent se trouver au début du fichier. Dans un MP4, ces métadonnées sont stockées dans ce que l’on appelle le moov atom. Si ce bloc se trouve à la fin du fichier, le navigateur doit parfois attendre d’avoir téléchargé toute la vidéo avant de commencer la lecture.

La solution moderne consiste à optimiser le fichier MP4 avec FFmpeg et l’option -movflags +faststart.

Pourquoi une vidéo MP4 ne démarre pas immédiatement ?

Un fichier MP4 contient plusieurs blocs internes, appelés atoms ou boxes. Parmi eux, le bloc moov contient les métadonnées nécessaires au lecteur : pistes audio et vidéo, durées, index, informations de synchronisation, etc.

Si le bloc moov est placé à la fin du fichier, le navigateur ou le lecteur doit atteindre cette partie avant de savoir comment lire correctement la vidéo. Sur un fichier local, ce n’est pas très grave. Sur le web, cela peut provoquer une attente frustrante.

Pour une vidéo web classique, on veut donc placer le moov atom au début du fichier. Ainsi, le navigateur peut lire les métadonnées immédiatement, puis commencer la lecture pendant que le reste de la vidéo continue de se télécharger.

C’est ce que l’on appelle souvent la lecture progressive. Ce n’est pas du streaming adaptatif comme HLS ou DASH, mais c’est largement suffisant pour beaucoup de vidéos MP4 intégrées dans une page web.

La méthode actuelle : FFmpeg avec -movflags +faststart

Aujourd’hui, il n’est généralement plus nécessaire d’utiliser qt-faststart séparément. FFmpeg sait déplacer le moov atom pendant la création du fichier MP4 grâce à l’option :

-movflags +faststart

Exemple complet pour encoder une vidéo en H.264 avec audio AAC :

ffmpeg -i input.mov \
    -c:v libx264 \
    -preset slow \
    -crf 22 \
    -c:a aac \
    -b:a 128k \
    -movflags +faststart \
    output.mp4

Cette commande encode la vidéo en H.264, encode l’audio en AAC, puis réorganise le MP4 afin que les métadonnées soient placées au début du fichier.

Le résultat : le navigateur peut commencer la lecture plus rapidement, sans attendre le téléchargement complet du fichier.

Optimiser un MP4 déjà encodé sans réencoder

Si votre fichier MP4 existe déjà et que vous voulez seulement déplacer le moov atom, inutile de réencoder la vidéo. Vous pouvez copier les flux audio et vidéo tels quels :

ffmpeg -i source.mp4 \
    -c copy \
    -movflags +faststart \
    destination.mp4

Cette commande est rapide, car elle ne recompresse pas la vidéo. Elle réécrit simplement le conteneur MP4 en plaçant les métadonnées au début.

C’est la méthode à utiliser si la vidéo est déjà dans un format compatible web, par exemple H.264 pour la vidéo et AAC pour l’audio.

Remplacer qt-faststart

Historiquement, on utilisait souvent qt-faststart, un outil fourni avec FFmpeg, pour réorganiser un fichier MP4 après encodage :

qt-faststart source.mp4 destination.mp4

Le rôle de qt-faststart était simple : déplacer le moov atom avant les données média, afin de permettre une lecture progressive.

Actuellement, je préfère utiliser directement FFmpeg :

ffmpeg -i source.mp4 -c copy -movflags +faststart destination.mp4

C’est plus portable, plus facile à intégrer dans un script, et cela évite de dépendre d’un utilitaire séparé. Même combat, moins de poussière.

Vérifier si une vidéo est déjà optimisée faststart

FFmpeg affiche souvent une ligne explicite lorsqu’il applique l’optimisation :

[mp4 @ ...] Starting second pass: moving the moov atom to the beginning of the file

Pour inspecter un fichier MP4, vous pouvez utiliser ffprobe :

ffprobe -hide_banner source.mp4

Pour une vérification plus directe, vous pouvez chercher la position des atoms moov et mdat dans le fichier :

grep -abo "moov\|mdat" source.mp4 | head

Si moov apparaît avant mdat, le fichier est généralement prêt pour la lecture progressive.

Si mdat apparaît avant moov, le fichier peut nécessiter un passage avec -movflags +faststart.

Encodage recommandé pour une vidéo web MP4

Pour une vidéo destinée au web, un bon profil généraliste ressemble à ceci :

ffmpeg -i input.mov \
    -c:v libx264 \
    -profile:v high \
    -level 4.1 \
    -pix_fmt yuv420p \
    -preset slow \
    -crf 22 \
    -c:a aac \
    -b:a 128k \
    -movflags +faststart \
    output.mp4

Quelques explications utiles :

• libx264 encode la vidéo en H.264.
• yuv420p améliore la compatibilité avec les navigateurs et lecteurs.
• crf 22 donne une qualité correcte avec un poids raisonnable.
• preset slow optimise mieux la compression, au prix d’un encodage plus lent.
• aac produit une piste audio compatible web.
• -movflags +faststart place les métadonnées MP4 au début du fichier.

Pour une qualité un peu plus élevée, utilisez -crf 20. Pour un fichier plus léger, utilisez -crf 24. Plus la valeur CRF est basse, meilleure est la qualité, mais plus le fichier est lourd.

Redimensionner une vidéo pour le web

Si la vidéo source est très grande, par exemple en 4K, vous pouvez créer une version 1080p plus légère :

ffmpeg -i input.mov \
    -vf "scale=-2:1080" \
    -c:v libx264 \
    -preset slow \
    -crf 22 \
    -c:a aac \
    -b:a 128k \
    -movflags +faststart \
    output-1080p.mp4

Le -2 demande à FFmpeg de calculer automatiquement la largeur en conservant le ratio, avec une valeur compatible avec les exigences d’encodage. C’est propre et ça évite les dimensions impaires qui font râler certains encodeurs.

Créer plusieurs qualités pour une intégration web

Pour une simple page web, un MP4 optimisé peut suffire. Cependant, si vous servez beaucoup de vidéos, ou si les fichiers sont lourds, vous pouvez proposer plusieurs résolutions.

Exemple pour une version 720p :

ffmpeg -i input.mov \
    -vf "scale=-2:720" \
    -c:v libx264 \
    -preset slow \
    -crf 23 \
    -c:a aac \
    -b:a 128k \
    -movflags +faststart \
    output-720p.mp4

Exemple pour une version 480p :

ffmpeg -i input.mov \
    -vf "scale=-2:480" \
    -c:v libx264 \
    -preset slow \
    -crf 24 \
    -c:a aac \
    -b:a 96k \
    -movflags +faststart \
    output-480p.mp4

Si vous avez besoin d’adaptation automatique selon la connexion de l’utilisateur, regardez plutôt HLS ou DASH. Le MP4 progressif est simple et efficace, mais ce n’est pas du streaming adaptatif.

Intégrer la vidéo en HTML5

Une fois le fichier MP4 optimisé, vous pouvez l’intégrer avec la balise video :

<video controls preload="metadata" width="1280" height="720">
    <source src="/videos/demo.mp4" type="video/mp4">
    Votre navigateur ne supporte pas la lecture vidéo HTML5.
</video>

L’attribut preload="metadata" demande au navigateur de charger les métadonnées sans télécharger toute la vidéo immédiatement. C’est un bon réglage par défaut pour éviter de gaspiller de la bande passante.

Si la vidéo doit vraiment démarrer automatiquement, il faudra généralement ajouter muted, car les navigateurs bloquent souvent l’autoplay avec son :

<video autoplay muted playsinline controls preload="metadata">
    <source src="/videos/demo.mp4" type="video/mp4">
</video>

Cas WordPress : éviter les vidéos trop lourdes dans la médiathèque

WordPress peut intégrer des vidéos MP4 via la médiathèque, mais ce n’est pas toujours le meilleur choix pour de gros fichiers. Une vidéo de 200 Mo servie directement depuis le même hébergement que le site peut consommer beaucoup de bande passante et ralentir l’expérience.

Pour une petite vidéo ponctuelle, un MP4 optimisé avec -movflags +faststart convient très bien. Pour des vidéos régulières, lourdes, ou à fort trafic, utilisez plutôt un service vidéo, un CDN ou un stockage objet compatible HTTP.

Si vous servez les vidéos depuis Nginx ou Apache, vérifiez aussi que le serveur accepte les requêtes partielles HTTP. Les navigateurs utilisent les Range requests pour demander seulement certaines parties du fichier. Sans cela, la lecture progressive et la navigation dans la vidéo peuvent mal fonctionner.

Vérifier les headers HTTP utiles

Pour vérifier que le serveur expose correctement le fichier MP4, utilisez curl :

curl -I https://example.com/videos/demo.mp4

Vous voulez idéalement voir un type MIME correct :

Content-Type: video/mp4

Et, selon le serveur, le support des requêtes partielles :

Accept-Ranges: bytes

Pour tester une requête partielle :

curl -I -H "Range: bytes=0-1023" https://example.com/videos/demo.mp4

Une réponse 206 Partial Content indique que le serveur répond correctement aux requêtes de plage. C’est bon signe pour la lecture vidéo dans un navigateur.

Script pratique pour optimiser plusieurs MP4

Si vous avez plusieurs fichiers MP4 à optimiser sans les réencoder, vous pouvez utiliser cette boucle :

mkdir -p faststart

for file in *.mp4; do
    ffmpeg -i "$file" -c copy -movflags +faststart "faststart/$file"
done

Cette commande crée un dossier faststart, puis y écrit une version optimisée de chaque fichier MP4.

Pour éviter d’écraser quoi que ce soit, elle garde les fichiers sources intacts. C’est toujours préférable, surtout quand on manipule des fichiers clients ou des exports vidéo longs à régénérer.

Checklist d’optimisation MP4 pour le web

Voici la séquence que j’utilise pour préparer une vidéo MP4 destinée au web :

# 1. Inspecter la vidéo.
ffprobe -hide_banner input.mov

# 2. Encoder en H.264/AAC avec faststart.
ffmpeg -i input.mov \
    -c:v libx264 \
    -pix_fmt yuv420p \
    -preset slow \
    -crf 22 \
    -c:a aac \
    -b:a 128k \
    -movflags +faststart \
    output.mp4

# 3. Vérifier la position des atoms.
grep -abo "moov\|mdat" output.mp4 | head

# 4. Tester les headers HTTP après upload.
curl -I https://example.com/videos/output.mp4

# 5. Tester une requête partielle.
curl -I -H "Range: bytes=0-1023" https://example.com/videos/output.mp4

Conclusion

Si une vidéo MP4 ne démarre qu’après téléchargement complet, le problème vient souvent du moov atom placé à la fin du fichier. Pour une lecture progressive, il doit se trouver au début.

La méthode moderne consiste à utiliser FFmpeg avec :

-movflags +faststart

Pour optimiser un MP4 déjà encodé sans perte de qualité :

ffmpeg -i source.mp4 -c copy -movflags +faststart destination.mp4

Pour encoder directement une vidéo web propre :

ffmpeg -i input.mov \
    -c:v libx264 \
    -pix_fmt yuv420p \
    -preset slow \
    -crf 22 \
    -c:a aac \
    -b:a 128k \
    -movflags +faststart \
    output.mp4

qt-faststart a rendu service pendant des années, mais FFmpeg sait désormais faire le travail directement. Moins d’outils, moins d’étapes, même résultat : une vidéo MP4 qui démarre vite et qui ne laisse pas l’utilisateur regarder une barre de chargement comme si c’était un court-métrage expérimental.

Sources

• Documentation FFmpeg : formats et muxers
• Documentation FFmpeg : codecs
• Documentation FFmpeg : options de commande
• MDN : élément HTML video
• MDN : HTTP Range requests

Report a typo