Fermer

octobre 25, 2018

Meilleures pratiques de diffusion vidéo (2e partie)


À propos de l'auteur

Doug est un expert indépendant de la performance mobile, qui a aidé des milliers de développeurs à accélérer leurs applications mobiles et leurs sites Web. Un expert en développement Google et…
Pour en savoir plus sur Doug

Dans cette série d'articles sur la performance vidéo sur le Web, Doug Sillars examine de plus près la manière dont la vidéo est utilisée aujourd'hui, ce que nous pouvons en apprendre, et comment avancer de manière à promouvoir la livraison rapide et la lecture de contenu vidéo sur le Web.

Dans mon billet précédent j'ai examiné les tendances de la vidéo sur le Web aujourd'hui, à l'aide de données de l'archive HTTP. J'ai constaté que de nombreux sites Web diffusent le même contenu vidéo sur les ordinateurs de bureau mobiles et et que de nombreux flux vidéo sont diffusés à des débits trop élevés pour pouvoir être lus sur des connexions à haut débit 3G. Nous avons également découvert que certains sites Web pouvaient télécharger automatiquement des vidéos sur des appareils mobiles – endommageant les plans de données du client, la durée de vie de la batterie, pour des vidéos qui pourraient ne jamais être lues.

TL; DR : Dans cet article, nous examinons techniques permettant d'optimiser la vitesse et la diffusion de la vidéo à vos clients et de vous fournir une liste de 9 meilleures pratiques pour vous aider à livrer vos ressources vidéo.

Paramètres de lecture vidéo

Il existe 3 principales méthodes de lecture vidéo. paramètres utilisés aujourd'hui:

  1. Heure de démarrage de la vidéo
  2. Décalage de la vidéo
  3. Qualité de la vidéo

Les fichiers vidéo étant volumineux, optimiser la vidéo de sorte qu'elle soit aussi petite que possible accélère la diffusion de la vidéo et accélère le démarrage de la vidéo. , en réduisant le nombre de stands et en minimisant l’effet de la qualité de la vidéo diffusée. Bien sûr, nous devons trouver un équilibre entre la vitesse de démarrage et le blocage avec la troisième mesure de qualité (et les vidéos de qualité supérieure utilisent généralement plus de données).

Démarrage vidéo

Lorsqu'un utilisateur appuie sur la lecture d'une vidéo, il s'attend à pouvoir pour regarder la vidéo rapidement. Selon Conviva (un chef de file de l'analyse métrique de vidéos), au premier trimestre de 2018, 14% des vidéos n'avaient jamais été lues (soit 2,4 milliards de lectures de vidéos) après que l'utilisateur eut appuyé sur la lecture.


 Graphique circulaire montrant que près de 15% de toutes les vidéos ne parviennent pas à être lues
Ventilation du démarrage de la vidéo ( Grand aperçu )

La lecture de 2,3% de vidéos (400 millions de demandes de vidéos) a échoué lorsque l'utilisateur a appuyé sur le bouton de lecture. 11,54% (2B jeux) ont été abandonnés par l'utilisateur après avoir appuyé sur play. Essayons de casser ce qui pourrait être à l'origine de ces problèmes.

Échec de la lecture vidéo

L'échec de la lecture vidéo a été pris en compte 2,3% de toutes les vidéos sont lues. Qu'est-ce qui pourrait mener à ça? Dans les données de l'archive HTTP, 0,3% de toutes les demandes vidéo résultent en une réponse HTTP 4xx ou 5xx. Ainsi, un certain pourcentage échoue avec des URL incorrectes ou une mauvaise configuration du serveur. Un autre problème potentiel (qui n'est pas observé dans les données d'archive HTTP) concerne les vidéos bloquées par géolocalisation (bloquées en fonction de l'emplacement de la visionneuse et de la licence du fournisseur permettant d'afficher la vidéo dans ces paramètres régionaux).

Abandonment

Le rapport Conviva indique que 11,5% de toutes les lectures vidéo seraient lues mais que le client avait abandonné la lecture avant le début de la lecture. Le problème ici est que la vidéo n'est pas livrée au client assez rapidement et ils abandonnent. Il existe de nombreuses études sur le Web mobile où de longs retards entraînent l'abandon de pages Web, et il semble que le même effet se produise avec la lecture vidéo.

Une recherche de Akamai montre que les téléspectateurs vont attendre 2. secondes, mais pour chaque seconde suivante, 5,8% des téléspectateurs abandonnent la vidéo.


 Graphique affichant le taux d'abandon car la durée de démarrage est plus longue.
Taux d'abandon en fonction du temps (. Grand aperçu .

Alors qu'est-ce qui mène aux problèmes de lecture vidéo? En général, le téléchargement de fichiers volumineux prend plus de temps, ce qui retarde la lecture. Examinons quelques manières d’accélérer la lecture de vidéos. Pour réduire le nombre de vidéos abandonnées au démarrage, il est conseillé d’optimiser ces fichiers afin de les télécharger (et de commencer la lecture) rapidement.

MP4: Video Preload

Pour garantir une lecture rapide sur le Web. Une option consiste à précharger la vidéo sur le périphérique à l’avance. Ainsi, lorsque votre client clique sur "Lecture", la vidéo est déjà téléchargée et la lecture est rapide. HTML offre un attribut de précharge avec 3 options possibles: auto métadonnées et aucune .

précharge = auto

Lorsque votre vidéo est livrée avec preload = "auto" le navigateur télécharge l'intégralité du fichier vidéo et le stocke localement. Cela permet une amélioration importante des performances pour le démarrage vidéo, car la vidéo est disponible localement sur le périphérique et aucune interférence réseau ne ralentira le démarrage.

Toutefois, preload = "auto" ne doit être utilisé que si il y a une forte probabilité que la vidéo soit visionnée. Si la vidéo réside simplement sur votre page Web et est téléchargée à chaque fois, cela entraînera une pénalité importante en termes de données pour vos utilisateurs mobiles, ainsi qu'une augmentation des coûts serveur / CDN pour la diffusion de la vidéo complète à tous vos utilisateurs. 19659022] Ce site possède une section intitulée «Galerie de vidéos» contenant plusieurs vidéos. Le préchargement de chaque vidéo de cette section est défini sur auto et nous pouvons visualiser leur téléchargement dans la cascade WebPageTest sous forme de lignes horizontales vertes:


 Carte de cascade WebPageTEst
Cascade de précharge vidéo ( Grand aperçu )

Il existe une section intitulée «Galerie vidéo» et les fichiers de cette petite section du site Web représentent 14,6 millions (83%) de la page téléchargée. La probabilité de lecture d'une (ou de plusieurs) vidéos est probablement faible, et l'utilisation de preload = "auto" génère uniquement un trafic important de données pour le site.


 Le graphique à secteurs montrant le maximum pourcentage (83%) d'utilisation de la vidéo.
Répartition des données de page Web ( Grand aperçu )

Dans ce cas, il est peu probable qu'une seule de ces vidéos soit visionnée, mais elles sont toutes téléchargées intégralement, ajoutant 14,8 Mo de contenu au site mobile (83% du contenu de la page). Pour les vidéos dont la probabilité de lecture est élevée (peut-être plus de 90% des pages visualisées donnent lieu à la lecture de la vidéo) – le préchargement de la vidéo complète est une très bonne idée. Mais pour les vidéos peu susceptibles d'être lues, preload = "auto" ne provoquera qu'un tonnage supplémentaire de contenu via vos serveurs et les appareils mobiles (et de bureau) de vos clients.

preload = "métadonnées"

Lorsque l'attribut preload = "metadata" est utilisé, un premier segment de la vidéo est téléchargé. Cela permet au lecteur de connaître la taille de la fenêtre vidéo et éventuellement de télécharger une ou deux secondes de vidéo pour une lecture immédiate. Le navigateur effectue simplement une requête 206 (demande partielle) du contenu vidéo. En stockant une petite quantité de données vidéo sur le périphérique, le temps de démarrage de la vidéo est réduit, sans incidence importante sur la quantité de données transférées.

Sous Chrome, les métadonnées constituent le choix par défaut si aucun attribut n'est choisi.

Remarque : Cela peut toujours entraîner le téléchargement d'une grande quantité de vidéos, si la vidéo est volumineuse.

Par exemple, sur un site Web mobile avec un paramètre de précharge vidéo = "métadonnées" nous ne voyons qu'une demande de vidéo:


 page test Carte graphique en cascade
( Grand aperçu )

Et la demande est un téléchargement partiel, mais il en résulte toujours 2,7 Mo de vidéo à télécharger car la vidéo complète mesure 1080p, a une longueur de 150 s et 97 Mo (nous parlerons de l'optimisation de la taille de la vidéo dans les sections suivantes).


 Diagramme à secteurs montrant que 2,7 Mo ou 42% des données sont encore vides avec métadonnées préchargées.
Utilisation de ko avec métadonnées vidéo ( Grand aperçu )

Je recommanderais donc que preload = "metadata" ne soit utilisé que lorsqu'il existe une probabilité assez élevée que vos utilisateurs visionnent la vidéo ou si la vidéo est petite.

] preload = "none"

L'option de téléchargement la plus économique pour les vidéos, car aucun fichier vidéo n'est téléchargé lors du chargement de la page. Cela risquerait d’ajouter un retard dans la lecture, mais entraînerait un chargement de page initial plus rapide. Pour les sites contenant de nombreuses vidéos sur une seule page, il peut être judicieux d’ajouter un poster à la fenêtre vidéo et de ne télécharger aucune des vidéos tant qu’elle ne sera pas affichée. expressément demandé par l'utilisateur final. Toutes les vidéos YouTube intégrées aux sites Web ne téléchargent jamais de contenu vidéo tant que le bouton de lecture n'a pas été actionné. Elles se comportent essentiellement comme si preload = "none" .

Preload Best Practice : uniquement. utilisez preload = "auto" s'il existe une forte probabilité que la vidéo soit visionnée. En général, l'utilisation de preload = "metadata" offre un bon équilibre entre l'utilisation des données et le temps de démarrage, mais doit être surveillée afin de prévenir une utilisation excessive des données.

Conseils de lecture vidéo MP4

la vidéo a commencé, comment pouvons-nous nous assurer que la lecture de la vidéo peut être optimisée pour ne pas rester bloquée et continuer à jouer? Là encore, il faut s’assurer que la vidéo est aussi petite que possible.

Voyons quelques astuces pour optimiser la taille des téléchargements de vidéos. Il existe plusieurs dimensions de la vidéo qui peuvent être optimisées pour réduire la taille de la vidéo:

Audio

Les fichiers vidéo sont divisés en différents «flux», le plus courant étant le flux vidéo. Le deuxième flux le plus courant est la piste audio qui se synchronise avec la vidéo. Dans certaines applications de lecture vidéo, le flux audio est fourni séparément. Cela permet de diffuser de manière transparente différentes langues.

Si votre vidéo est lue de manière silencieuse (comme un GIF en boucle ou une vidéo d'arrière-plan), il est rapide et facile de supprimer le flux audio de la vidéo. moyen de réduire la taille du fichier. Dans un exemple de vidéo d'arrière-plan, le fichier complet faisait 5,3 Mo, mais la piste audio (qui n'a jamais été entendue) faisait près de 300 Ko (5% du fichier). En éliminant simplement l'audio, le fichier sera livré rapidement sans gaspillage.

42% des fichiers MP4 présents dans les archives HTTP n'ont pas de flux audio

Meilleure pratique : Supprimez les pistes audio des vidéos lues en mode silencieux.

Encodage vidéo

19659007] Lors du codage d'une vidéo, il existe des options pour réduire la qualité de la vidéo (nombre de pixels par image ou images par seconde). Réduire une vidéo de haute qualité pour qu'elle soit adaptée au Web est facile à faire et n'affecte généralement pas la qualité fournie aux utilisateurs finaux. Cet article n'est pas assez long pour une discussion en profondeur de toutes les techniques de compression disponibles pour la vidéo. Dans x264 et x265 encodeurs, il existe un terme appelé acteur C onstant R mangé F (CRF). ). Utiliser un CRF de 23-28 donnera généralement un bon compromis compression / qualité et constituera un bon premier pas dans le domaine de la compression vidéo

Taille de la vidéo

La ​​taille de la vidéo peut être affectée par de nombreuses dimensions: longueur, largeur , et height (vous pouvez probablement aussi inclure l'audio ici.)

Durée de la vidéo

La ​​longueur de la vidéo n'est généralement pas une fonctionnalité qu'un développeur Web peut ajuster. Si la vidéo doit être lue pendant trois minutes, elle sera lue pendant trois minutes. Dans les cas où la vidéo est exceptionnellement longue, des outils tels que preload = "none" ou la lecture en continu de la vidéo peuvent permettre de télécharger initialement une quantité de données plus réduite afin de réduire le temps de chargement de la page.

18% de toutes les vidéos trouvées dans l'archive HTTP sont identiques sur mobile et sur ordinateur. Ceux qui ont travaillé avec responsive web design savent que l'optimisation d'images pour différentes fenêtres peut réduire considérablement les temps de chargement, car la taille des images est beaucoup plus petite pour les écrans plus petits.

Il en va de même pour la vidéo. Un site Web avec une vidéo d'arrière-plan de 30 Mo en 2560 × 1226 aura du mal à télécharger la vidéo sur mobile (probablement aussi sur le bureau!). Le redimensionnement de la vidéo réduit considérablement la taille des fichiers et peut même permettre la création de trois ou quatre vidéos d'arrière-plan différentes:

Largeur Vidéo (MB)
1226 30
de 1080.. 8.1
720 43
608 3.3
405 1.76

Malheureusement, les navigateurs ne prennent pas en charge les requêtes multimédia en HTML, ce qui signifie que cela ne fonctionne pas. :

 <video preload = "auto" contrôles de mise en sourdine de la lecture automatique
    tailles de source = "(max-width: 1400px 100vw, 1400px"
    srcset = "small.mp4 200w,
            medium.mp4 800w,
            large.mp4 1400w "
    src = "http://www.smashingmagazine.com/large.mp4"


Par conséquent, nous devrons créer un petit wrapper JS pour diffuser les vidéos souhaitées sous différentes tailles d’écran. Mais avant d’y aller…

Téléchargement de la vidéo, mais le cacher de la vue

Un autre retour en arrière sur le Web réactif est de télécharger des images en taille réelle, mais de les masquer sur des appareils mobiles. Vos clients ont tout le temps nécessaire pour télécharger les images volumineuses (et accéder au forfait de données mobile, à un épuisement supplémentaire de la batterie, etc.), sans aucun avantage à voir réellement l'image. Cela se produit assez souvent avec la vidéo sur mobile. Ainsi, au moment d'écrire notre script, nous pouvons nous assurer que les écrans plus petits ne demandent jamais la vidéo qui n'apparaîtra pas à la première place.

Retina Quality Videos

Vous pouvez avoir différentes vidéos pour différentes densités d'écran. Cela peut entraîner un gain de temps pour télécharger les vidéos sur vos clients mobiles. Vous voudrez peut-être empêcher les vidéos Retina sur des appareils à écran plus petit, ou sur des appareils avec une bande passante réseau limitée, de revenir à des vidéos de qualité standard pour ces appareils. Des outils tels que l'API Network Information peuvent vous fournir le débit du réseau et vous aider à choisir la qualité vidéo que vous souhaitez offrir à votre client.

Téléchargement de différents types de vidéo en fonction de la taille du périphérique et du réseau. Qualité

Nous venons de décrire quelques façons d'optimiser la diffusion de films sur des écrans plus petits. Nous avons également noté l'incapacité de la balise vidéo de choisir entre les types de vidéo. Voici donc un extrait de code JS rapide qui utilisera la largeur de l'écran. to:

  • Ne pas diffuser de vidéo sur les écrans inférieurs à 500px;
  • Diffuser de petites vidéos pour les écrans 500-1400;
  • Diffuser une vidéo de taille plus grande sur tous les autres appareils.

Ce script divise les écrans des utilisateurs en trois options:

  1. Aucune vidéo n'est affichée.
  2. Entre 500 et 1400, nous avons une vidéo plus petite.
  3. Pour les écrans de plus de 1400 pixels, nous ayez une vidéo plus grande.

Notre page contient une vidéo réactive avec deux tailles différentes: une pour les appareils mobiles et une autre pour les écrans de bureau. Les utilisateurs mobiles obtiennent une excellente qualité vidéo, mais le fichier ne représente que 2,6 Mo, par rapport à la vidéo de 10 Mo pour ordinateur de bureau.

GIF animés

Les fichiers GIF animés sont de gros fichiers. Alors que les fichiers aGIF et les fichiers vidéo compressent les données dans les dimensions en largeur et en hauteur, seuls les fichiers vidéo ont un axe temporel de compression (souvent plus grand). Les fichiers aGIF «défilent» rapidement les images GIF statiques. Ce manque de compression ajoute une quantité importante de données. Heureusement, il est possible de remplacer les aGIF par une vidéo en boucle, ce qui permettrait d'économiser des Mo de données pour chaque demande.

Safari propose une approche encore plus sophistiquée: vous pouvez placer un mp4 en boucle dans la balise picture, comme suit: [19659106] Dans ce cas, Safari jouera le GIF animé, tandis que Chrome (et les autres navigateurs prenant en charge WebP) lirait le WebP animé, avec un repli sur le GIF animé. Vous pouvez en savoir plus sur cette approche dans Le grand message de Colin Bendell .

Vidéos tierces

L’un des moyens les plus simples d’ajouter une vidéo à votre site Web consiste à simplement copier / coller le code à partir d’un fichier. service de partage vidéo et le mettre sur votre site. Toutefois, tout comme pour l’ajout de tiers à votre site, vous devez faire preuve de vigilance en ce qui concerne le type de contenu ajouté à votre page et son incidence sur le chargement de la page. La plupart de ces widgets «simplement coller ceci dans votre HTML» ajoutent des centaines de Ko de JavaScript. D'autres téléchargeront l'intégralité du film (pensez preload = "auto" ), et certains feront les deux.

Meilleures pratiques en matière de vidéo tierce : Faites confiance, mais vérifiez. Examinez la quantité de contenu ajouté et son incidence sur le temps de chargement de votre page. En outre, le comportement peut changer, alors suivez régulièrement vos analyses.

Démarrage du streaming

Lorsqu'un flux vidéo est demandé, le serveur fournit un fichier manifeste au lecteur, répertoriant tous les flux disponibles (avec les dimensions et le débit). . En diffusion HLS, le lecteur choisit généralement le premier flux de la liste pour commencer la lecture. Par conséquent, le flux placé en premier dans le fichier manifeste doit être optimisé pour le démarrage vidéo à la fois sur le mobile et sur le bureau (ou peut-être que d'autres fichiers manifestes doivent être livrés au mobile par rapport au bureau).

un flux de qualité inférieure pour commencer la lecture. Une fois que le lecteur a téléchargé quelques segments, il a une meilleure idée du débit disponible et peut sélectionner un flux de qualité supérieure pour les segments suivants. En tant qu'utilisateur, vous avez probablement déjà vu ceci: les premières secondes d'une vidéo semblent très pixelisées, mais la lecture s'accentue après quelques secondes.

Lors de l'examen de 1 065 fichiers de manifeste envoyés aux périphériques mobiles à partir de l'archive HTTP, nous: constatent que 59% des vidéos ont un débit initial inférieur à 1,2 MBPS – et sont susceptibles de démarrer la diffusion en continu très rapidement à des débits de données de 1,6 MBPS. 11% utilisent un débit compris entre 1,2 et 1,6 MBPS – ce qui peut ralentir le démarrage en 3G, et 30% ont un débit supérieur à 1,6 MBPS – et sont incapables de lire à ce débit une connexion 3G. D'après ces données, il apparaît qu'environ 41% de toutes les vidéos ne pourront pas conserver le débit initial sur le mobile, ce qui s'ajoutera au délai de démarrage et, éventuellement, au nombre accru de stalls pendant la lecture.


 Graphique à colonnes illustrant les débits initiaux en streaming. vidéos. De nombreuses vidéos ont un débit initial trop élevé pour la diffusion sur mobile.
Débit initial pour les flux vidéo ( Grand aperçu )

Meilleure pratique de diffusion en continu : Assurez-vous que le débit binaire initial dans le fichier manifeste est celui qui fonctionnera pour la plupart de vos clients. Si le lecteur doit changer de flux au démarrage, la lecture sera retardée et vous perdrez les vues vidéo.

Que se passe-t-il lorsque le débit binaire de la vidéo est proche (ou supérieur) du débit disponible? Après quelques secondes de téléchargement sans segment vidéo terminé prêt pour la lecture, le lecteur arrête le téléchargement, choisit une vidéo à débit binaire de qualité inférieure et recommence le processus. Le fait de télécharger un segment vidéo puis de l'abandonner entraîne un délai de démarrage supplémentaire, ce qui entraînera un abandon de la vidéo.

Nous pouvons le visualiser en créant des manifestes vidéo avec différents débits binaires. Nous testons 3 scénarios différents: en commençant par le débit binaire le plus faible (215 KBPS), le débit moyen (600 KBPS) et le plus haut (2,6 MBPS).

Lorsque vous commencez par une vidéo de qualité inférieure, la lecture commence à 11 secondes. Après quelques secondes, le lecteur commence à demander un flux de qualité supérieure et l'image s'accentue.

Lorsqu'il commence avec le débit binaire le plus élevé (test sur une connexion 3G à 1,6 MBPS), le lecteur se rend rapidement compte que la lecture ne peut pas se produire et commute. à la vidéo au débit binaire le plus faible (215 KBPS). La vidéo commence à 17h. Il y a un délai de 6 secondes et la qualité vidéo est la même qualité basse livrée lors du premier test.

L'utilisation de la vidéo de qualité moyenne permet un compromis, la lecture de la vidéo commence à 13s (2 secondes).

Meilleure pratique pour le démarrage vidéo : Pour une lecture plus rapide, commencez avec le flux de qualité le plus faible. Pour les vidéos plus longues, vous pouvez envisager d'utiliser un flux de "qualité moyenne" au début pour fournir une vidéo nette au démarrage (avec un délai légèrement plus long).


 Vignettes de 3 pages avec chargement de la vidéo.
WebPage Test Thumbnails ( Grand aperçu )

Résultats de WebPageTest: le flux vidéo initial est faible, moyen et élevé (de haut en bas). La vidéo commence le plus rapidement avec la qualité vidéo la plus basse. Il est important de noter que le début de vidéo haute qualité à 17 secondes est identique à celui de basse qualité à 11.

Streaming: lecture continue

Lorsque le lecteur vidéo peut déterminer le flux vidéo optimal pour la lecture et le flux. est inférieure à la vitesse du réseau disponible, la vidéo sera lue sans problème. Certaines astuces peuvent vous aider à vous assurer que la vidéo sera diffusée de manière optimale. Si nous examinons l'entrée suivante du manifeste:

 # EXT-X-STREAM-INF: BANDWIDTH = 912912, ID-PROGRAMME = 1, CODECS = "avc1.42c01e, mp4a.40.2", RESOLUTION = 640x360, SUBTITLES = "subs "
vidéo / 600k.m3u8

La ligne d'information indique que ce flux a un débit binaire de 913 KBPS et une résolution de 640 × 360. Si nous regardons l'URL indiquée par cette ligne, nous voyons qu'elle fait référence à une vidéo de 600k. L'examen des fichiers vidéo montre que la vidéo mesure 600 KBPS et que le manifeste surestime le débit.

Surdimensionnement du débit vidéo

  • PRO
    Le fait de surdimensionner le débit garantit que lorsque le joueur choisit un flux, la vidéo téléchargez plus rapidement que prévu et la mémoire tampon se remplira plus rapidement que prévu, réduisant ainsi le risque de décrochage.
  • CON
    En surévaluant le débit, la vidéo diffusée sera un flux de qualité inférieure. Si nous examinons la liste complète des débits binaires rapportés et réels:
(KBS) Données réelles Résolution
913 600 640×360
142 64 [19659076] 320×180
297 180 512×288
506 320 512×288
689 450 412×288
1410 853×480
2090 1500 1280×720

Pour les utilisateurs utilisant une connexion à 1,6 MBPS, le lecteur choisira le débit binaire de 913 KBPS, fournissant au client une vidéo de 600 KBPS. Toutefois, si les débits avaient été signalés avec précision, le débit de 950 kbps serait utilisé et aurait vraisemblablement été diffusé en continu. Bien que les choix proposés empêchent les stalls, ils réduisent également la qualité de la vidéo livrée pour le consommateur.

Meilleure pratique : Une petite surestimation du débit binaire de la vidéo peut être utile pour réduire le nombre de stalls en lecture. Cependant, une valeur trop grande peut entraîner une lecture de qualité réduite.

Testez la vidéo Neilsen dans le navigateur et voyez si vous pouvez la faire basculer.

Conclusion

Dans Dans cet article, nous avons expliqué de différentes manières l’optimisation des vidéos que vous présentez sur vos sites Web. En suivant les meilleures pratiques illustrées dans ce message:

  1. preload = "auto"
    Ne l'utilisez que s'il existe une forte probabilité que vos clients regardent cette vidéo.
  2. preload = "métadonnées"
    Par défaut dans Chrome, mais peut toujours entraîner des téléchargements de fichiers vidéo volumineux. À utiliser avec prudence.
  3. Vidéos muettes (GIF en boucle ou vidéos d'arrière-plan)
    Supprimez le canal audio
  4. Dimensions de la vidéo
    Envisagez de diffuser une vidéo de taille différente sur un téléphone mobile. . Les vidéos seront plus petites, téléchargées plus rapidement et vos utilisateurs ne verront probablement pas la différence (la charge de votre serveur diminuera également!)
  5. Compression vidéo
    N'oubliez pas de compresser les vidéos pour vous assurer qu'elles elles sont livrées
  6. Ne masquez pas les vidéos
    Si la vidéo ne s'affiche pas, ne la téléchargez pas.
  7. Contrôlez régulièrement les vidéos de vos tiers [19659009] Streaming
    Commencez par un flux de qualité inférieure pour garantir un démarrage rapide. (Pour les vidéos plus longues, considérez un débit moyen pour une meilleure qualité au démarrage)
  8. Streaming
    Il est correct d'être prudent sur le débit pour éviter le blocage, mais aller trop loin, et les flux offriront une qualité inférieure vidéo.

Vous constaterez que la vidéo sur votre page a été rationalisée pour une diffusion optimale et que vos clients apprécieront non seulement la vidéo que vous présentez, mais profitent également d'un temps de chargement de page plus rapide.

 Smashing Editorial (dm, ra, il)




Source link