Au cours des dernières années, de plus en plus de projets utilisent la vidéo comme partie intégrante de l'application. C'est une excellente direction, car les vidéos sont plus attrayantes que les photos ( les vidéos peuvent doubler le taux de conversion et augmenter le temps passé sur le site ) et, en tant que telles, peuvent vraiment attirer les clients à explorer des détails sur les produits et services. Cependant, tout va de travers lorsqu'il y a des problèmes liés à la lecture vidéo.
Les problèmes de lecture vidéo sont directement liés à la taille et au débit binaire de la vidéo. Une vidéo avec de grandes dimensions ou un débit binaire élevé prendra plus de temps à télécharger et nécessitera un réseau plus rapide pour une lecture fluide. Cela conduit à des temps de démarrage plus longs, et si le réseau ne peut pas fournir la vidéo assez rapidement, la vidéo se bloquera pendant la lecture vidéo.
Il existe cependant une solution! En exécutant des optimisations de base de nos vidéos avant de les ajouter à nos sites Web, nous pouvons empêcher ces problèmes de se produire pour de bon – enfin, la plupart d'entre eux. Tout ce que nous devons vraiment faire est de réduire la taille du fichier – d'une manière ou d'une autre. Alors, maintenant, l'astuce est la suivante: comment réduire la taille du fichier sans réduire la qualité?
Dans cet article, nous allons passer en revue les outils et certaines des étapes que vous pouvez suivre pour optimiser la lecture de vos vidéos – tout cela pour éviter les étals et impressionner vos précieux clients!
Données du monde réel
Il n'est pas rare de trouver des sites Web avec des vidéos extrêmement volumineuses – par exemple, utilisées comme vidéos d'arrière-plan de héros. Dans mes recherches, je recherchais des sites trouvés dans l'archive HTTP mobile HTTPArchive de décembre 2020 et il n'était pas difficile de repérer un bon nombre de sites chargeant d'énormes fichiers vidéo par défaut, les deux sur mobile et sur ordinateur.
Il est bien sûr douteux que vous puissiez réaliser les mêmes économies que celles que je vais montrer ici, mais vous obtiendrez des conseils et des conseils utiles sur les choses à garder à l'esprit lorsque vous manipulez des vidéos . En fait, il est très facile de placer accidentellement des vidéos extrêmement volumineuses sur votre site Web si vous ne faites pas attention, ce qui les rend presque inutilisables pour la plupart de vos clients.
The Pumpkin Patch Story
Imaginez que nous sommes à la mi-octobre et que vous cherchez un champ de citrouilles et un labyrinthe de maïs pour passer un après-midi de week-end en famille. Dans le confort de votre ordinateur de bureau, vous recherchez sur le Web un emplacement à proximité et trouvez celui qui vous convient. Le site Web est ravissant, avec une superbe vidéo drone 4K des champs jouant en haut de la page. Vous choisissez l'URL et envoyez-la à vous-même et à vos proches afin que vous puissiez continuer à explorer cette option lors de vos déplacements.
Mais lorsque vous ouvrez la page sur votre téléphone, vous remarquez un problème: la vidéo tente désespérément de jouer sur votre téléphone, mais ne parvient malheureusement pas à le faire. La vidéo continue de caler et de redémarrer encore et encore étant beaucoup plus dérangeante et ennuyeuse qu'elle ne l'était sur votre ordinateur. Finalement, vous passez à autre chose, ajoutez l'URL à vos favoris et poursuivez votre routine quotidienne.
Après une journée amusante et boueuse (enfin, j'ai récemment vécu à Seattle et au Royaume-Uni, donc les citrouilles sont boueuses), vous êtes de retour votre ordinateur: vous pensez peut-être encore une fois à cette vidéo et vous vous demandez pourquoi elle ne joue pas bien sur votre téléphone. Eh bien, diagnostiquons ce qui se passe.
Vous pouvez commencer par ouvrir DevTools dans votre navigateur. Une fois la page chargée, nous pouvons passer à l'onglet Réseau, et filtrer par «média» pour voir tous les fichiers vidéo:
On voit qu'un fichier MP4 est en cours de téléchargement. Le fichier ne passe pas par le réseau en tant que fichier autonome; le service de diffusion en continu doit plutôt diviser le fichier en quelques segments vous pouvez donc voir plusieurs demandes 206 (contenu partiel) pour le même fichier.
En regardant le en-têtes de réponse pour ce fichier, nous pouvons repérer quelques détails:
accept-ranges: bytes
access-control-allow-headers: x-test-header, Origin, X-Requested-With, Content-Type, Accept
access-control-allow-methods: GET, POST, PUT, DELETE, OPTIONS
Content-Length: 87690242
Gamme de contenu: octets 70025216-157715457 / 157715458
type de contenu: vidéo / mp4
date: ven 22 janvier 2021 15:27:26 GMT
Dernière modification: lun.24 juin 2019 05:13:04 GMT
serveur: Apache
Maintenant, certains de ces nombres sont un peu effrayants car ils sont légèrement élevés. En fait, ils sont souvent si volumineux que j’ai pris l’habitude d’ajouter des virgules, afin de pouvoir avoir une idée de la taille réelle des fichiers. Dans ce cas, le téléchargement partiel est de 87 Mo et le fichier entier est de 157 715 457 octets. Oui, c'est vrai, cette vidéo fait 157 Mo, et elle (a essayé) de se charger sur mon téléphone plus tôt dans la journée! Pas étonnant que cela n'ait pas réussi.
Alors, que se passe-t-il avec cette vidéo?
Allons un peu plus loin. Apparemment, la vidéo est beaucoup trop volumineuse pour être lue de manière fluide sur un téléphone portable avec une mémoire inférieure et un réseau plus lent. Mais de quoi avons-nous besoin pour y remédier? Pour déterminer quel est exactement le problème, nous pouvons utiliser FFMPEG qui est open source et gratuit, et qui s'avère être l'un des outils les plus fiables pour optimiser les vidéos . Nous pourrions modifier la configuration à l’infini dans FFMPEG, mais abordons quelques éléments importants dans cet article.
Commençons donc par l’outil de diagnostic appelé FFprobe . FFprobe rassemble des informations à partir de flux multimédias et vous fournit des détails sur la manière dont la vidéo est encodée et comment elle sera lue. Elle fait partie du package FFMPEG et est en fait assez facile à utiliser.
Encore mieux: si votre vidéo est déjà en ligne, il existe une version en ligne de ffprobe à laquelle nous pouvons accéder immédiatement. Alors, saisissons simplement l'URL dans le formulaire et obtenons en retour les détails de la vidéo (par exemple, les dimensions de la vidéo, le débit binaire et pas mal de métadonnées).
Lorsque j'ajoute l'URL MP4 de la ferme de citrouilles, nous voir immédiatement l'un des problèmes. La réponse show_format de ffprobe renvoie un résumé: apparemment, il y a 2 flux, et il est long de 62 secondes (ce qui semble assez normal pour ne pas soulever de soupçons). Mais lorsque nous arrivons à la taille et au débit nous voyons immédiatement où la vidéo échoue.
Comme mentionné ci-dessus, cela pourrait être un bon idée pour s'habituer à ajouter des virgules à ces grands nombres. En fait, les images du drone survolant le terrain font 157 Mo et ont un débit de 20 Mo par seconde! Cela signifie que pour que la vidéo soit lue de manière transparente, le réseau doit être en mesure de diffuser la vidéo à une vitesse supérieure à 20 Mbps, ce qui explique exactement pourquoi il bloquait au téléphone.
débit binaire de lecture idéal?
Pour éviter le blocage, nous devons diffuser la vidéo à un débit approprié . C’est là que le débit devient important. Le débit binaire est la vitesse de lecture de la vidéo. Pour que le navigateur puisse lire la vidéo en douceur, la vidéo doit être téléchargée plus rapidement qu'elle ne se lit – ce qui signifie que la vidéo ne sera lue en douceur que si la vitesse du réseau est supérieure à 20 Mbps. Quand je pense aux vitesses du réseau, j'ai tendance à me fier aux profils de trafic de WebPageTest :
Comme nous pouvons le voir d'après l'aperçu ci-dessus, la vidéo pourrait bien jouer sur la «connexion native», et sur la connexion FIOS du câble optique ultra-rapide (20 Mbps est exactement la vitesse requise, donc j'espère que rien d'autre ne doit être téléchargé en arrière-plan). Cependant, toutes les autres connexions ont une vitesse de liaison descendante nettement inférieure à 20 Mbps . Si la vidéo se charge à ces vitesses, le lecteur essaiera de consommer la vidéo plus rapidement qu'elle ne peut être téléchargée, et la vidéo se bloquera définitivement.
Le débit binaire de votre vidéo définit la vitesse réseau minimale que vos clients peuvent utiliser. En général, le débit binaire de votre vidéo doit être d'environ 80% du débit disponible sur le réseau. Ainsi, une vidéo de 20 MBPS a vraiment besoin d'un débit réseau de 24 MBPS pour lire la vidéo de manière transparente. Tout le monde sur une connexion plus lente aura une expérience assez médiocre et ne pourra probablement pas du tout regarder la vidéo. Plus précisément, cela signifie que pour que nous puissions jouer en douceur et en douceur sur la 4G, le débit doit rester inférieur à 7,2 MBPS .
Pouvons-nous réduire le débit binaire de cette vidéo?
Oui! Examinons quelques-unes des configurations que nous pouvons utiliser pour réduire le débit binaire de cette vidéo. Mais tout d'abord, examinons les données que nous obtenons de FFprobe. Une chose qui est assez remarquable est la valeur r_frame_rate qui est le nombre d'images par seconde dans la vidéo. Sa valeur est 60000/1001. Cela signifie que la fréquence d'images de la vidéo est de 60 images par seconde. Cependant, les fréquences d'images typiques sur le Web sont de 25 à 30, donc la première chose que nous pouvons faire est de recoder la vidéo avec un débit binaire inférieur .
Une autre chose à garder à l'esprit est ] Facteur de taux constant . Dans FFMPEG, le principal critère de qualité / taille est la compression à facteur de débit constant (CRF), avec des valeurs allant de 0 (sans compression) à 50 (compression élevée). La valeur par défaut de CRF dans FFMPEG est 23 (si vous omettez le paramètre CRF, votre vidéo a cette valeur). D'après mon expérience personnelle, les valeurs de 23 à 28 produisent toujours des vidéos de haute qualité qui ont une belle apparence sur le Web et une taille de fichier considérablement réduite.
Commençons donc à 30 ips et un CRF de 23 . La commande Terminal ressemblera à ceci:
ffmpeg -i input.mp4 -vcodec h264 -acodec aac -crf 23 -strict -2: v fps = fps = 30 output.mp4
Voilà! Cela donne une vidéo de 81,5 Mo – déjà une amélioration de 48%. Mais la vidéo est toujours très volumineuse, avec un débit binaire de 10 MBPS. Si nous définissons CRF sur 28, le fichier tombe à 35,4 Mo, avec un débit de 4,5 MBPS, ce qui est beaucoup plus susceptible de bien fonctionner sur une connexion 4G.
Il s'agit d'une amélioration de cinq fois par rapport à la vidéo originale . Pour rendre cette vidéo encore plus accessible, nous pouvons redimensionner la vidéo pour la réduire. C'est quelque chose dont nous parlerons dans la section streaming ci-dessous.
L'histoire de Hungry For Pizza
Imaginez que vous êtes à Los Angeles, peut-être en visite de l'étranger et en itinérance sur votre téléphone, et bien sûr que vous pensez à prendre une part de pizza. Vous trouvez une pizzeria remarquable sur votre téléphone et décidez de vous y rendre. Vous avez peut-être remarqué quelques vidéos et images de héros sur la page, mais en réalité, chaque pizzeria se ressemble, vous n'avez donc pas pris la peine de regarder la vidéo. Vous vous dirigez et attrapez une tranche ou deux avant de retourner à votre hôtel.
Cette nuit-là, vous recevez un SMS de votre opérateur indiquant que vous avez utilisé beaucoup plus de données que vous ne l'aviez imaginé (et certainement bien plus que ce que vous aviez prévu à l'origine!). Quelques taxis et le site Web de la pizza – quel était le prix du site Web de la pizza à nouveau?
Vous ouvrez le site Web de la pizza dans WebPageTest et vérifiez-le sur une connexion mobile:
44 Mo de vidéo . D'où vient-il? Même au-delà de cela, quand on examine la source et la cascade un peu plus en détail, on voit qu'il y a en fait deux vidéos! Heureusement (ou malheureusement?), Aucun n'a réussi à être entièrement téléchargé:
| Vidéo 1 téléchargée | 11,8 Mo (sur 121 Mo au total) | ||||||||||||||||||||||||
| Vidéo 2 téléchargée | 31,1 Mo (sur 139 Mo au total) [19659051] Cela soulève quelques inquiétudes et quelques questions.
Premièrement, pourquoi tant de vidéos ont-elles été téléchargées alors qu'elles n'étaient pas en lecture automatique? Nous n'avons pas encore réussi à cliquer sur quoi que ce soit, mais avons déjà utilisé près de 40 Mo de données. La réponse, comme toujours, réside dans la source. Eh bien, "afficher la source", c'est-à-dire.
Dès le départ, nous voyons au moins deux numéros :
Une astuce que j'aime utiliser est de insérez la ligne source vidéo appropriée avec Javascript. De cette façon, si vous choisissez de ne pas diffuser de vidéo sur certains écrans, vous avez juste une balise
Si nous exécutons maintenant une ffprobe sur ces deux vidéos, nous découvrirons des différences de taille significatives: Le webm est 90% plus petit, et pourtant a 0 vue puisque chaque navigateur prend en charge le mp4. Ces deux vidéos mesurent à la fois 640 × 360 et 140. L'exécution de la commande La deuxième vidéo (images de drone à l'intérieur du restaurant) est filmée en Full HD (1080p), mais est compressée de la même manière de 140 Mo à 35 Mo. Ainsi, 120s avec FFMPEG pourraient réduire le poids de la vidéo sur cette page de 160 Mo à 57 Mo. Inverser l'ordre webm / mp4 permettrait d'économiser quelques Mo supplémentaires pour 95% des navigateurs prenant en charge ce format. Et si nous voulions faire encore mieux, peut-être rendre les vidéos réactives à des écrans de différentes tailles? Eh bien, obtenons des vidéos encore plus petites – avec des vidéos réactives! La balise Nous pouvons créer des flux vidéo avec FFMPEG (j'ai utilisé des scripts bash comme ceci dans le passé), mais cela nous oblige à connaître toutes les tailles et tous les paramètres que nous aimerions utiliser (et comme mentionné précédemment, FFMPEG a beaucoup de paramètres!). Pour faciliter le streaming video, il existe des API (par exemple api.video et Mux ) où vous téléchargez votre vidéo, et les outils créent des flux vidéo et hébergent votre vidéo pour vous. Pour une divulgation complète, je travaille sur l'ancien, donc pour simplifier mon pipeline de traitement vidéo, j'utiliserai api.video pour transcoder et héberger mes vidéos. Avec l'API de téléchargement je peux télécharger n'importe quelle vidéo, et l'outil créera une version en streaming avec de nombreuses dimensions et débits binaires différents (actuellement 240p, 360p, 480p, 720p, 1080p et 4K). Le les débits binaires pour les vidéos plus petites sont considérablement réduits, car les dimensions de la vidéo diminuent. Cela signifie que la vidéo nécessitera moins de capacité réseau sur des écrans plus petits et sera lue sur des réseaux plus lents. Par souci de concision, nous testerons uniquement la vidéo du patch Pumpkin. J'ai reçu des résultats similaires avec la vidéo du drone (l'autre vidéo de pizza ne fait que 360p, donc elle ne profite pas beaucoup des plus petites tailles). Note : Veuillez vous rappeler que cette vidéo est actuellement en 1080p vidéo mp4 à 60 ips et pèse 157 Mo pour tous les visiteurs. Avec quelques optimisations (CRF 28 et réduction de la fréquence d'images à 30 ips), la vidéo a été réduite à 35,7 Mo . En utilisant DevTools, nous pouvons émuler des périphériques pour voir combien de données sont utilisées pour la lecture vidéo de la vidéo en streaming sur des écrans de différentes tailles. Le tableau ci-dessous montre la quantité totale de trafic utilisé. Avec la vidéo HLS, il y a un lecteur JavaScript, CSS, polices, etc. qui ajoutent environ 1 Mo de frais généraux supplémentaires. Ceci est inclus dans les totaux ci-dessous:
À 1080p, il représente environ 4 Mo d'actifs supplémentaires téléchargés pour le flux, mais pour toute autre taille, il y a des économies de données importantes sans perte de qualité vidéo. Non seulement la vidéo sera dimensionnée correctement pour les périphériques mais elle est beaucoup moins susceptible de se bloquer, car le débit binaire est réduit pour les périphériques les plus susceptibles d'être sur des connexions mobiles plus lentes. Un autre avantage du streaming vidéo: si le réseau est lent (ou devient soudainement plus lent), le lecteur peut ajuster la vidéo en cours de diffusion et lisez une version de qualité inférieure de la vidéo – garantissant la lecture sur l'appareil – même dans de mauvaises conditions de réseau. (Vous pouvez tester les différentes vidéos avec StreamOrNot un petit projet open source que j'ai publié il y a quelque temps. Maintenant, n'est-ce pas un peu trop de frais généraux? faire de même (juste beaucoup plus rapidement) avec YouTube ou Vimeo? Nous pourrions sûrement le faire, mais nous ne pourrions pas supprimer complètement la marque ou la publicité de la vidéo, sans parler de la surcharge des scripts chargés dans l'iframe du lecteur vidéo. De plus, vous voudrez peut-être parfois utiliser la vidéo comme vidéo d'arrière-plan sur votre page produit, et éviter tout type de marque externe. ConclusionNous ne déployons pas d'images de notre caméra directement sur le Web, mais nous les compressons et les redimensionnons pour équilibrer la qualité et les performances Web. La même chose devrait être faite pour les fichiers vidéo. Les vidéos plus petites commencent à être lues plus rapidement et se bloquent moins souvent, améliorant ainsi l'expérience utilisateur du site Web. Dans cet article, nous avons parcouru quelques étapes simples pour optimiser votre r vidéos, par exemple en abaissant la qualité et sa fréquence d'images. Nous avons également examiné comment le streaming vidéo peut nous permettre de créer une expérience vidéo plus réactive pour le Web, en diffusant automatiquement des vidéos correctement dimensionnées pour l'écran de l'appareil. Merci d'avoir lu, et si vous souhaitez en savoir plus plus, vous pouvez en savoir plus sur les meilleures pratiques vidéo ici, sur Smashing Magazine et sur mon blog: 
Source link |
