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.
