POURQUOI LES DÉTAILLANTS ONT BESOIN DE LECTEURS VIDÉO DE MARQUE

Anything that can increase a business’s revenue by 10%–20% isn’t just essential; it’s mandatory. For top retailers, whose combined brand value exceeds $1 trillion, that doesn’t just mean using the right logo. Every detail on every customer touchpoint must support and convey the brand.increase a business’s revenue by 10%–20% isn’t just essential; it’s mandatory. For top retailers, whose combined brand value exceeds $1 trillion, that doesn’t just mean using the right logo. Every detail on every customer touchpoint must support and convey the brand.

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.

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 :

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).

• Remove the control bar.Remove the control bar. Because retailers want to keep the focus on their products, not the video experience, they often want to remove player controls completely. This is especially valuable for homepage players or other pages where you want looping videos that catch the eye without distracting from the purchase. All you need to do is add the property, "control_bar": false, and every control except the play button will be hidden.

• Stylize the play button.Stylize the play button. For brands that want to change how the play button reacts when you hover over it, Brightcove has two options. You can add a glow effect around the button, or you can make the button darken. Just add one of the following objects under the play_button property: "hover": "glow" or "hover": "darken".

Note:Note: When adding properties in JSON, be sure to close them and any preceding objects with a comma (,) unless directly followed by a close bracket (}). To prevent playback errors, the editor won’t accept invalid code and you won’t be able to save changes.

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: ;

}

After font-family and between the colon (:) and semicolon (;), add the font of your choice. Bear in mind that browsers support different fonts, and CSS is designed with a fallback system. At minimum, reference a recent list of common web fonts, and copy the font you want as displayed. For example, if you really want Comic Sans, your CSS doc would look like this:common web fonts, and copy the font you want as displayed. For example, if you really want Comic Sans, your CSS doc would look like this:

.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.

While creating CSS docs can be relatively simple, Javascript isn’t something you can manipulate without development experience or assistance. If you have in-house resources to do so, check out our support documentation on player customization to get started. You can also connect with our Brightcove Global Services team for direct support.support documentation on player customization to get started. You can also connect with our Brightcove Global Services team for direct support.