Options avancées d'intégration vidéo

Nouveau sur Videas ? Commencez par Premiers pas : tour de l’interface.

L’embed simple (Intégrer une vidéo sur votre site web) couvre 80 % des besoins en quelques clics. Pour les 20 % restants — démarrer à un timecode précis, imposer une charte graphique cohérente, brancher un script JavaScript sur l’API — la page Développeur du média est l’outil dédié. Elle offre cinq sections : code embed avec aperçu en direct, préréglages d’organisation, paramètres fins du lecteur, apparence (thème, logo), identifiants techniques et exemples API (cURL, JavaScript, Python). Ce guide en fait le tour complet.

Prérequis

• Un média publié dans Videas
• Le rôle Member ou supérieur sur l’espace
• (recommandé) Avoir déjà mis en place un embed simple — voir Intégrer une vidéo sur votre site web

Ce que vous allez apprendre

• Accéder à la page Développeur d’un média
• Utiliser l’aperçu en direct pour valider une configuration avant de copier
• Gérer les préréglages d’embed (sauvegarder, promouvoir, définir par défaut, personnaliser)
• Configurer les paramètres avancés : start-at, page de départ PDF, slideshow, modes d’affichage
• Personnaliser l’apparence : thèmes, couleur principale, logo
• Récupérer les identifiants techniques (asset ID, embed ID, URL embed)
• Lire les exemples API intégrés (cURL, JavaScript, Python)

Étape 1 : Accéder à la page Développeur

Deux entrées :

• Depuis la modale Intégrer : tout en bas, cliquez sur la carte Options avancées (icône <>)
• Directement : sur la fiche du média, allez sur l’onglet Développeur

La page s’ouvre avec, de haut en bas, les sections Code embed, Préréglages, Paramètres du lecteur, Apparence, Liens directs et identifiants, Référence API.

Étape 2 : Code embed avec aperçu en direct

En haut de la page, un bloc de code affiche le snippet HTML prêt à copier — identique à celui de la modale Intégrer, mais qui se met à jour en temps réel quand vous modifiez les options en dessous.

Aperçu en direct

Bouton Afficher l’aperçu (icône œil) : déplie un lecteur fonctionnel configuré exactement comme votre snippet final. Très utile pour :

• Vérifier l’effet d’une option (autoplay, mode théâtre, position du logo) sans coller dans votre site
• Tester un préréglage avant de l’appliquer en production
• Ajuster la couleur principale ou la position du logo en visualisant immédiatement le résultat

Indicateur “Code obsolète”

Si vous avez copié le code, puis modifié une option ensuite, le bloc passe en fond orange avec la mention “Recopier le code”. Vous savez ainsi que ce qui est sur votre site n’est plus à jour par rapport aux options actuelles.

Étape 3 : Gérer les préréglages d’embed

Les préréglages permettent de figer une combinaison d’options réutilisable sur tous les embeds de l’espace ou de l’organisation. C’est l’outil qui garantit la cohérence visuelle et qui évite de re-configurer chaque embed à la main.

Appliquer un préréglage

Cliquez sur la carte d’un préréglage : toutes les options du lecteur s’alignent dessus. Une bannière bleue apparaît : “Préréglage [nom] appliqué — les options sont verrouillées en lecture seule”.

Personnaliser un préréglage en cours

Cliquez sur Personnaliser dans la bannière : vous entrez en mode édition. Une bannière orange signale que vous êtes en train de modifier le préréglage. Validez vos changements pour les enregistrer.

Sauvegarder une nouvelle configuration

Cliquez sur la carte Enregistrer comme préréglage (icône +). Une boîte de dialogue s’ouvre :

• Nom : descriptif (par exemple “Light + autoplay muted — landing page”)
• Scope :
• Espace de travail : préréglage disponible uniquement dans cet espace
• Organisation : préréglage partagé avec tous les espaces de votre organisation (rôle Admin organisation requis)
• Définir comme défaut (coche) : ce préréglage sera appliqué automatiquement à tout nouvel embed dans le scope choisi

Promouvoir un préréglage espace → organisation

Sur un préréglage espace de travail (badge Espace), le menu 3-points propose Promouvoir à l’organisation : il devient accessible à tous les espaces. Pratique quand un préréglage utilisé par une équipe se révèle pertinent pour l’ensemble.

Définir par défaut / supprimer

Le menu 3-points propose aussi :

• Définir comme préréglage par défaut (badge étoile orange) — appliqué d’office sur tout nouvel embed
• Retirer le défaut si déjà défini
• Supprimer le préréglage

Encadré : si la personnalisation est verrouillée par l’admin — un message d’information apparaît : “La personnalisation est verrouillée par votre administrateur. Seuls les préréglages disponibles peuvent être appliqués.” Vous ne pouvez plus régler les options à la main, uniquement choisir parmi les préréglages publiés.

Étape 4 : Paramètres avancés du lecteur

Section dédiée aux options qui n’apparaissent pas dans la modale Intégrer simple.

Démarrer à (timecode)

Champ Démarrer à (vidéo et audio uniquement). Saisissez un timecode (MM:SS ou HH:MM:SS, par exemple 2:30) : la lecture commencera à cet instant au chargement.

Cas d’usage : créer un embed sur un passage spécifique d’une longue vidéo (un témoignage à 12:45 dans une conférence d‘1 heure), sans avoir à éditer la vidéo source.

Page de départ (PDF)

Champ Page de départ (document PDF uniquement). Numéro de page à afficher au chargement (1, 2, 3…). Idéal pour pointer vers un chapitre précis d’un document long.

Durée du diaporama (image)

Champ Durée du diaporama (image uniquement). Valeur en secondes (1-60), durée d’affichage de chaque image avant passage à la suivante.

Cadrage du poster (vidéo)

Choix entre deux modes pour la vignette d’aperçu affichée avant la lecture :

• Contenir (par défaut) : la vignette est entièrement visible, avec des bandes si besoin
• Couvrir : la vignette remplit toute la zone, avec un éventuel rognage

Mode d’affichage (collection vidéos)

Trois options : Drawer (tiroir), Bottom Bar (barre du bas), Sidebar (barre latérale). Voir Intégrer une vidéo sur votre site web pour les usages.

Avertissement autoplay

Si vous activez Lecture automatique sans activer Muet, un avertissement visuel inline apparaît à côté du toggle : “La plupart des navigateurs bloquent la lecture automatique avec son. Activez aussi le mode muet pour un démarrage fiable.” C’est un garde-fou contre l’erreur la plus courante des intégrations vidéo web.

Étape 5 : Apparence

Section dédiée à l’identité visuelle du lecteur. Configurable par embed, mais idéalement figée dans un préréglage organisation pour la cohérence.

Thème

• Vidéo, collections, documents : choix entre Sombre (défaut) et Clair
• Audio : trois choix — Clair, Sombre, Coloré (extrait d’une couleur dominante de la pochette)

Couleur principale

Color picker (sélecteur HEX) pour la couleur d’accent (boutons, barre de progression, icônes actives). À ajuster à la couleur officielle de votre marque (par exemple #1A73E8 pour un bleu corporate).

Bouton Réinitialiser pour revenir à la couleur par défaut Videas (violet).

Logo

Toggle Afficher le logo : superpose votre logo Videas sur le lecteur. Si activé, sous-options (vidéo uniquement, les images et documents pinent automatiquement en bas-droite) :

• Position : 4 coins (haut-gauche, haut-droite, bas-gauche, bas-droite)
• Opacité : slider 0-100% (typiquement 60-80% pour un effet discret)
• URL au clic : lien externe ouvert quand le visiteur clique sur le logo (votre site, votre page LinkedIn…)

Couleur d’accent (audio)

Color picker spécifique au lecteur audio, pour la forme d’onde et les éléments interactifs.

Étape 6 : Liens directs et identifiants

Section qui rassemble les 4 identifiants techniques copiables, utiles pour les intégrations custom.

À retenir : ne partagez pas l’URL de téléchargement source dans des contextes publics. C’est un lien direct vers le fichier original, contournant les protections du lecteur (mot de passe, expiration de partage…). Réservez-la aux scripts internes et aux prestataires explicitement autorisés.

Étape 7 : Référence API

La page intègre des exemples API prêts à copier dans 3 langages :

• cURL (terminal, scripts shell)
• JavaScript (Node.js, frontend)
• Python (scripts back-end, automatisation)

Deux endpoints documentés directement avec votre assetId :

• GET Récupérer les métadonnées de l’embed — pour afficher dynamiquement les options ou diffuser via une intégration custom
• POST Récupérer l’URL de lecture — pour générer un flux à la demande dans un contexte authentifié

Pour le détail complet de l’API (tokens, scopes, autres endpoints, gestion d’erreurs) voir :

• Accéder à l’API Videas (développeurs)
• La documentation API Videas (interactive, toujours à jour)

Bonnes pratiques

Privilégier les préréglages aux configurations à la volée

Si vous publiez plus de 5 embeds, créez un préréglage dès le second. Vous gagnerez du temps à chaque nouvel embed et vous garantirez la cohérence visuelle de votre site. La promotion espace → organisation est précieuse quand un format se révèle adapté à l’ensemble de votre activité.

Documenter le préréglage dans son nom

“Préréglage 1” est inutile. Préférez : “Light + autoplay muted — landing page produit” ou “Sombre + logo BL + accent corporate — embed témoignages”. Le nom doit suffire à savoir où et pourquoi utiliser ce préréglage.

Tester avec l’aperçu en direct avant de copier

L’aperçu en direct vous évite de coller un embed mal configuré sur votre site, de constater le problème en production, et de revenir corriger. Toujours vérifier l’aperçu avant un déploiement — surtout sur les options visuelles (couleur, logo, thème).

Réinitialiser un préréglage par défaut prudemment

Le préréglage par défaut s’applique à tout nouvel embed dans le scope. Si vous le changez en cours de route, les anciens embeds gardent leur configuration (ils ne se mettent pas à jour automatiquement). Mais tout nouvel embed créé après le changement utilisera le nouveau défaut.

Sécuriser l’usage de l’API

Les exemples API affichés utilisent des tokens d’authentification. Suivez les bonnes pratiques de gestion : tokens dédiés par intégration, scopes minimaux, rotation régulière. Voir Accéder à l’API Videas (développeurs) pour la procédure complète.

En résumé

• La page Développeur d’un média (onglet dédié ou bouton Options avancées depuis la modale Intégrer) regroupe 5 sections : code embed avec aperçu, préréglages, paramètres du lecteur, apparence, liens directs et identifiants, référence API
• Aperçu en direct : visualisez le rendu avant de coller dans votre site
• Préréglages : sauvegardez en scope espace ou organisation, définissez un défaut, promouvez un préset workspace au niveau organisation, marquez par étoile
• Paramètres avancés uniques à cette page : Démarrer à (timecode), Page de départ (PDF), Durée du diaporama (image), Cadrage du poster (vidéo)
• Apparence : thèmes (clair/sombre, +coloré sur audio), couleur principale par color picker, logo (position, opacité, URL au clic)
• 4 identifiants techniques copiables : asset ID, embed ID, URL embed, URL de téléchargement source (à réserver aux scripts internes)
• Référence API intégrée : exemples cURL, JavaScript, Python avec votre assetId ; pour le détail des tokens et scopes, voir l’article API dédié

Articles liés

• Intégrer une vidéo sur votre site web (embed)
• Créer et personnaliser un thème de lecteur
• Sécuriser vos intégrations avec des tokens et domaines
• Intégrer une collection de vidéos sur votre site
• Accéder à l’API Videas (développeurs)