Options disponibles pour le code d'intégration avancé (dans la page)
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:
- Utilisez le JOUEURS module pour créer un lecteur.
- Allez au MÉDIAS module et publiez une vidéo à l'aide du lecteur nouvellement créé.
- 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>
- Copiez le code HTML depuis le navigateur et collez-le dans
body
la page HTML complète. - 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 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" }