Tout ce qui peut augmenter le chiffre d'affaires d'une entreprise de 10 à 20 % n'est pas seulement essentiel, il est obligatoire. Pour les principaux détaillants, dont la valeur combinée de la marque valeur combinée des marques dépasse les 1 000 milliards de dollarscela ne signifie pas seulement utiliser le bon logo. Chaque détail de chaque point de contact avec le client doit soutenir et véhiculer la marque.
Lorsque les entreprises procèdent à l'audit de leurs marques, un élément souvent négligé est le lecteur vidéo en ligne (OVP). La plupart des entreprises utilisent aujourd'hui des lecteurs vidéo sur leurs sites web et leurs applications, mais beaucoup d'entre elles n'utilisent pas encore de lecteurs de marque. Il se peut que l'entreprise utilise un lecteur gratuit ou qu'elle n'ait tout simplement pas réalisé que son lecteur vidéo en ligne avait des capacités de marquage. Quoi qu'il en soit, les lecteurs génériques nuisent à la cohérence de la marque et peuvent potentiellement coûter des revenus à l'entreprise.
Si vous n'êtes pas sûr que votre fournisseur propose des lecteurs de marque, prenez le temps de passer en revue les éléments qui devraient être personnalisables sur n'importe quelle plateforme.
ÉLÉMENTS DE LECTEUR VIDÉO DE MARQUE
Les lecteurs vidéo en ligne d'aujourd'hui sont construits sur HTML5, ce qui signifie qu'ils peuvent techniquement être personnalisés comme n'importe quel autre objet web. Toutefois, à des fins de stratégie de marque, ces éléments entrent généralement dans les quatre catégories suivantes.
- Les couleurs. Si la couleur est l'un des premiers éléments de marque auxquels nous pensons, le lecteur vidéo est peut-être l'un des derniers endroits où nous l'appliquons. Tout, du bouton de lecture au contrôle du volume en passant par la barre de progression, peut être personnalisé aux couleurs de votre marque.
- Les polices de caractères. En dehors de Comic Sans, la plupart d'entre nous ne pensent probablement jamais à la typographie. Mais même si nous ne pouvons pas faire la différence entre Helvetica et Arial, nous remarquerions tous si le " M " de McDonald's était soudainement en Times New Roman. Il en va de même pour le texte d'exécution et le texte de survol de votre lecteur : une police incorrecte pourrait perturber l'expérience de la marque.
- Les icônes. Au-delà des logos, l'iconographie est un autre aspect important de l'image de marque. Certaines marques préfèrent les lignes courbes, d'autres les lignes droites. Certaines veulent des lignes délicates, d'autres des traits gras et épais. Comme pour les couleurs et les polices, le bouton de lecture, le contrôle du volume et toutes les autres commandes du lecteur peuvent être personnalisés à l'aide de différentes icônes.
- Commandes. Pour certaines marques, les commandes du lecteur elles-mêmes peuvent envoyer un message erroné. Un trop grand nombre de contrôles peut encombrer une marque minimaliste, tandis que certaines mises en page de lecteur peuvent sembler étrangères aux spectateurs d'autres pays. C'est pourquoi il est important de pouvoir ajuster la visibilité et la position des commandes de votre lecteur vidéo.
COMMENT CRÉER UNE MARQUE POUR UN LECTEUR VIDÉO
Les lecteurs vidéo peuvent être adaptés à votre marque de différentes manières. Par exemple, votre développeur web pourrait apporter quelques modifications rapides en ligne au CSS de la page web. Cependant, ce n'est pas la meilleure approche, car ces modifications ne s'appliqueraient qu'à une seule page et au lecteur qui y est hébergé.
Pour mieux contrôler vos lecteurs vidéo de marque, vous devez les gérer à partir de votre plateforme vidéo. Il existe trois façons principales de le faire.
Éléments de marque du joueur |
Options de la plate-forme OOTB |
Feuilles de style |
Feuilles de style et scripts |
Couleurs |
Tous |
Tous |
Tous |
Polices de caractères |
Aucun |
Tous |
Tous |
Icônes |
Limitée |
Tous |
Tous |
Contrôles (visibilité / emplacement) |
Limitée |
Limitée |
Tous |
DES OPTIONS DE PLATE-FORME PRÊTES À L'EMPLOI
Les meilleures plates-formes vidéo pour les détaillants doivent proposer plusieurs options dans leur interface pour personnaliser facilement votre lecteur vidéo. Par exemple, Brightcove vous permet d'ajuster rapidement les éléments suivants :
Élément |
Couleurs |
Forme de l'icône |
Position de contrôle |
Contrôle de la visibilité |
Bouton de lecture |
✔ |
✔ |
✔ |
|
Barre de contrôle |
✔ |
|||
Sélecteur de qualité |
✔ |
✔ |
||
Recherche avant/arrière |
✔ |
✔ |
||
Taux de lecture |
✔ |
✔ |
||
Plein écran |
✔ |
✔ |
||
Curseur de volume |
✔ |
✔ |
||
Recherche de vignettes |
✔ |
|||
Image dans l'image |
✔ |
✔ |
||
Partage social |
✔ |
✔ |
Contrairement à certaines solutions techniques qui proposent des palettes prédéfinies, la plupart des plateformes vidéo vous permettent de personnaliser entièrement les couleurs avec les valeurs hexagonales, HSV ou RVB de votre marque. Cela dit, elles ne proposent généralement pas d'options prêtes à l'emploi pour modifier les polices de caractères de leurs lecteurs.
JSON EDITOR
Certaines plates-formes intègrent un éditeur JSON qui permet de manipuler directement le code du lecteur. Bien que cela soit généralement le domaine des développeurs expérimentés, il existe quelques ajustements simples que tout le monde peut apporter au lecteur Brightcove. (Sélectionnez un lecteur à modifier dans le module Lecteur de Brightcove, puis sélectionnez l'éditeur JSON).
- Retirer la barre de contrôle. Parce que les détaillants souhaitent que l'accent soit mis sur leurs produits et non sur l'expérience vidéo, ils veulent souvent supprimer complètement les commandes du lecteur. Ceci est particulièrement utile pour les lecteurs de pages d'accueil ou d'autres pages où vous voulez des vidéos en boucle qui attirent l'attention sans détourner l'attention de l'achat. Il vous suffit d'ajouter la propriété,
"control_bar": false
et toutes les commandes, à l'exception du bouton de lecture, seront masquées.
- Styliser le bouton de lecture. Pour les marques qui souhaitent modifier la réaction du bouton de lecture lorsque vous le survolez, Brightcove propose deux options. Vous pouvez ajouter un effet lumineux autour du bouton ou assombrir le bouton. Il suffit d'ajouter l'un des objets suivants sous la rubrique
play_button
propriété :"hover": "glow"
ou"hover": "darken"
.
Remarque : Lorsque vous ajoutez des propriétés en JSON, veillez à les fermer, ainsi que tout objet précédent, par une virgule (,), à moins qu'elles ne soient directement suivies d'un crochet (}). Pour éviter les erreurs de lecture, l'éditeur n'acceptera pas de code invalide et vous ne pourrez pas enregistrer les modifications.
FICHES DE STYLE
La plupart des sites web utilisent des feuilles de style en cascade (CSS) pour définir les normes de la marque. Il s'agit essentiellement de documents de texte brut qui suivent un format spécifique pour ajuster les couleurs, les polices et les icônes de tous les éléments d'une page web.
Les lecteurs vidéo de marque peuvent également être gérés à l'aide de CSS, en particulier lorsque vous devez apporter davantage de personnalisations que ce que la plateforme propose en mode natif. Toutefois, si vous n'êtes pas un développeur, consultez-en un avant d'apporter des modifications, car il faut connaître la syntaxe et les valeurs appropriées.
Pour créer un document CSS, il suffit de disposer du Bloc-notes pour Windows ou de TextEdit pour Mac.
- Créez un nouveau document (pour TextEdit, sélectionnez Format > Make Plain Text).
- Ajoutez vos sélecteurs, propriétés et valeurs
- Enregistrer en tant que fichier CSS (soit en enregistrant le fichier avec l'extension .css, soit en changeant le nom du fichier ultérieurement)
Le lecteur Brightcove peut être personnalisé avec des feuilles de style CSS en accédant au module Lecteurs, puis en sélectionnant Plugins > Feuilles de style. Vous pouvez charger vos documents ici, et le lecteur sera marqué en conséquence partout où il apparaîtra sur votre site. Pour ceux qui ne disposent pas de ressources de développement, vous trouverez ci-dessous quelques personnalisations simples que vous pouvez mettre en œuvre vous-même.
CHANGER LES POLICES DU LECTEUR
La plupart des textes des lecteurs vidéo sont très petits (par exemple, la durée d'exécution, le texte au survol, etc.) ). Apportez donc des modifications avec prudence et envisagez de consulter un spécialiste UX si les normes de votre marque ne tiennent pas compte de la lisibilité sur différentes plates-formes. Cela dit, pour modifier les polices de caractères sur l'ensemble du lecteur, créez une documentation CSS contenant uniquement les éléments suivants :
.video-js {
font-family: ;
}
Après font-family
et entre les deux points ( :) et le point-virgule ( ;), ajoutez la police de votre choix. Gardez à l'esprit que les navigateurs prennent en charge différentes polices et que le CSS est conçu avec un système de repli. Au minimum, référez-vous à une liste récente de polices de caractères courantes pour le webet copiez la police que vous voulez comme elle est affichée. Par exemple, si vous voulez vraiment Comic Sans, votre document CSS ressemblerait à ceci :
.video-js {
font-family: Comic Sans MS, Comic Sans, cursive;
}
La bibliothèque de familles de polices par défaut étant limitée, vous devrez ajouter une classe ou une URL source à la documentation CSS pour les polices personnalisées. Consultez votre développeur web pour vous assurer que vous référencez correctement la police de votre marque.
SUPPRIMER TOUS LES CONTRÔLES
Pour les détaillants qui souhaitent créer des lecteurs d'en-tête Web pour les vidéos de produits en boucle, il ne suffit pas de supprimer les barres de contrôle et de progression. Ils veulent tout supprimer, y compris le gros bouton de lecture. Pour ce faire, il suffit d'un autre document CSS simple.
.video-js .vjs-big-play-button {
display: none;
}
.video-js .vjs-control-bar {
display: none;
}
Assurez-vous également que l'option " Afficher le titre et la description " n'est pas sélectionnée dans l'onglet Style de votre lecteur. Sinon, les deux s'afficheront en haut de votre lecteur par défaut.
SCRIPTS
La modification des couleurs et des polices des lecteurs vidéo de marque est relativement facile car vous modifiez les attributs existants ; vous ne changez pas ce qu'ils font et vous n'en ajoutez pas de nouveaux. Pour modifier complètement la présentation d'un lecteur vidéo, vous devez utiliser des scripts.
Alors que la création de documents CSS peut être relativement simple, Javascript n'est pas quelque chose que vous pouvez manipuler sans expérience ou assistance en matière de développement. Si vous disposez de ressources internes pour le faire, consultez notre documentation d'assistance sur la personnalisation des lecteurs pour commencer. Vous pouvez également contacter nos Services globaux de Brightcove pour une assistance directe.