Blog d'un passionné du web (Symfony2, HTML5, Sass, Gulp…)

Mon site freelance
Mon Facebook - Mon Twitter

Optimiser et encoder des vidéos pour le web [mp4, webm VP9, Ubuntu, ffmepg]

Petit tuto rapide pour facilement optimiser des vidéos à destination du web.

1. Balise pour intégrer la vidéo en HTML5

Petit rappel de la balise pour intégrer une vidéo en html5 :

<video controls preload="auto" poster="poster.png">
    <source src="/oceans.mp4" type="video/mp4"></source>
    <source src="/oceans.webm" type="video/webm"></source>
    <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
</video>

Il est assez simple de mettre cette vidéo en fond avec quelque chose comme ceci :


#container-video {
position: relative;
height: 500px;
overflow: hidden;
video {
position: absolute;
width: 100%;
}
}

2. Optimiser une vidéo mp4 pour le web avec FFMPEG

Si comme moi vous recevez des vidéos de 200Mb à intégrer vous allez devoir optimiser ces vidéos pour que vos utilisateurs aient une chance de charger la vidéo.
Je vous passe les explications. La variable à ajuster peut être le 1.2M que vous pouvez définir pour une plus ou moins bonne qualité.

ffmpeg -i source.mp4 -c:v libx264 -preset slow -b:a 128k -s 1024x576 -strict -2  -b:v 1.2M  output.mp4

Avec ces paramètres j’arrive à une vidéo de 12M ce qui est déjà énorme …

2. Encoder une vidéo mp4 en webm (VP9)

Afin que les utilisateurs de firefox et Opera puissent lire la vidéo, il vous faut générer le format .webm.

ffmpeg -i SOURCE.mp4 -c:v libvpx-vp9 -crf 30 -b:v 1.2M -c:a libvorbis output.webm

Et voilà, si vous avez mieux pour les paramètres je suis preneur. N’hésitez pas à laisser un commentaire pour que je modifie l’article.

5 septembre 2018


Previous Post