Options disponibles pour le code d'intégration avancé (dans la page)

Dans cette rubrique, vous découvrirez l'utilisation et la configuration du Avancée code intégré. Cette version de l'implémentation du lecteur est également appelée En page ou embed_in_page code intégré.

Introduction

le Intégration avancée (encart) code vous permet de faire exister le lecteur directement dans la page HTML, pas dans une iframe. Cela offre les avantages d'une facilité d'accès au lecteur et aux propriétés et événements associés. En utilisant le lecteur non-iframe, vous perdez la facilité d'utilisation du lecteur en tant qu'unité unique et contenue dans les applications de médias sociaux et le partage. Voir le Choisir le bon code d'intégration document pour plus d'informations.

Utilisation

Pour utiliser le intégration dans la page code suivez ces étapes:

  1. Utilisez le JOUEURS module pour créer un lecteur.
  2. Allez au MÉDIAS module et publiez une vidéo à l'aide du lecteur nouvellement créé.
  3. Copiez le Avancée code intégré. Le code HTML sera similaire à ce qui suit :
      <video-js data-video-id="4093372393001"
        data-account="1507807800001"
        data-player="ry3j6rsze"
        data-embed="default"
        data-application-id=""
        controls=""></video-js>
      <script src="https://players.brightcove.net/1507807800001/ry3j6rsze_default/index.min.js"></script>
  4. Copiez le code HTML depuis le navigateur et collez-le dans body la page HTML complète.
  5. Parcourez la page HTML pour voir le lecteur fonctionne.

Lorsque vous publiez des vidéos à l'aide du module Media, vous pouvez utiliser l'URL du lecteur pour prévisualiser la vidéo ou copier le code d'intégration iframe ou In-Page à coller dans votre page Web ou application.

Remarque : Clique le Raccourcir à côté de l'URL d'aperçu pour générer une URL d'aperçu raccourcie.

Les Standard Le lien affiche le code d'intégration iframe et le Avancée Le lien affiche le code d'intégration In-Page. Du point de vue de l'API de gestion des joueurs, vous verrez également le Avancée code du joueur appelé le embed_in_page la mise en oeuvre.

Code intégré dans la page (Avancé)

Le code intégré typique de la page s'affiche comme suit :

  <video-js data-video-id="5076962725001"
  data-account="1507807800001"
  data-player="BkTGbgSq"
  data-embed="default"
  data-application-id="" 
  controls=""></video-js>
  <script src="https://players.brightcove.net/1507807800001/BkTGbgSq_default/index.min.js"></script>
  

Bien que l'intégration du code de publication dans la page puisse être plus complexe, il est préférable d'utiliser le code In-Page lorsque la page contenant le lecteur doit communiquer avec le lecteur. Voici quelques exemples pour savoir quand utiliser le code intégré dans la page :

  • Le code de la page contenant doit écouter et agir sur les événements des joueurs.
  • Le lecteur utilise des styles de la page parente
  • Le code iframe entraîne l'échec de la logique de l'application, comme une redirection à partir de la page parente

Même si votre implémentation finale n'utilise pas le code intégré iframe, vous pouvez toujours utiliser le code In-Page avec un plugin pour votre JavaScript et un fichier séparé pour votre CSS. Cela encapsule votre logique afin que vous puissiez facilement l'utiliser sur plusieurs joueurs.

Recommandation

Il est recommandé d'utiliser l'implémentation iframe à moins qu'une logique d'application ne nécessite l'utilisation du code sur la page. Si vous utilisez le module Audience pour suivre l'engagement des spectateurs, le code d'intégration sur la page (avancé) doit être utilisé.

Attributs

De nombreux attributs sont disponibles pour le <video-js> tag pour fournir des informations supplémentaires sur la manière dont un joueur doit se comporter. Le tableau ci-dessous détaille les attributs disponibles.

Attribut Description Type de données
autoplay

Indique que le joueur doit commencer à jouer immédiatement, sur les plates-formes où cela est autorisé.

Si la valeur booléenne autoplay est définie, le comportement de lecture automatique natif du navigateur est utilisé.

En cas d'échec, le lecteur affichera le "gros bouton de lecture" comme si la fonction de lecture automatique était désactivée.

La lecture automatique d'une vidéo peut être une situation complexe. Voir le Considérations sur la lecture automatique document pour plus de détails.

Booléen
class Attribut HTML standard auquel sera attribué le vidéo-js valeur par défaut. Chaîne
controls Déterminez si les commandes doivent être visibles dans le lecteur. Booléen
crossorigin S'il est vrai, l'élément sous-jacent <video-js> aura crossorigin="anonymous". Cela signifie que toutes les vidéos ou pistes de texte insérées dans le lecteur doivent comporter des en-têtes CORS. Booléen
data-account L'ID de compte, parfois également appelé ID éditeur. Chaîne
data-ad-config-id ID de configuration d'annonce SSAI de livraison dynamique. Chaîne
data-application-id Permet la réutilisation d'un joueur unique, mais différencie les analyses par site ou par application. Voir le Ajout d'un ID d'application au code d'intégration du lecteur document pour tous les détails. Chaîne
data-delivery-config-id ID de configuration des règles de livraison dynamique Chaîne
data-embed Affiche des informations si vous utilisez des incorporations (relations de joueur parent-enfant). Chaîne
data-player Définit l'ID du joueur. Chaîne
data-playlist-id Définit l'ID ou l'ID de référence de la liste de lecture dans le lecteur. Chaîne
data-playlist-video-id Définit la vidéo initiale à lire dans la vidéo, qui doit figurer dans la liste de lecture désignée. Chaîne
data-start-time Définit le décalage horaire à partir duquel une vidéo va commencer à lire. Voir le Lien profond document pour plus de détails. Chaîne
data-video-id Définit l'ID ou l'ID de référence de la vidéo dans le lecteur. Chaîne
height Définit la hauteur d'affichage de la vidéo, mesurée en pixels SEULEMENT. Pour plus de détails sur l'utilisation des pourcentages de la hauteur, voir Dimensionnement du lecteur document. Numéro
language Définit la langue (à l'aide d'un code de langue valide, généralement deux lettres) du lecteur. Chaîne
languages Tableau de chaînes de caractères permettant d'inclure les langues spécifiées dans le lecteur. baie
loop Déclenchez la vidéo dès qu'elle se termine. Booléen
muted Met en sourdine le son de la vidéo. Booléen
playsinline Si la plate-forme et le système d'exploitation le permettent, affichera le contenu vidéo dans la zone de lecture du lecteur, ce qui signifie qu'il ne s'affichera pas en plein écran ou dans une fenêtre indépendante et redimensionnable; fonctionne sur iPhone et iPad Booléen
preload Indique au navigateur si les données vidéo doivent commencer ou non à télécharger dès le chargement de la balise vidéo. Les valeurs possibles sont none, metadata ou auto. Consultez la section suivante pour plus de détails. Chaîne
techOrder L'ordre dans lequel les techniques de lecture doivent être utilisées. baie
width Définit la largeur d'affichage de la vidéo, mesurée en pixels SEULEMENT. Pour plus de détails sur l'utilisation des pourcentages de la largeur, voir le Dimensionnement du lecteur document. Numéro

détails de préchargement

L'attribut de préchargement indique au navigateur si les données vidéo doivent commencer ou non le téléchargement dès que la balise vidéo est chargée. Les options sont auto , metadata , et none. Pour la technologie de lecture HLS, les paramètres signifient des choses légèrement différentes et indiquées ci-dessous.

  • auto(défaut): Commencez à charger la vidéo immédiatement (si le navigateur est d'accord). Certains appareils mobiles comme les iPhones et les iPads ne préchargeront pas la vidéo afin de protéger la bande passante de leurs utilisateurs. C'est pourquoi la valeur est appelée auto et non pas quelque chose de plus final comme vrai.

  • :metadata Chargez uniquement les métadonnées de la vidéo, qui incluent des informations telles que la durée et les dimensions de la vidéo.
  • :none Ne préchargez aucune des données vidéo. Cela attendra que l'utilisateur clique sur Lecture pour commencer le téléchargement. Notez que sur iOS, il peut y avoir un téléchargement de segments même avec ce paramètre. Voir le Lecteur Brightcove et iOS document pour plus d'informations.
  <video-js preload ...>
  or
  { "preload": "auto" }