Réponse en bref
Une vidéo de fond de héros est toujours silencieuse, toujours lourde, et ne vous dit jamais si quelqu'un voulait. C'est là que le mouvement gagne vraiment sa place, où une affiche et un bouton de lecture suffisent, et pourquoi la note appartient à…
La réponse courte : la vidéo vend le mouvement, pas l'information
Un premier écran a une tâche — dire au visiteur ce que vous faites et ce qu'il faut appuyer ensuite. La vidéo est bonne pour montrer le mouvement, la texture, l'échelle et les gens. Il est mauvais à tenir un prix, une spécification ou une adresse, parce qu'un lecteur scanne ceux et personne ne scanne un clip.
Donc la question utile n'est pas vidéo ou pas vidéo. C'est cela : la chose doit-elle bouger pour être comprise ? Des rideaux de tissu, une machine à découper, une pièce s'avère plus grande que la photographie suggérée, une personne est cru parce que vous pouvez les entendre. La motion porte ça.
Lorsque la réponse est non, une image immobile avec une légende fait le même travail pour une fraction des octets, apparaît sur la première peinture, et peut être lue sur un train avec deux barres de signal. Ce n'est pas un compromis ou une option moins chère; c'est le bon format.
Le reste de cet article traite des deux décisions qui en découlent : si le clip commence seul, et ce que cela coûte sur un téléphone, dans le navigateur, et dans votre propre budget de production.
Autoplaying background loop versus un poster et un bouton de lecture
Une boucle de fond commence sans demander. Il dépense les données d'un visiteur, la batterie et l'attention avant qu'ils aient décidé que votre page mérite l'un des trois. Une affiche avec un bouton de lecture coûte une image et une pression délibérée.
La route de l'affiche présente un avantage secondaire : elle mesure l'intérêt. Si presque personne n'appuie sur le bouton, la vidéo était décorée et vous l'avez trouvé à bas prix. Autoplay ne peut jamais vous donner ce signal, parce que dans les nombres chaque visiteur regardé.
Il y a encore un cas étroit pour la boucle: un lit court et silencieux derrière un titre où le contenu est véritablement l'atmosphère — une salle de restaurant, un tissu en mouvement, un plancher d'atelier. Elle doit être muette, brève et ne doit porter aucune information.
Tout ce qui a des sous-titres, un visage parlant, un numéro à l'écran ou une séquence qui compte est derrière un bouton. Le visiteur doit commencer, arrêter et revenir, et une boucle de fond n'offre aucun de ces trois.
Ce que le jeu automatique demande réellement du navigateur
Les navigateurs ne laissent pas une page allumer le son de leur propre gré. Autoplay est accordé à la vidéo muette, et l'élément a besoin de muted, autoplay, boucle et playsinline; sans playsinline un téléphone peut prendre le clip plein écran au lieu de le jouer en place.
Cela vaut la peine de lire deux fois : un clip qui commence par lui-même est toujours un clip silencieux. Si le message vit dans la voix off, autoplay a déjà coupé, et vous payez le poids de toute la page pour ne rien livrer.
La lecture silencieuse déplace l'ensemble de la charge sur les légendes et le type à l'écran, qui doivent ensuite rester lisibles sur un fond en mouvement. Nous gérons cela séparément, car il est résolu dans la mise en page plutôt que dans l'édition.
Et l'autoplay est une demande, pas une garantie. Une batterie basse, un économiseur de données, une préférence système pour moins de mouvement ou une politique de navigateur peut la refuser. La page doit regarder finie dans le cas où la vidéo ne commence jamais du tout.
Poids de la page, mesuré plutôt que discuté
Ne réglez pas cela de la mémoire ou de l'instinct d'un designer. Ouvrez le panneau réseau, allumez le grottling et un profil mobile, chargez la page et retirez deux numéros : la taille transférée du clip et la taille transférée de l'affiche.
Un fichier vidéo et une image unique sont différents ordres de choses, et l'écart apparaît immédiatement. Le point de mesure est qu'après vous disputez le commerce avec un nombre dans votre main plutôt que avec le goût de quelqu'un.
Deux valeurs de l'attribut précharge éliminent la plupart des dommages. Le paramétrer à aucun empêche le navigateur de récupérer le clip jusqu'à ce qu'il soit demandé; le régler aux métadonnées tire seulement assez pour connaître la durée. Un héros qui joue automatiquement ne peut utiliser ni l'un ni l'autre, et c'est exactement son prix.
Vérifiez la connexion lente séparément : la mise en page tient-elle, l'affiche apparaît-t-elle ou le visiteur obtient-il un rectangle gris où le premier écran devrait être ? Testez cet état exprès, car les visiteurs le trouvent sans aucun effort.
Conteneur et codec: une extension de fichier n'est pas une spécification
Le guide MDN des formats de conteneurs multimédias établit une distinction qui enregistre beaucoup de correspondance avec un fournisseur: le conteneur est l'emballage (MP4, WebM, Ogg, QuickTime), et le codec est comment l'image et le son à l'intérieur sont compressés (H.264, VP9, AV1, AAC, Opus).
Deux fichiers peuvent se terminer dans .mp4 et se comporter différemment, car le même conteneur peut transporter un codec un navigateur donné ne décode pas. Envoyez-moi un MP4 est donc un mémoire incomplet, et le codec appartient à la demande à côté.
Dans la pratique, cela signifie un accord sur H.264 en MP4 pour une large compatibilité et, là où il gagne l'encode supplémentaire, offrant une deuxième version plus efficace. L'élément vidéo accepte plusieurs sources et le navigateur prend la première qu'il peut jouer.
Mettez la chaîne de codec dans l'attribut type et le navigateur peut régler un fichier sans le télécharger. C'est un petit détail qui compte exactement dans une situation : sur le visiteur avec la pire connexion, qui est le visiteur que vous pouvez le moins vous permettre de perdre.
Le cadre de l'affiche fait plus de travail que la vidéo
L'affiche est une image ordinaire, donc le navigateur la peint avant qu'un seul octet de vidéo soit arrivé. Sur un téléphone lent l'affiche est ce que le visiteur voit réellement, et assez souvent l'affiche est toute l'expérience qu'ils obtiennent.
Choisissez ce cadre délibérément. Elle doit être lue en un coup d'oeil : un sujet clair, une place pour le contrôle du jeu et pour le gros titre, plutôt qu'un cadre moyen aléatoire avec quelqu'un pris mi-blink et une main à travers l'objectif.
Traitez l'affiche comme toute autre image de héros — les dimensions correctes, compressées, et le même rapport d'aspect que le clip, de sorte que la mise en page ne saute pas au moment où la lecture commence et appuyez sur le bouton de sous un doigt.
Et écrivez la copie qui l'entoure pour qu'elle se tienne toute seule. Un titre et une phrase à côté de l'affiche répondent à la question du visiteur sans lecture du tout, et la vidéo devient une preuve pour les gens qui veulent des preuves.
Pourquoi un filtre sur une vidéo de lecture coûte une couleur passe chaque cadre
Les designers veulent teinter le héros : le désaturer, le réchauffer, le flouer, laisser tomber un sombre lavage au-dessus du haut pour lire le titre. Appliquée en CSS sur lecture en direct, qui cesse d'être un effet unique et devient un coût d'exécution.
Une image fixe peut être filtrée une fois et le résultat réutilisé alors que rien ne change. Une vidéo permet au compositeur de prendre de nouveaux pixels plusieurs fois par seconde, de sorte que le filtre est recalculé pour chacune de ces images, sur l'appareil du visiteur, aussi longtemps que le clip fonctionne.
Blur coûte plus qu'une teinte, parce que le travail augmente avec le rayon, et un filtre empilé sur une vidéo à grande échelle saignée retire également les images du chemin le plus court que le navigateur a pour obtenir des images décodées sur l'écran.
Le remède est ennuyeux et libre : faire le tour de l'exportation. Votre éditeur applique la note une fois, au fichier, et chaque visiteur télécharge un résultat fini. Si vous avez besoin d'un lavage sombre pour la lisibilité, une couche semi-transparente plane coûte incomparablement moins qu'un filtre.
Le texte sur les images mobiles est un problème de contraste
Le contraste est mesuré entre le texte et tout ce qui se trouve derrière. Derrière une vidéo que quelque chose change continuellement, donc un titre qui passe sur le cadre de l'affiche tombe trois secondes plus tard quand un mur lumineux entre dans la prise de vue.
La référence rapide W3C pour WCAG 2.2 définit les exigences de contraste pour le texte, et la conclusion pratique pour un fond vidéo est unique: vous ne pouvez pas compter sur les images. Le type a besoin d'une couche constante qui ne dépend pas du cadre.
Cette couche peut être un brouillon solide ou dégradé, un bloc de couleur le titre vit à l'intérieur, ou simplement déplacer le texte complètement de la vidéo de sorte que le clip devient un panneau à côté de lui. Tous les trois sont moins chers que de combattre le matériel.
Vérifiez-le honnêtement : arrêtez-vous à dix moments différents dans le clip et regardez le titre de chacun. S'il a disparu même une fois, alors pour une partie de vos visiteurs il a complètement disparu.
Donner aux gens un moyen de l'arrêter
WCAG 2.2 demande un mécanisme de pause, d'arrêt ou de cache du contenu mobile qui démarre automatiquement, fonctionne pendant plus de cinq secondes et est montré en parallèle avec d'autres contenus, et pour un moyen d'arrêter le son qui commence sans qu'une personne le demande.
Un héros en boucle est précisément ce contenu. Un contrôle de pause visible est la réponse honnête et cela coûte un bouton. Elle ne permet pas non plus de sauver les gens : quiconque lit en transit, en réunion ou sur un plan qui facture le mégaoctet.
Respectez également la préférence pour les mouvements réduits. Lorsqu'un visiteur a demandé à son système d'exploitation moins d'animation, servez l'affiche et sautez la boucle : la page fonctionne toujours, et vous avez supprimé la version qui rend certaines personnes physiquement mal.
Si le clip contient des paroles, il a besoin de légendes, et WCAG les traite comme une exigence pour les médias synchronisés préenregistrés plutôt qu'une gentillesse. Un héros autoplaying muet ne laisse pas de canal du tout à l'exception du type à l'écran.
Quand une image immobile gagne simplement
La photographie gagne partout où le sujet ne bouge pas : un produit sur blanc, un menu, un portrait d'équipe, un intérieur fini, un certificat, une carte de prix. La motion n'ajoute rien à un objet qui ne contient aucune motion de sa propre initiative.
Il gagne à nouveau sur les pages dont le travail est à trouver et à lire — une page de service, une liste de catalogue, une page de localisation. Ces pages ont besoin de texte, de structure et d'un premier écran rapide bien plus qu'elles n'ont besoin d'un clip héros sur eux.
Et il gagne quand vous n'êtes pas prêt à maintenir la vidéo. Une photo d'un an ressemble encore à une photo. Un clip promo d'un an semble abandonné, car il montre l'emballage de la saison dernière et un numéro de téléphone que vous avez depuis changé.
Le test honnête est simple: décrire en mots ce que le clip montrerait. Si la description correspond à une phrase sur un objet debout, commandez une photographie et dépensez la différence sur la copie qui se trouve à côté.
Où la vidéo gagne sa place
Montage, installation et utilisation. Tout ce qu'un client a à voir avec ses mains est plus facile à montrer qu'à écrire, et un court clip supprime une conversation de support qui se répéterait autrement chaque semaine.
Échelle et espace. Les pièces, les lieux, les véhicules et les grands objets s'aplatissent sur une photographie; un mouvement lent à travers eux explique la taille d'une façon qu'aucun grand-angle ne parvient encore, parce que le spectateur a une idée du temps qu'il faut pour traverser.
Les gens et la confiance. Une personne qui répond à une question par ses propres mots fait quelque chose qu'un témoignage dans les guillemets ne fait pas, à condition que l'enregistrement soit suffisamment propre pour que la réponse soit cru au lieu de douter.
Et le mouvement du produit lui-même : tissu, liquide, mécanisme, charnière, pli. Si ce que vous vendez est comment la chose se comporte, la photographie statique décrit un objet différent de celui que vous vendez réellement.
Que commander et ce qu'il coûte
Une seule pièce verticale est le Single Reel à 70 $, livré en 1-2 jours ouvrables avec 1 tour de révisions. Il comprend des légendes, une piste sous licence et des exportations pour chaque placement vertical; le tournage, le scénario et les acteurs ne sont pas inclus dans celui-ci.
Si la séquence existe déjà et que vous voulez un jeu, le Reels Pack est de 90 $ pour jusqu'à 5 éditions, livrées en 1-2 jours ouvrables à partir de la livraison de la séquence, avec 2 tours sur le montage; le tournage n'en fait pas partie, parce que vous fournissez la séquence vous-même.
Lorsque la date est fixée, il y a Reels Pack Express à 150 $ : 1 jour ouvrable, un tour de 24 heures à partir des images, 1 tour de révisions, avec le tournage et toute licence au-delà de la piste fournie laissé à l'extérieur du paquet.
Pour un héros coupé avec des dérivés courts, l'édition Campaign est de 180 $ sur 3-5 jours, avec 2 tours sur la coupe et 1 sur la note; la musique autorisée n'est pas incluse, car la licence est achetée par vous. Si le site a besoin d'un flux plutôt qu'un lancement, le moteur de contenu mensuel est de 290 $/mois sur un cycle mensuel avec un préavis de 30 jours pour s'arrêter, le volume est convenu au début de chaque cycle, et les jours de tournage et les stocks payés s'assoient en dehors de lui.
Checklist pratique
- Décidez si le sujet se déplace réellement avant de commander un clip.
- Remplacer un héros qui joue automatiquement par une affiche et un bouton de lecture où que la vidéo porte des informations.
- Mesurer la taille transférée du clip et de l'affiche sur un profil mobile broyé.
- Demandez au fournisseur un codec et un conteneur nommé plutôt qu'un MP4.
- Déplacez chaque teinte, grade et flou hors de CSS et dans l'exportation.
- Ajoutez une commande de pause visible, des légendes et un recul à mouvement réduit avant le lancement.
Questions et réponses
Le héros devrait-il jouer en auto ?
Seulement si elle est muette, courte et libre d'informations que le visiteur doit lire. Dès que le clip contient des légendes, un visage parlant ou une séquence qui compte, il se déplace derrière un bouton de lecture. Rappelez-vous aussi que l'autoplay peut être refusé par le navigateur, par un économiseur de données ou par une préférence système pour un mouvement réduit, de sorte que la page doit regarder fini sans elle.
Que coûte une vidéo pour le site et combien de temps cela prend-il?
Single Reel est 70 $, livré en 1-2 jours ouvrables avec 1 tour de révisions; tournage, scripting et acteurs ne sont pas inclus. Reels Pack est de 90 $ pour jusqu'à 5 éditions, livrées en 1-2 jours ouvrables à partir de la livraison de la vidéo avec 2 tours sur la modification, et vous fournissez la vidéo. Campaign Edit est 180 $ sur 3-5 jours avec 2 tours sur la coupe et 1 sur la note, et la licence pour la musique est achetée par vous. Reels Pack Express est de 150 $, 1 jour ouvrable, un tour de 24 heures de la vidéo, 1 tour. Le moteur de contenu mensuel est de 290 $/mois sur un cycle mensuel avec un préavis de 30 jours pour s'arrêter.
Quel format dois-je demander au fournisseur?
Nommez le conteneur et le codec. Comme l'indique le guide MDN, le conteneur (MP4, WebM, Ogg, QuickTime) est l'emballage et le codec (H.264, VP9, AV1, AAC, Opus) est la façon dont le contenu est compressé, c'est pourquoi deux fichiers avec la même extension peuvent se comporter différemment. Une demande pratique est H.264 en MP4 pour une large compatibilité, avec un second code plus efficace offert comme source supplémentaire où il vaut le temps supplémentaire.
Puis-je juste mettre un filtre sur la vidéo dans CSS ?
Vous pouvez, mais l'appareil du visiteur en paie. Une image fixe est filtrée une fois, alors qu'une vidéo passe sur de nouveaux pixels plusieurs fois par seconde, de sorte que le filtre est recalculé pour chaque cadre pendant que le clip tourne. Blur coûte plus qu'une teinte parce que le travail grandit avec le rayon. Cuire la note dans l'exportation à la place, et utiliser une couche semi-transparente plate lorsque le titre a besoin d'aide.
Faut-il encore des légendes si le clip est silencieux ?
Oui, pour deux raisons à la fois. Un héros auto-joueur muet ne laisse pas de canal, sauf le type à l'écran, et WCAG 2.2 traite les légendes comme une exigence pour les médias synchronisés préenregistrés. Séparément, vous avez besoin d'une manière visible pour arrêter le mouvement quand un clip commence par lui-même et court pendant plus de cinq secondes avec d'autres contenus.