Aller au contenu principal

Tous les réglages du lecteur, un par un

L'équipe Videas17 août 20269 min de lecture

Le lecteur Videas se règle à deux endroits, et la différence compte : certains réglages sont écrits dans le code d’intégration, d’autres sont résolus par Videas à chaque lecture. Les premiers exigent de re-copier le code quand vous les changez ; les seconds s’appliquent tout seuls, même à une vidéo déjà en ligne depuis six mois.

Cet article donne la liste complète, avec le nom exact de chaque paramètre.

Les deux familles de réglages

Les paramètres du code (la liste ci-dessous) sont inscrits dans le code que vous copiez depuis Videas. Sur une intégration en <script>, ils voyagent dans des attributs data- ; sur une iframe, dans l’URL. Les modifier après coup ne change rien au code déjà collé sur votre site : il faut le récupérer à nouveau.

Les réglages du lecteur — thème clair/sombre, couleur d’accent, logo, position du logo, mode éco par défaut — ne sont pas dans le code. Videas les résout au moment de la lecture, depuis votre préréglage par défaut. Vous pouvez donc changer la couleur de votre marque sans toucher à une seule page de votre site. Ils se règlent dans Réglages du lecteur, et sont détaillés dans Personnaliser le thème du lecteur.

Comment écrire un paramètre

Le nom du paramètre est le même partout ; seule la forme change selon la méthode d’intégration.

En <script> — le nom en minuscules, tirets, préfixé data- :

<script src="https://videas.com/embed.js" data-embed="VOTRE-ID"
        data-auto-play="1" data-muted="1" data-show-chapters="0"></script>

En iframe — le nom en minuscules avec des tirets bas, dans l’URL :

<iframe src="https://videas.com/embed/VOTRE-ID/?auto_play=1&muted=1&show_chapters=0"
        width="640" height="360" allowfullscreen allow="autoplay"></iframe>

Les valeurs oui/non s’écrivent 1 ou 0. Une couleur s’écrit sans le dièse : primary_color=884aff.

Deux règles à connaître :

  • Videas n’écrit dans le code que ce qui diffère de vos réglages. Si votre préréglage met déjà le thème sombre, le code copié ne contient pas theme — il suivra donc votre préréglage. C’est voulu : le code reste court et il continue de refléter vos réglages.
  • Un paramètre présent dans le code gagne toujours. Si vous écrivez theme=light en dur, changer votre préréglage n’aura plus d’effet sur cette intégration précise.

Lecture et interactions

Paramètre (iframe) Attribut (script) Défaut Ce qu’il fait
auto_play data-auto-play 0 Démarre la lecture au chargement de la page
auto_play_next data-auto-play-next 1 Enchaîne l’élément suivant d’une collection
loop data-loop 0 Reprend au début à la fin du média
muted data-muted 0 Démarre sans le son
shuffle data-shuffle 0 Lit une collection audio dans un ordre aléatoire
controls data-controls 1 Affiche la barre de contrôle
pin_controls data-pin-controls 0 Garde la barre de contrôle toujours visible
enable_download data-enable-download 0 Autorise le téléchargement du fichier
start_at data-start-at Démarre à un instant donné, en secondes
start_page data-start-page 1 Ouvre un document à cette page

La lecture automatique exige le son coupé. Tous les navigateurs refusent de démarrer une vidéo audible sans geste de l’utilisateur : auto_play=1 seul ne démarrera pas. Écrivez toujours les deux, auto_play=1&muted=1. Sur une iframe, ajoutez aussi l’attribut allow="autoplay" — Videas le fait pour vous dans le code copié.

Habillage du lecteur

Paramètre (iframe) Attribut (script) Défaut Ce qu’il fait
show_chapters data-show-chapters 1 Affiche les marqueurs de chapitres
show_waveform data-show-waveform 1 Affiche la forme d’onde d’un audio
show_playlist data-show-playlist 1 Affiche la liste des pistes d’une collection
show_homepage_info data-show-homepage-info 1 Titre et durée sur l’écran d’accroche
show_homepage_play_button data-show-homepage-play-button 1 Grand bouton de lecture sur l’écran d’accroche
show_eco_mode data-show-eco-mode 1 Affiche le bouton mode éco
show_info_button data-show-info-button 1 Affiche le bouton d’informations
show_thumbnails data-show-thumbnails 0 Colonne de vignettes de pages, sur un document
show_outline data-show-outline 0 Sommaire d’un document
show_ads data-show-ads 1 Diffuse les publicités configurées
show_logo data-show-logo 1 Affiche votre logo en filigrane
show_captions data-show-captions 1 Légendes sous les images d’une collection
enable_pip data-enable-pip 1 Autorise l’image dans l’image
enable_fullscreen data-enable-fullscreen 1 Autorise le plein écran
enable_zoom data-enable-zoom 1 Autorise le zoom sur une image
enable_search data-enable-search 1 Recherche dans le texte d’un document
enable_slideshow data-enable-slideshow 1 Diaporama automatique d’une collection d’images
slideshow_duration data-slideshow-duration 5 Durée d’une image du diaporama, en secondes

Le filigrane du logo n’apparaît qu’une fois la lecture lancée : il n’existe pas sur l’écran d’accroche. C’est normal, et ce n’est pas réglable.

Apparence

Paramètre (iframe) Attribut (script) Défaut Ce qu’il fait
theme data-theme selon le média dark, light, ou colorful (audio seulement)
primary_color data-primary-color votre préréglage Couleur d’accent, sans dièse : 884aff
icon_color data-icon-color votre préréglage Couleur des icônes du lecteur audio
logo_position data-logo-position barre de contrôle control_bar, top_left, top_right, bottom_left, bottom_right
logo_opacity data-logo-opacity 1 Opacité du filigrane, de 0 à 1
logo_click_url data-logo-click-url Adresse ouverte au clic sur le logo
poster_fit data-poster-fit contain contain ou cover, pour l’image d’accroche
collection_display_mode data-collection-display-mode drawer Présentation d’une collection

Le thème par défaut dépend du média : sombre pour une vidéo, couleur pour un audio (il floute la pochette en fond), clair pour le reste. Le thème colorful n’existe que sur le lecteur audio ; ailleurs il est ramené à clair ou sombre.

Ces quatre-là — thème, couleur, logo, position — sont aussi réglables dans Réglages du lecteur, et c’est presque toujours préférable : ils s’appliquent alors à toutes vos intégrations, y compris celles déjà en ligne.

Dimensions et affichage

La taille ne se règle pas par un paramètre mais par les attributs du code, que Videas écrit pour vous : data-width, data-height et data-aspect-ratio sur une intégration en <script> ; width, height et un style sur une iframe. Laissez le mode responsive activé et le lecteur épouse la largeur de votre page en gardant ses proportions.

L’affichage en bouton (le lecteur s’ouvre par-dessus la page au clic) se règle avec data-embed-mode="popover", data-trigger et data-trigger-label. Il n’existe qu’en <script> : une iframe n’a pas d’équivalent. Tout cela se choisit dans la fenêtre d’intégration, sans écrire une ligne.

Ce que l’URL du lecteur ne fait pas

L’adresse de la page du lecteur (celle que révèle Voir le rendu dans un onglet) sert à vérifier votre réglage, pas à intégrer. Collée telle quelle dans WordPress, Wix, Squarespace ou Webflow, elle produit un lien cliquable, pas un lecteur : ces plateformes n’intègrent automatiquement que les services qu’elles connaissent. Pour intégrer, copiez le code. Seules les pages qui savent intégrer n’importe quelle adresse — Notion, par exemple — acceptent l’URL nue ; Videas vous la donne alors directement, en choisissant Notion comme destination.

À quoi sert chaque réglage : la page produit Player décrit les fonctions que ces paramètres pilotent, là où cette page ne donne que leur écriture exacte.

Quels réglages s’appliquent sans re-copier le code ?

Ceux qui ne sont pas dans le code : thème clair/sombre, couleur d’accent, logo, position du logo, mode éco par défaut. Videas les résout au moment de la lecture, depuis votre préréglage par défaut — vous pouvez donc changer la couleur de votre marque sans toucher à une seule page de votre site.

Tous les autres paramètres, ceux listés dans les tableaux de cet article, sont écrits dans le code que vous avez copié : les modifier n’a aucun effet tant que vous n’avez pas récupéré le code à jour et remplacé celui de votre page.

Pourquoi le code copié ne contient-il pas tous les paramètres ?

Parce que Videas n’écrit que ce qui diffère de vos réglages. Si votre préréglage impose déjà le thème sombre, le code ne contient pas theme : l’intégration suivra votre préréglage.

C’est délibéré, et cela a une conséquence utile : le code reste court, et il continue de refléter vos réglages quand ceux-ci évoluent. À l’inverse, un paramètre présent dans le code gagne toujours — écrire theme=light en dur fige cette intégration, et changer votre préréglage n’aura plus d’effet sur elle.

Comment écrit-on un paramètre en script et en iframe ?

Le nom est le même partout, seule la forme change. En <script>, il s’écrit en minuscules avec des tirets et le préfixe data- : data-auto-play="1". En iframe, il s’écrit en minuscules avec des tirets bas, dans l’URL : ?auto_play=1&muted=1.

Deux conventions à connaître : les valeurs oui/non s’écrivent 1 ou 0, et une couleur s’écrit sans le dièseprimary_color=884aff.

Peut-on coller l’URL du lecteur au lieu du code ?

Non, sauf cas particulier. L’adresse de la page du lecteur sert à vérifier un réglage, pas à intégrer : collée dans WordPress, Wix, Squarespace ou Webflow, elle produit un lien cliquable, pas un lecteur. Ces plateformes n’intègrent automatiquement que les services qu’elles connaissent.

Seules les pages capables d’intégrer n’importe quelle adresse — Notion, typiquement — acceptent l’URL nue. Videas vous la fournit alors directement, en choisissant Notion comme destination dans la fenêtre d’intégration.

L’affichage en bouton existe-t-il en iframe ?

Non. Le mode popover — le lecteur qui s’ouvre par-dessus la page au clic — se règle avec data-embed-mode="popover", data-trigger et data-trigger-label, et n’existe qu’en <script>. Une iframe n’a pas d’équivalent.

C’est l’un des rares écarts fonctionnels entre les deux méthodes. Si votre plateforme filtre le JavaScript et vous impose l’iframe, le mode intégré est votre seule option.

Articles liés