Retarder l'instanciation du joueur
Délai d'instanciation
Il existe quelques cas d'utilisation dans lesquels vous souhaiterez utiliser le code d'implémentation du lecteur avancé (intégré dans la page), mais retarder l'instanciation du lecteur. Pour ce faire, vous devez modifier le <videos-js>
les attributs de la balise et utilisez le bc()
méthode pour initialiser le lecteur. Notez que la méthode peut prendre l'ID du joueur ou l'élément de lecteur lui-même comme argument.
Modifier la balise video-js
Lorsque vous retardez l'instanciation du lecteur, vous NE POUVEZ PAS utiliser tous les <video-js>
les attributs de la balise, ou le joueur sera instancié. Vous devez supprimer trois des attributs du code avancé standard (incorporé dans la page). Les attributs qui doivent être supprimés sont:
data-account
data-player
data-video-id
Cela laisse les attributs suivants dans le <video-js>
marque:
data-embed
class
controls (optional)
La raison pour laquelle les attributs doivent être supprimés car l'un de ces trois attributs demeure, cela provoquera l'instanciation de Brightcove Player.
Le code avancé utilisé doit être modelé sur l'extrait de code suivant. Notez qu'un id
est ajouté à la balise.
<video-js id="myPlayerID"
data-embed="default"
controls=""></video-js>
<script src="https://players.brightcove.net/1507807800001/5e28670f-28ce-4ed6-8809-227784965834_default/index.min.js"></script>
Ces modifications apportées au code avancé et au code JavaScript ci-dessous fonctionnent ensemble pour retarder l'instanciation du lecteur.
JavaScript utilisé
Une pratique très courante consiste à utiliser un code similaire au suivant pour se préparer à interagir par programmation avec le lecteur:
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this;
});
Cette approche ne peut pas être utilisée car elle instancierait le joueur. Au lieu de cela, vous utiliserez le bc()
méthode pour instancier le lecteur APRÈS que d'autres préférences aient été définies. Ce bc()
est utilisée pour créer une nouvelle instance de Brightcove Player et est normalement appelée automatiquement lors de l'utilisation de <video-js>
tag, à moins que les étapes détaillées ici ne soient suivies.
- Lignes 2-3 : Déclarez une variable pour le joueur et récupérez l'
video-js
élément. - Lignes 4 à 5 : Utilisez la
setAttribute()
méthode JavaScript pour définir ledata-account
etdata-player
. Ceci est important pour le suivi des analyses et d'autres services. - Ligne 6 : Utilise la
setAttribute()
méthode JavaScript pour définir l'ID vidéo. - Ligne 9 : Utilise la
bc()
méthode pour initialiser le lecteur. - Lignes 12-15: Lecture programmatique de la vidéo. En attendant que l'
loadedmetadata
événement soit distribué, la vidéo a été récupérée par le catalogue avant d'essayer de la lire.
<script type="text/javascript">
var myPlayer,
vTag = document.getElementById('myPlayerID');
vTag.setAttribute('data-account', 1507807800001);
vTag.setAttribute('data-player', 'BdGVdOd36');
vTag.setAttribute('data-video-id', 2114345470001);
// Use the bc() method to initialize the Brightcove Player
myPlayer = bc(vTag);
// Mute (in case there is an audio track, in which case play won't work) and play the video
myPlayer.on('loadedmetadata',function(){
myPlayer.muted(true);
myPlayer.play();
});
</script>
- Lignes 2-3 : Déclarez une variable pour le joueur et récupérez l'
video-js
élément. - Lignes 4 à 5 : Utilisez la
setAttribute()
méthode JavaScript pour définir ledata-account
etdata-player
. Ceci est important pour le suivi des analyses et d'autres services. - Ligne 8 : Utilise la
bc()
méthode pour initialiser le lecteur. - Ligne 10 : Définit la valeur
src
pour le joueur. Il est très important de définir à la fois l'objet sourcesrc
ettype
pour l'objet source. Des problèmes peuvent survenir dans certains navigateurs si la première option de l'ordre de la technologie de lecture ne correspond pas au type de vidéo. - Ligne 13 : Lecture programmatique de la vidéo. Bien sûr, cela n'est pas nécessaire.
<script type="text/javascript">
var myPlayer,
vTag = document.getElementById('myPlayerID');
vTag.setAttribute('data-account', 1507807800001);
vTag.setAttribute('data-player', 'BdGVdOd36');
// Use the bc() method to initialize the Brightcove Player
myPlayer = bc(vTag);
myPlayer.src({ src: "//solutions.brightcove.com/bcls/assets/videos/Tiger.m3u8", type: "application/x-mpegURL"});
// Mute (in case there is an audio track, in which case play won't work) and play the video
myPlayer.muted(true);
myPlayer.play();
</script>
Non id
sur le joueur
Si, pour une raison quelconque, vous ne souhaitez pas utiliser id
avec votre lecteur, vous pouvez utiliser le code suivant pour retarder l'instanciation.
- Lignes 3 à 4 : Déclarez une variable pour le joueur et récupérez l'
video-js
élément. - Lignes 7 à 8 : Utilisez la
setAttribute()
méthode JavaScript pour définir ledata-account
etdata-player
. Ceci est important pour le suivi des analyses et d'autres services. - Ligne 9 : Utilise la
setAttribute()
méthode JavaScript pour définir l'ID vidéo. - Ligne 12 : Utilise la
bc()
méthode pour initialiser le lecteur. - Lignes 15 à 18: Lecture programmatique de la vidéo. En attendant que l'
loadedmetadata
événement soit distribué, la vidéo a été récupérée par le catalogue avant d'essayer de la lire.
<script type="text/javascript">
// Retrieve the element by tag name, returns an array so use the zeroth array element
var myPlayer,
vTag = document.getElementsByTagName('video-js')[0];
// Assign the needed attributes
vTag.setAttribute('data-account', 1507807800001);
vTag.setAttribute('data-player', 'BdGVdOd36');
vTag.setAttribute('data-video-id', 2114345470001);
// Use the bc() method to initialize the Brightcove Player
myPlayer = bc(vTag);
// Mute (in case there is an audio track, in which case play won't work) and play the video
myPlayer.on('loadedmetadata',function(){
myPlayer.muted(true);
myPlayer.play();
});
</script>
- Lignes 3 à 4 : Déclarez une variable pour le joueur et récupérez l'
video-js
élément. - Lignes 7 à 8 : Utilisez la
setAttribute()
méthode JavaScript pour définir ledata-account
etdata-player
. Ceci est important pour le suivi des analyses et d'autres services. - Ligne 11 : Utilise la
bc()
méthode pour initialiser le lecteur. - Ligne 13 : Définit la valeur
src
pour le joueur. Il est très important de définir à la fois l'objet sourcesrc
ettype
pour l'objet source. Des problèmes peuvent survenir dans certains navigateurs si la première option de l'ordre de la technologie de lecture ne correspond pas au type de vidéo. - Ligne 16 : Lecture programmatique de la vidéo. Bien sûr, cela n'est pas nécessaire.
<script type="text/javascript">
// Retrieve the element by tag name, returns an array so use the zeroth array element
var myPlayer,
vTag = document.getElementsByTagName('video-js')[0];
// Assign the needed attributes
vTag.setAttribute('data-account', 1507807800001);
vTag.setAttribute('data-player', 'BdGVdOd36');
// Use the bc() method to initialize the Brightcove Player
myPlayer = bc('vTag');
myPlayer.src({ src: "//solutions.brightcove.com/bcls/assets/videos/Tiger.m3u8", type: "application/x-mpegURL"});
// Mute (in case there is an audio track, in which case play won't work) and play the video
myPlayer.muted(true);
myPlayer.play();
</script>
CSAI avec basculement publicitaire SSAI
Lorsque le basculement publicitaire est activé, le Brightcove Player détecte si un bloqueur de publicité est présent dans le navigateur. Sinon, vos publicités côté client (CSAI) sont lues. Si un bloqueur de publicités est détecté, le lecteur demande automatiquement vos publicités côté serveur (SSAI). Pour plus de détails, consultez le SSAI: Détection des blocs publicitaires et basculement automatique document.
Par défaut, appeler le bc()
La méthode force le lecteur à s'initialiser immédiatement. Si vous souhaitez utiliser le basculement publicitaire avec le bc()
méthode, vous devez attendre que le joueur vérifie si un bloqueur de publicité est présent. Vous pouvez le faire avec le code suivant:
bc.usingAdBlocker().then(function() {
// The promise callback receives a true/false result, which is stored
// internally, so future bc() calls will use it. There is no need to
// handle it yourself.
//
// You can pass custom arguments to bc, as normal, if needed.
bc();
});
Exemple
Voici un exemple de code.
HTML
Ceci est le HTML pour l'exemple.
<video-js id="myPlayerID"
data-embed="default"
data-application-id=""
controls=""
width="640"
height="360"></video-js>
<script src="//players.brightcove.net/1752604059001/W6RmT8TVL_default/index.min.js"></script>
JavaScript
Ceci est le JavaScript pour l'exemple.
<script type="text/javascript">
// +++ Define the player options +++
var options = {
controlBar: {
volumePanel: {
inline: false,
vertical: true
}
}
};
// +++ Add the player attributes +++
var myPlayer,
myPlayerEl = document.getElementById("myPlayerID");
myPlayerEl.setAttribute('data-account', 1752604059001);
myPlayerEl.setAttribute('data-player', 'W6RmT8TVL');
myPlayerEl.setAttribute('data-video-id', 5802784116001);
// +++ Create the player +++
bc.usingAdBlocker().then(function() {
myPlayer = bc(myPlayerEl, options);
// +++ Optionally, mute and start playback +++
myPlayer.on('loadedmetadata',function(){
myPlayer.muted(true);
myPlayer.play();
});
});
</script>