Événements joueur

Aperçu

Le Brightcove Player a de nombreux événements pour vous permettre de contrôler la lecture vidéo. Cette rubrique fournit une vue d'ensemble des différents types d'événements.

Une liste complète des événements Brightcove Player se trouve dans le API Player Methods / Events document de référence. Ce document reflète les événements qui font partie du code réel qui compose le lecteur.

Événements médiatiques

le Norme de vie HTML document est une excellente ressource pour obtenir des informations sur le développement de HTML et les API nécessaires aux applications Web. Il s'agit d'un document «vivant» tenu à jour par le groupe de travail sur la technologie des applications hypertextes Web (WHATWG), qui est une communauté croissante de personnes intéressées par l'évolution du Web.

Le Brightcove Player s'exécute au-dessus du framework HTML, ce qui déclenche les éléments suivants Événements médiatiques.

Voici quelques termes associés aux événements de ce document:

bloqué

Un MediaController est considéré comme bloqué si la lecture a été mis en pause. Un élément multimédia est bloqué si son contrôleur est un contrôleur multimédia bloqué.

MediaController

UNE MediaController est un objet qui coordonne la lecture de plusieurs éléments multimédias.

élément média

UNE élément média présente des données audio, ou des données vidéo et audio, à l'utilisateur.

esclave

Par défaut, chaque élément multimédia n'a pas MediaController. Lorsque des éléments multimédias sont associés à un MediaController , on dit qu'ils sont esclave au contrôleur. Le contrôleur modifie la vitesse de lecture et le volume de chacun des éléments multimédias qui lui sont asservis. Si l'un des éléments asservis cale de manière inattendue, le contrôleur arrêtera les autres éléments asservis.

Événements de mise en mémoire tampon et de QoS

Voici un sous-ensemble d'événements liés à la mise en mémoire tampon et à la qualité de service (QoS):

Événements de démarrage

Un certain nombre d'événements se produisent lorsque le lecteur est initialisé et se prépare à lire une vidéo. Ils sont répertoriés ici dans l'ordre où ils seront expédiés:

• :loadstart Envoyé lorsque le lecteur est initialisé, et s'il est réinitialisé dans le cas de lui donner une nouvelle source à jouer

• :loadedmetadata Envoyé lorsque le joueur dispose des informations de durée et de dimension initiales, en d'autres termes, lorsque le premier segment est téléchargé. Pour les vidéos en direct, le loadedmetadata l'événement ne sera pas diffusé tant que l'utilisateur n'aura pas cliqué sur jouer En effet, les vidéos en direct ne commencent pas à télécharger des segments tant que l'utilisateur ne clique pas sur la lecture.
• :loadeddata Envoyé lorsque le lecteur a téléchargé des données à la position de lecture actuelle

Le CodePen suivant montre les événements de démarrage écoutés et distribués. Notez que si vous passez la souris sur CodePen, vous pouvez cliquer sur le bouton REDIFFUSION bouton situé en bas à droite pour voir à nouveau l'envoi des événements. Si vous souhaitez tester le code, cliquez sur le bouton Modifier sur CODEPEN lien dans l'en-tête pour passer à l'environnement d'édition. Vous pouvez cliquer sur le JS bouton pour voir le JavaScript qui ajoute les écouteurs d'événements.

Voir le stylo Démo des événements de démarrage par Brightcove Learning Services (@bcls ) sur CodePen.

méthode ready ()

le ready() La méthode a une double personnalité en ce qu'elle ressemble à un événement, mais vous l'utilisez comme une méthode. Cette méthode / cet événement signifie que le joueur est prêt à recevoir des commandes.

le ready() diffère des écouteurs d'événements en ce que si la ready l'événement s'est déjà produit, il déclenchera le ready() méthode immédiatement. Vous verrez souvent la méthode utilisée comme suit pour fournir le point de départ du développement avec Brightcove Player:

videojs.getPlayer('myPlayerID').ready(function(){
  var myPlayer = this;
});

ready () vs on ('sharedmetadata', ...)

Notez que l'utilisation ready() fonctionne correctement si vous souhaitez interagir avec le lecteur, par exemple ajouter un plugin par programmation. Si vous souhaitez interagir immédiatement avec la vidéo, utilisez par exemple play() , l'extrait de code ci-dessus ne fonctionnera pas toujours correctement. Une meilleure approche serait d'écouter les loadedmetadata pour interagir avec la vidéo, par exemple:

videojs.getPlayer('myPlayerID').on('loadedmetadata',function(){
  var myPlayer = this;
  myPlayer.play();
});

En résumé, pour interagir avec le joueur, vous pouvez utiliser ceci:

videojs.getPlayer('myPlayerID').ready()

Si vous souhaitez interagir immédiatement avec la vidéo dans le lecteur, utilisez ceci:

videojs.getPlayer('myPlayerID').on('loadedmetadata',function(){})

Événements publicitaires

Pour inclure des bibliothèques de publicités et des fonctionnalités dans votre lecteur, vous pouvez utiliser le Plug-in IMA3 ou la Plugin FreeWheel. Ceci est construit au-dessus du cadre des annonces videojs (videojs-contrib-ads). Ces deux plugins publicitaires peuvent diffuser les événements publicitaires indiqués dans le tableau suivant. Chacun a également des événements spécifiques à la mise en œuvre.

Événement bc-catalog-error

Il est possible que la gestion des erreurs dans la ready() section normale du bloc de script puisse causer des problèmes. Par exemple, il peut arriver que l' bc-catalog-error événement soit distribué avant que le joueur soit prêt, et si vous écoutez l'erreur dans la ready() section, vous ne serez pas en mesure de gérer l'erreur. Ce problème peut se produire lorsque vous utilisez le géofiltrage, une vidéo n'est pas publiée, une vidéo est hors de la plage de planification ou dans un autre compte. Pour une discussion complète et des exemples de manipulation du bc-catalog-error événement, voir le Catalogue des joueurs document.

progression et mise à jour du temps

Une confusion peut survenir quant aux différences entre les progress et timeupdate événements. Le Brightcove Player s'appuie sur la vidéo HTML5, et dans cette norme, le progress l'événement est envoyé lorsque le navigateur télécharge des données. le timeupdate L'événement est distribué lorsque la position de lecture actuelle a changé.

Cela peut prêter à confusion pour les utilisateurs du Smart Player de Brightcove, car dans cette API, le progress l'événement fait quoi timeupdate fait dans l'API Brightcove Player.

Attention lors de la suppression des écouteurs timeupdate

Dans certains cas, vous souhaiterez peut-être supprimer un écouteur d'événement que vous avez ajouté au timeupdate un événement. Un cas d'utilisation est présenté dans le Exemple de lecteur Brightcove: Inscription pour jouer après l'aperçu document. Dans cette situation, vous souhaitez que le lecteur se mette en pause dans une certaine période et timeupdate pour le contrôle de l'heure, puis utilisez une définition de fonction de gestionnaire d'événements anonyme. Vous ne souhaitez mettre en pause qu'une fois, vous devez donc supprimer l'écouteur d'événements. Vous ne voulez PAS simplement faire:

myPlayer.off('timeupdate');

Bien sûr, cela supprime TOUS les écouteurs d'événements timeupdate , et parmi d'autres problèmes, cela empêchera la minuterie d'avancer. Ce qui doit être fait est de créer une fonction en utilisant la syntaxe de définition de fonction normale (une déclaration de fonction), puis de supprimer JUSTE le seul écouteur d'événement. Le code abrégé est affiché ici:

 // Add the event handler
myPlayer.on('timeupdate', timeupdateHandler);

// Handle the event then remove JUST this event listener on timeupdate
function timeupdateHandler(evt) {
  ...
  myPlayer.off('timeupdate', timeupdateHandler);
}

Événements analytiques

Un événement est déclenché chaque fois qu'une balise est envoyée au collecteur de données Analytics. Vous pouvez écouter n'importe quelle balise ou des balises spécifiques.

Écoutez toutes les balises

Vous pouvez suivre toutes les balises d'analyse envoyées en écoutant le analytics-beacon un événement:

player.on('analytics-beacon', function(e) {
  videojs.log('sent a(n) ' + e.params.event + ' beacon!', e.params);
});

Écoutez des balises spécifiques

Vous pouvez suivre les balises d'analyse spécifiques envoyées en écoutant le analytics-beacon-{beacon_name} un événement.

{beacon_name} est le nom de l'un des événements du lecteur qui sont envoyés au collecteur de données. Pour une liste complète de ces événements, consultez le Référence de l'API de collecte de données.

Exemple

player.on('analytics-beacon-video-impression', function(e) {
  videojs.log('sent an impression beacon!', e.params);
});

Pas de prise en charge du chaînage de méthodes

Depuis la version 6 de la méthode Brightcove Player, le chaînage avec des événements n'est plus pris en charge. Cela signifie que vous NE POUVEZ PAS faire ceci:

player.on(event, function () {})
.on(event, function () {})
.on(event, function () {})
.on(event, function () {});