Base de connaissances Médias Pages Web intégrées
Comment développer des pages Web intégrées pour les couches LiveU Studio ?

Voici quelques détails techniques lors de la création d'une page Web à intégrer dans l'éditeur de couche LiveU Studio :

1. Avoir un fond transparent


La transparence ne doit pas être gérée avec un canal alpha vert (ou une clé chroma) mais plutôt avec la transparence css activée et appliquée au corps de la page HTML.
Soit ajouter la règle css suivante :

body {
background-color:rgba(0,0,0,0);
}

ou le définir en ligne :

<body style="background-color:rgba(0,0,0,0);">

2. Lors de l'intégration de la page Web sur LiveU Studio, les interactions utilisateur ne sont pas autorisées. (Pensez à la page Web qui s'ouvre sur un navigateur du côté du serveur)

Cela a deux conséquences :

  • La page intégrée à LiveU Studio ne peut en aucun cas être cliquée ou utilisée de quelque manière que ce soit.
  • Les paramètres ne peuvent pas être sélectionnés ni mémorisés avec une méthode de stockage de données locale (par exemple, pas de paramètres sauvegardés avec les cookies).

Des paramètres spécifiques pour la page intégrée doivent être insérés à l'intérieur de la chaîne de requête URL ou de la structure de chemin, par exemple https://yourpagetoembed?setting1=test&setting2=option 

Concernant l'erreur "X-Frame-Options

Une erreur "X-Frame-Options" sera affichée comme suit :

"Refus d'afficher ''https://your-website'' dans un cadre parce que 'X-Frame-Options' est réglé sur 'XXX'".

Pour corriger cette erreur, modifiez les en-têtes de réponse et/ou les métadonnées de votre site web si vous y avez accès. Si vous ne le faites pas, cela signifie que le mode d'intégration est bloqué par la politique du site web.

- En-tête "X-Frame-Options" : la valeur autorisée est "ALLOWALL" ou "ALLOW-FROM https://www.LiveU Studio" si vous voulez juste autoriser LiveU Studio
- En-tête "Access-Control-Allow-Origin" : la valeur autorisée est "*". Vous pouvez également supprimer l'en-tête ou y ajouter https://www.LiveU Studio.

Plus d'infos:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

Fuseau horaire : vous devez avoir un fuseau horaire fixe (l'heure sur votre machine et sur nos serveurs n'est pas identique).

Nous vous recommandons d'utiliser la dernière version du navigateur Chrome, merci de vérifier également dans vos paramètres Chrome que les cookies sont acceptés sur tous les sites (sinon vous aurez des problèmes d'affichage du panneau de contrôle d'LiveU Studio).

3. Comment savoir si c'est LiveU Studio qui charge ma page ? 


https://developer.mozilla.org/fr/docs/Web/API/Document/referrer

Pour détecter la page source, vous pouvez utiliser https://www.whatismyreferer.com/ (ajoutez cette page en tant que nouvelle page web dans le studio d'LiveU Studio).

Si le nom d'hôte est program.studio.liveu.tv, cela signifie que cette URL est liée au program LiveU Studio.

Si le nom d'hôte est *.studio.liveu.tv, cela signifie que cette URL est liée à la preview d'LiveU Studio.

Vous avez d'autres questions ?
Cliquez ici pour accéder à notre moteur de recherche de la base de connaissances.  

Vous ne trouvez pas la bonne réponse ?
Contactez l'équipe d'assistance d'LiveU Studio via notre Live Chat.