Optimiser votre vidéo pour le Web

1. Technique utilisée
2. Optimisation vidéo
3. Exemple
4. Mon streaming

Ametys offre plusieurs choix pour ajouter une vidéo dans une page:

• l'utilisation de plateforme externe utilisant le streaming : youtube, dailymotion, et bien d'autres via la fonction HTML Expert
• l'import d'une vidéo MP4 directement dans Ametys. 

Les plateformes de streaming sont les plus adaptées à la visualisation d'une vidéo en ligne, via un navigateur. 

Le web est en évolution constante y compris concernant les vidéos et ces informations sont valables à la date ou cet article est écrit. 

Technique utilisée

Ametys utilise le tag video pour indiquer au navigateur qu'il y a une vidéo à lire (https://www.w3schools.com/tags/tag_video.asp). Nous ajoutons par dessus des boutons pour permettre à l'internaute d'envoyer les actions aux navigateur. La lecture est réalisée par le navigateur. Il faut donc adapter le format de la vidéo aux possibilités des navigateurs utilisés par les utilisateurs et aux possibilités réseau.

Lorsque vous diffusez une vidéo à partir du tag video, c'est à vous d'optimiser la vidéo pour l'utilisateur final, contrairement aux plateformes de streaming comme youtube qui reçoivent la vidéo et la convertissent en multiples formats, le format est ensuite sélectionné par le serveur de streaming en fonction de l'utilisateur (fibre, adsl, pc de bureau, téléphone 4G, 3G, ...) pour que la lecture soit adaptée.

Optimisation vidéo

Vous trouverez de nombreuses ressources sur internet concernant le sujet "format vidéo pour le web", "optimiser une vidéo pour le web", ..., ce sont quelques exemples de mots-clés que vous pouvez utiliser pour accroitre vos connaissances et optimiser vos chances d'avoir une vidéo lue par le plus grand nombre de personnes. 

Il faut prendre en compte de nombreux paramètres : 

• le conteneur (3GP, AVI, MP4,...), utilisez le MP4
• le codec vidéo (DivX, MPEG-4, H.264, ...), utilisez le x264
• la résolution (4k = 3840x2160, 1080p = 1920x1080, 720p = 1280 x 720, 480p = 854 x 480), nous vous conseillons d'utiliser 480p ou 720p
• la ratio (16/9 ou 4/3), vous avez la liberté d'utilisation
• la fréquence, le nombre d'images par secondes (FPS; 24 images par secondes, 25 i/s, 60i/s...), utiliser une fréquence inférieure ou égale a 25i/s, 16i/s est un bon compromis
• le débit, le nombre de kilobits de données par seconde (1000kbs, 5000 kbs,...), utilisez un débit inférieur a 5000kbs. Par exemple, une vidéo de 10 minutes, 1920x1080, avec un bitrate de 12Mo/s fera 900Mo. Si on réduit le bitrate à 1Mo/s (=1000kbs), elle fera 75Mo. Nous vous conseillons d'utiliser un débit inférieur ou égal à 1000kbs.

En résumé pour une vidéo "optimisée" (à adapter en fonction des besoins) : MP4, codec x264, résolution 480p=854 x 480pixels (voir 720p), fréquence 15 images par secondes et un débit de 1000kbs max.

Une vidéo sans outil de streaming doit pouvoir être téléchargée par l'utilisateur. Une vidéo lourde, par exemple 500M, risque d'être compliquée à télécharger pour un utilisateur qu'il soit sur un PC fixe au bureau, à la maison ou sur un téléphone. Le poids est la résultante de la combinaison de tous les paramètres (codec, résolution, débit, fréquence).

Exemple

Cet exemple montre qu'en fonction des besoins mais surtout des paramètres choisis nous pouvons rendre la lecture optimisée et à la portée d'un plus grand nombre d'utilisateurs. Dans le même temps cela permet d'optimiser l'espace de stockage utilisé, les sauvegardes, la bande passante des utilisateurs et par la même occasion l'empreinte carbone.

Il est possible d'optimiser la durée de la vidéo et éliminer les partie les plus "lentes".

Autre exemple sur une vidéo de 55 secondes

Voici la vidéo n°3:

Mon streaming

Pour aller plus loin, il est possible d'avoir son propre serveur de streaming soit par des solutions payantes (il y a tous les prix) soit par des solutions gratuites. Une recherche sur google "youtube alternatives" ou "youtube alternative self hosted" est un bon départ.