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.mp4Avec 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.webmEt 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.
