(Si vous recherchez simplement les notes techniques, passez au bas de l'article)
Une bannière vidéo peut faire ressortir votre côté original et vous distinguer des milliers de sites qui existent. Quand c’est bien fait, votre site parait professionnel. Quand c'est mal fait, ça mène à des taux de rebond plus élevés.
C’est une chose qui doit être bien faite, mais ce n’est pas si facile à mettre en place. Nous sommes fiers d'avoir BEAUCOUP d’expérience, car cela assure des sites impeccables et magnifiques pour nos clients avec une bannière vidéo correctement intégrée à leurs sites internet.
Voici quelques exemples de notre travail:
https://nouvellevie.com
Un peu de contexte
En ce moment, la vidéo fait fureur en ligne. Avec une bande passante toujours croissante et à la disposition de tous, des machines plus puissantes et un stockage accru, la barre technique pour profiter des avantages de la vidéo a radicalement baissé.
Des clients nous demandent souvent une vidéo pour leurs projets et bien que nous sentions que la vidéo a une place importante, ce n'est pas pour tout le monde.
Intégrer une vidéo sur un site web correctement est une opération délicate. C’est difficile à bien exécuter du point de vue du design (d'autant plus que vous devez équilibrer les expériences sur ordinateur de bureau et mobiles) et encore plus difficile du point de vue technique.
C’est très tentant d’insérer un lien YouTube et de régler les paramètres sur lecture automatique, mais la plupart du temps, le résultat n’est pas très concluant. Cela finit par être une distraction plutôt que d'ajouter une valeur positive à l'expérience générale du site.
Notre secret est que nous n'ajoutons pas de vidéo pour tous nos clients et quand nous le faisons, nous le faisons minutieusement. Nous regardons tous les détails avec le client pour nous assurer que le résultat est satisfaisant.
Il y a deux éléments distincts, mais très importants dans la façon dont nous abordons l'ajout d’une vidéo au site d’un client: le point de vue technique et celui du design.
PROCÉDER DE LA BONNE FAÇON: LE DESIGN
La question la plus importante à laquelle vous devez répondre est: est-ce que la vidéo aidera à transmettre le message du client ?
Pour certains de nos clients, la vidéo n'a aucun sens. Nous travaillons actuellement avec une compagnie TI et nous avons choisi de rayer l’option d’une bannière vidéo parce que ses services sont abstraits. Nous ne voulions pas colorer la perception du visiteur de la marque basée sur une idée tangible et littérale de ce que cette marque est censée être, comme c’est le cas avec les photos clichées libres de droits de cette industrie.
Nous créons plutôt un arrière-plan JavaScript clair et interactif avec le logo de l'entreprise et le slogan au centre. Pas de distractions, juste une déclaration très claire, ciblée, percutante à propos de qui ils sont. Pour ce client, la vidéo serait une énorme distraction et nous éloigne de ce que nous essayons d'accomplir.
Ensuite, la vidéo doit agir comme un arrière - plan. C'est un concept difficile pour de nombreuses compagnies de vidéos à comprendre. Nous travaillons en étroite collaboration avec nos partenaires chez Chivalric et ils comprennent parfaitement notre vision avant d'exécuter quoi que ce soit pour le client.
Une vidéo d'arrière-plan signifie qu'il ne doit pas y avoir de son, pas de texte intégré et que l'accent principal doit être au centre. Ces détails peuvent sembler étranges, mais il faut comprendre le médium.
Lorsque la plupart des compagnies de vidéos pensent à leur travail, elles ont le luxe d'un ratio fixe. Elles vont penser l'écran comme une boîte fixe où elles ont toute la largeur et la hauteur pour atteindre l'expérience qu'ils veulent transmettre au public. Ceci est totalement FAUX.
Toute entreprise de vidéos qui pense ainsi ne comprend pas le web. Encore une fois, nous travaillons en étroite collaboration avec Chivalric et ils comprennent parfaitement.
Lorsque vous travaillez sur le web et que vous souhaitez utiliser la vidéo comme élément de conception, le format d'image est imprévisible. Pratiquement tout le monde a une taille d'écran et une résolution différentes ces jours-ci et en tant que concepteurs de sites internet, nous comprenons cela.
Si vous placez des éléments importants près du bord d'une vidéo, ils seront probablement coupés pour la majorité de votre public. Si vous utilisez le son comme vidéo d'arrière-plan, les gens quitteront votre site. Si vous essayez d’intégrer du texte, il n’apparaîtra probablement pas au bon endroit (encore une fois, en raison des ratios).
Une bonne vidéo d’arrière-plan ne devrait pas être le point central de la conception. Sur les appareils mobiles, nous désactivons volontairement la lecture vidéo pour s'assurer que personne ne télécharge une vidéo 10mb sur leurs données de téléphone.
Ce que nous faisons est que nous utilisons la vidéo comme un moyen d'améliorer l'expérience sur les ordinateurs de bureau et ajouter de la vie à nos sites. Les vidéos doivent être coupées de telle sorte que les transitions soient synchronisées pour donner la meilleure perception de l'image de marque de l'entreprise.
Voilà pourquoi nos bannières vidéo sont si percutantes.
Pour les étapes techniques, lisez la dernière section de l’article.
LA BONNE FAÇON DE PROCÉDER: LE CODE
Le plus marrant est que le code, c’est plus simple. Nous utilisons nos vidéos comme bannières d’arrière-plan, donc nous nous assurons que nous créons l’espace approprié, puis nous superposons les autres éléments.
Nous téléchargeons les vidéos de manière dynamique en utilisant JavaScript afin de ne pas télécharger les vidéos sur les appareils mobiles et nous avons la possibilité d'attendre le chargement de la vidéo avant de l'essayer.
C’est important pour nous d'utiliser des liens mp4 pour tirer parti du html5.
Enfin, alors que nous utilisons Vimeo pour stocker notre fichier vidéo, nous les utilisons comme CDN (réseau de diffusion de contenu) afin de ne pas encombrer nos propres serveurs. C'est plus une décision d'infrastructure qu'une décision de codage, mais je pense que cela vaut la peine d'être noté.
Afin d'obtenir le lien mp4 de Vimeo, nous avons dû nous abonner à un compte payant, mais cela nous donne aussi des statistiques de lecture qui aident nos équipes marketing.
Alors pourquoi cela a-t-il cessé de fonctionner ?
La réponse courte est que ce n'est pas le cas. Le code est probablement brisé sur votre site parce qu'il n'a pas été mis en place correctement (désolé, ça peut sembler sévère, mais c'est vrai).
Pour maintenir ou augmenter la fidélité des utilisateurs, les navigateurs font constamment des mises à jour pour offrir à leurs utilisateurs l'expérience la plus transparente possible. Les navigateurs gagnent de l'argent en vous incitant à utiliser leur logiciel (j’en parle dans un autre article).
Ces dernières années, la chose qui a le plus agacé les gens est la lecture automatique des vidéos sur les sites web.
Avez-vous déjà ouvert quelques onglets en naviguant sur Reddit pour ensuite entendre une musique agaçante rugir de vos haut-parleurs ? Vous devez ensuite déterminer quel onglet joue le son pour que vous puissiez enfin fermer l’onglet et passer à autre chose ?
Ce n'est pas nouveau
Au cours des derniers mois, Chrome a ajouté une icône audio à l'onglet concerné afin que vous puissiez identifier rapidement quel site vous ne souhaitez plus jamais visiter. Ils sont allés plus loin en vous permettant de faire un clic droit sur l'onglet pour le mettre en sourdine. Aujourd'hui, le contenu de lecture automatique ne démarre pas tant que Chrome ne détecte pas que vous êtes sur l'onglet (ce que je trouve personnellement gênant lorsque j'ouvre de la musique et que je veux juste qu’elle se télécharge en arrière-plan).
Eh bien ce week-end, Chrome est allé un peu plus loin et a décidé d’appuyer sur un autre bouton pour améliorer l'expérience utilisateur. Toute vidéo qui se lance automatiquement avec le son verra désormais son option de lecture automatique annulée (d’une manière générale).
Ce n'est pas nouveau. N'importe quel développeur web digne de ce nom vous dirait que Safari fait cela depuis environ un an maintenant.
Si vous avez lu l'intégralité de l'article, sachez que la meilleure façon d'avoir une vidéo intégrée comme bannière d'arrière-plan est d'utiliser JavaScript pour télécharger dynamiquement la vidéo en créant une balise
1. Assurez-vous que vous utilisez le lien .mp4 (pas un lien YouTube ou Vimeo)
2. Créez une balise
1. id = "whatever_your_id_is"
2. loop = "loop"
3. mute = "true"
3. Dans la balise
a. src = "mp4_source"
b. type = "video / mp4"
4. Votre dernière étape consiste à utiliser JavaScript pour démarrer la vidéo. Si l'id de la balise
a. what_your_id_is.play ()
Après avoir mis tout cela ensemble, voici notre code pour le site de Belon:
var videoFile = 'https://player.vimeo.com/external/258140699.sd.mp4?s=4e66af3e6843406a65133d127c72cc2c26e4d64f&profile_id=165';
// standard desktop
var videoHTML = '
videoHTML + = '<source data-cke-saved-src="' + videoFile + '' type =" src="https://drivemarketing.ca/admin/'%20+%20videoFile%20+%20''%20type%20=" video="" mp4="" "=""> ';
videoHTML + = 'Your desktop does not support the video tag.';
videoHTML + = '';
$ ("# video-container"). html (videoHTML);
$ ("# video"). on ('loadedmetadata', function () {
video.play ();
});
La chose importante à noter est l'attribut muted = "true". Sans cet attribut, votre vidéo ne sera pas jouée automatiquement. C'est maintenant chose faite avec Safari et Chrome et je suis sûr que Firefox suivra bientôt.
Notre code est conçu pour suivre les règles de Google en matière de lecture automatique. Bien que cela semble fonctionner pour le moment, il est difficile de prédire l'avenir de cette technologie.
Si vous rencontrez un problème lors de la lecture de vidéos sur votre site et que vous avez besoin d'aide, vous devez nous contacter. Nous sommes des techniciens, mais nous comprenons aussi les entreprises, alors ne soyez pas gênés si vous ne comprenez pas parfaitement cet article: c'est pour ça que nous sommes là !
