Présentation du chargeur de lecteur
Pour les utilisateurs de Brightcove Player ne souhaitant pas copier et coller les implémentations du lecteur intégré ou iframe dans la page, ce module est intégré à leur application Web et fournit un moyen d'utiliser Brightcove Players sans avoir besoin d'écrire un code d'intégration pour télécharger leur joueurs et intégrez-les. Cet outil résout le problème avec une bibliothèque Brightcove qui peut télécharger n'importe quel Brightcove Player publié et l'intégrer dans le DOM.
Cette bibliothèque prend en charge les navigateurs à feuilles persistantes courants, Chrome, Firefox, Edge et Safari.
Ce document fournit essentiellement des exemples d'utilisation du Brightcove Player Loader. Pour plus de détails, consultez la bibliothèque brightcove / lecteur-chargeur Dépôt GitHub.
Il existe un pack Web qui peut être utilisé avec Brightcove Player. Les détails à ce sujet peuvent être trouvés dans le player-loader-webpack-plugin Dépôt GitHub.
Installation
La bibliothèque est installée à l'aide de NPM, à l'aide des éléments suivants :
npm install --save @brightcove/player-loader
Y compris la bibliothèque
Pour différentes méthodes d'inclusion de la bibliothèque pour votre utilisation, veuillez consulter le Dépôt GitHub pour la bibliothèque.
Mise en œuvre à l'aide d'une promesse
Vous pouvez utiliser un Promesse JavaScript avec la bibliothèque. Les promesses ne sont pas nécessaires pour que cette bibliothèque fonctionne, mais elles sont recommandées. Par défaut, cette bibliothèque recherchera une promesse globale. Cependant, vous pouvez explicitement fournir une implémentation Promise via le Promise
paramètre, détaillé plus loin dans ce document.
Ce qui suit montre une implémentation de la bibliothèque à l'aide d'une promesse. Un concept clé est que vous obtenez une référence au joueur en utilisant var myPlayer = success.ref;
dans le then
section de traitement de la promesse:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
.video-js {
height: 344px;
width: 610px;
}
</style>
</head>
<body>
<script src="brightcove-player-loader.min.js"></script>
<div id="theDiv">
</div>
<script>
brightcovePlayerLoader({
refNode: document.querySelector('#theDiv'),
accountId: '1752604059001',
playerId: 'wHBRh9M3o',
videoId: '4607357817001'
})
.then(function(success) {
var myPlayer = success.ref;
console.log('success', success);
myPlayer.on('loadedmetadata',function(){
myPlayer.muted(true);
myPlayer.play();
});
})
.catch(function(error) {
console.log('error', error);
})
</script>
</body>
</html>
Implémentation à l'aide de callbacks
Vous pouvez également implémenter le chargeur de lecteur à l'aide de rappels via le onSuccess
et onFailure
fonctions de rappel.
Ce qui suit montre une implémentation de la bibliothèque à l'aide de rappels. Un concept clé est que vous obtenez une référence au joueur en utilisant var myPlayer = success.ref;
dans le onSuccess
fonction de rappel:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
.video-js {
height: 344px;
width: 610px;
}
</style>
</head>
<body>
<script src="brightcove-player-loader.min.js"></script>
<div id="theDiv">
</div>
<script>
brightcovePlayerLoader({
refNode: document.querySelector('#theDiv'),
accountId: '1752604059001',
playerId: 'wHBRh9M3o',
videoId: '4607357817001',
onSuccess: function(success) {
var myPlayer = success.ref;
console.log('success', success);
myPlayer.on('loadedmetadata',function(){
myPlayer.muted(true);
myPlayer.play();
});
},
onFailure(error) {
console.log('error', error);
}
});
</script>
</body>
</html>
Utilisation des restrictions de lecture
Pour utiliser les restrictions de lecture avec le chargeur de lecteur Brightcove, il suffit d'obtenir une référence au lecteur et de lui transmettre la clé Web JSON (JWT).
Voici un exemple :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Brightcove Player</title>
<meta charset="UTF-8">
<script crossorigin
src="player-loader/dist/brightcove-player-loader.min.js"></script>
</head>
<body>
<main>
<h1>Brightcove Player</h1>
<div id="theDiv"></div>
</main>
</body>
<script>
var myJwtToken = "your jwt token";
var myVideoId = "your video Id";
// +++ Add the Brightcove Player +++
brightcovePlayerLoader({
refNode: document.querySelector('#theDiv'),
accountId: 'your account Id',
playerId: 'your player Id',
onSuccess: function (success) {
// Get a reference to the BC Player
var myPlayer = success.ref;
console.log('success', success);
myPlayer.ready(function () {
// This should ideally be set in the player configuration
myPlayer.catalog.setPolicyKey(null);
myPlayer.catalog.setBcovAuthToken(myJwtToken);
myPlayer.catalog.get({
id: myVideoId,
type: 'video'
}).
then(function (data) {
myPlayer.catalog.load(data);
myPlayer.muted(true);
myPlayer.play();
}).
catch(function (error) {
throw new Error(error);
});
});
},
onFailure(error) {
console.log('error', error);
}
});
</script>
</html>
Paramètres disponibles
- Nom:
accountId
-
Type de données : chaîne | numéro
La description:
Un identifiant de compte Video Cloud. - Nom:
applicationId
-
Type de données : chaîne
Description :
L'ID d'application à appliquer à l'intégration générée. - Nom:
catalogSearch
-
Type de données: chaîne | Objet
Description :
Une recherche dans le catalogue Video Cloud à effectuer. Cela peut être une simple recherche de chaîne ou un objet qui correspond au CataloguegetSearch()
méthode. Si une valeur autre que chaîne n'est pas sérialisable en JSON est donnée, ce paramètre sera ignoré. - Nom:
catalogSequence
-
Type de données : Array | Objet
La description:
Une séquence de catalogue Video Cloud à exécuter. Voir le CataloguegetLazySequence()
méthode pour plus d'informations. Si une valeur autre que chaîne n'est pas sérialisable en JSON est donnée, ce paramètre sera ignoré. - Nom:
embedId
-
Type de données:chaîne
La description:
ID d'intégration du lecteur Brightcove pour le lecteur. La valeur par défaut est'default'
. La valeur par défaut est correcte pour la plupart des utilisateurs. - Nom:
embedOptions
-
Type de données : Objet
La description:
Utilisé pour fournir certaines options pour la génération incorporée. Il s'agit notamment de :embedOptions.pip
booléen Si true
, enveloppera l'intégration dans un<div class="vjs-pip-container">
élément. Ceci doit être utilisé lorsque vous avez besoin d'assistance pour le Plug-in Brightcove Picture-in-Picture. La valeur par défaut estfalse
.embedOptions.playlist
booléen Si true
, ajoutera un<div class="vjs-playlist">
élément après l'intégration. Ceci doit être utilisé lorsque vous avez besoin d'assistance pour le Plug-in de l'interface utilisateur Brightcove Playlist. La valeur par défaut estfalse
.embedOptions.responsive
booléen | Objet Utilisé pour personnaliser le code d'intégration pour produire un lecteur de taille réactive à l'aide du intrinsic ratio approche wrapper. Lorsque la valeur est true, produira un code incorporé réactif avec un rapport hauteur / largeur 16: 9 qui remplira son conteneur. La valeur par défaut est false
.
Un objet peut être fourni pour personnaliser cela avec les sous-propriétés suivantes:- :
aspectRatio
Chaîne utilisée pour personnaliser le rapport hauteur / largeur sur une valeur autre que 16: 9 (par exemple, «4: 3»). - :
maxWidth
Une chaîne utilisée pour limiter la largeur maximale du joueur. Cela devrait utiliser des unités CSS, telles que des pixels (par exemple, «960px»).
embedOptions.unminified
booléen Si true
, utilisera la version non minifiée du lecteur. Cela peut être utile à des fins de débogage, mais entraîne le coût d'un téléchargement de lecteur plus important. Non recommandé pour la production! La valeur par défaut estfalse
. - :
- Nom:
embedType
-
Type de données : chaîne
La description:
Le type de code incorporé à produire. La valeur de ce paramètre doit être l'une des suivantes :'in-page'
oubrightcovePlayerLoader.EMBED_TYPE_IN_PAGE
: Également appelé code d'intégration avancé, il injecte le lecteur directement dans la page Web de niveau supérieur.'iframe'
oubrightcovePlayerLoader.EMBED_TYPE_IFRAME
: Également appelé code d'intégration de base, il injecte le lecteur en tant qu'élément <iframe>.
'in-page'
. - Nom:
onEmbedCreated
-
Type de données : Fonction (élément)
La description:
Un rappel utilisé pour personnaliser l'élément incorporé (soitvideo-js
élément ou uniframe
élément) avant d'être inséré dans le DOM ou personnalisé à la suite deembedOptions
et avant que le lecteur ne soit téléchargé et initialisé. L'élément embed peut être muté ou, si ce rappel renvoie un élément, cet élément sera utilisé comme élément incorporé. Les cas d'utilisation potentiels sont l'ajout / la suppression d'attributs ou l'ajout d'éléments enfants, tels que des sources ou des pistes. - Nom:
onFailure
-
Type de données : Fonction (erreur)
La description:
Une fonction de rappel qui permet de gérer les échecs lorsquePromise
n'est pas disponible ou n'est pas souhaité. Le fait de passer cette fonction empêchera le renvoi d'unPromise
. Il obtient un seulError
objet comme argument. La valeur renvoyée de cette fonction est ignorée. - Nom:
onSuccess
-
Type de données : Fonction (objet)
La description:
Une fonction de rappel qui permet de gérer les réussites lorsquePromise
n'est pas disponible ou n'est pas souhaité. Le fait de passer cette fonction empêchera le renvoi d'unPromise
. Il obtient un seulSuccess
objet comme argument. La valeur renvoyée de cette fonction est ignorée. - Nom:
options
-
Type de données : Objet
La description:
Un Video.js objet d'options passer lors du processus de création du joueur. Ces options prévaudront sur tous les paramètres spécifiés dans la configuration du lecteur Brightcove. Ce paramètre ne peut pas être utilisé avec les incorporations iframe. - Nom:
playerId
-
Type de données : chaîne
La description:
Un identifiant de joueur Brightcove Player. La valeur par défaut est'default'
. - Nom:
playlistId
-
Type de données : chaîne | numéro
Description :
Un ID de playlist Video Cloud ou un ID de référence de playlist. - Nom:
playlistVideoId
-
Type de données : chaîne | numéro
Description :
Un ID vidéo Video Cloud qui se trouverait dans la playlist résultante spécifiée par
playlistId
. Ce paramètre est ignoré siplaylistId
est manquant. - Nom:
Promise
-
Type de données : Fonction (Fonction)
La description:
Utilisé pour fournir explicitement unPromise
la mise en oeuvre. S'il est fourni, il sera utilisé à la place de toutPromise
. La valeur par défaut estwindow.Promise
- Nom:
refNode
-
Type de données : Element | chaîne
Description :
Required
L'élément DOM dans lequel le lecteur sera intégré. S'il n'est pas fourni comme élément DOM, il peut être fourni sous forme de chaîne, qui sera transmise àdocument.querySelector
. - Nom:
refNodeInsert
-
Type de données : chaîne
La description:
La manière dont le lecteur sera inséré par rapport à l'élément DOM de référence (spécifié par refNode). La valeur de ce paramètre doit être l'une des suivantes :'append'
oubrightcovePlayerLoader.REF_NODE_INSERT_APPEND
: Le joueur sera le dernier enfant du nœud de référence.'prepend'
oubrightcovePlayerLoader.REF_NODE_INSERT_PREPEND
: Le joueur sera le premier enfant du nœud de référence.'before'
oubrightcovePlayerLoader.REF_NODE_INSERT_BEFORE
: Le joueur sera le frère précédent du nœud de référence.'after'
oubrightcovePlayerLoader.REF_NODE_INSERT_AFTER
: Le joueur sera le prochain frère après le nœud de référence.'replace'
oubrightcovePlayerLoader.REF_NODE_INSERT_REPLACE
: Le nœud de référence sera supprimé et remplacé par le joueur.
- Nom:
videoId
-
Type de données : chaîne | numéro
La description:
Un ID vidéo ou un ID de référence vidéo Video Cloud.