Exemple de joueur Brightcove : Lecture automatique avec le bouton Activer le son

Exemple de lecteur

La vidéo suivante se comportera différemment selon le navigateur / la plate-forme sur lequel vous exécutez la vidéo. Si la vidéo est automatiquement lu avec de l'audio, c'est ce qu'elle fait. Sinon, vous verrez la vidéo commencer à jouer, mais un bouton de réactivation du son apparaîtra. Si vous cliquez sur ce bouton, vous entendrez le son de la vidéo. En règle générale, lorsque vous utilisez iOS, Safari ou Chrome, une vidéo ne sera PAS lue automatiquement si la vidéo n'est pas désactivée. Cet exemple montre un moyen de lire automatiquement la vidéo et présente un bouton évident pour réactiver le son.

Si vous utilisez un pré-roll IMA3, vous voudrez voir le Utiliser une annonce pré-roll section dans ce document. Cette section détaille les modifications mineures que vous devrez appliquer au code indiqué dans le CodePen suivant pour que la fonctionnalité fonctionne avec une annonce pré-roll IMA.

Voir le stylo Lecture automatique avec le bouton Activer le son par Brightcove Learning Services ( rcrooks1969 ) sur CodePen.

Code source

Voir le solution complète sur GitHub.

Ressources API/Plugin utilisées

Configuration du lecteur/HTML

Cette section détaille toute configuration spéciale nécessaire lors de la création du lecteur. En outre, d'autres éléments HTML qui doivent être ajoutés à la page, au-delà du code d'implémentation du lecteur intégré dans la page, sont décrits.

Configuration du lecteur

En plus de l'inclusion standard d'un id dans le video tag, le playsinline l'attribut est ajouté pour la fonctionnalité iOS:

<div id="playerContainer" class="outer">
   <video-js id="myPlayerID"
     data-video-id="5755775186001"
     data-account="1752604059001"
     data-player="default"
     data-embed="default"
     data-application-id=""
     controls=""
     playsinline></video-js>
</div>

Autre HTML

Aucun autre élément HTML, autre que ceux mentionnés dans la section précédente, n'est ajouté à la page.

Flux d'application

La logique de base derrière cette application est la suivante :

• Utilisez le play() méthode pour tenter de lire la vidéo. L'appel à la méthode est assigné à une variable, qui contiendra la valeur retournée par un JavaScript promettre.
• Si la promesse est résolue (la vidéo est en cours de lecture), réactivez le lecteur et réglez le niveau de volume.
• Si la promesse est rejetée (la vidéo n'est PAS en cours de lecture), procédez comme suit:
  • Mettez le lecteur en sourdine et démarrez la lecture de la vidéo (ce qu'il fera maintenant puisque le lecteur est désactivé).
  • Créez dynamiquement un élément de bouton HTML, qui agit comme le réactiver bouton.
  • Ajouter un click écouteur d'événements sur le bouton.
  • Configurez le texte, le style, etc. du bouton
  • Placez le bouton sur le lecteur.

Essayez de lire la vidéo

Trouvez le code étiqueté :

// ### Wait for loadedmetadata then try to play video ###

Conformément à la procédure standard, vous attendez le loadedmetadata événement avant d'utiliser le play() méthode. La promesse renvoyée par l'appel de méthode est stockée dans le promise variable. Si la vidéo est en cours de lecture, vous pouvez réactiver le lecteur et régler le volume.

Lorsque la lecture automatique est empêchée, désactiver le lecteur et lire la vidéo

Trouvez le code étiqueté :

// ### If autoplay prevented: mute the video, play video and display unmute button ###

Ici le catch la logique de la promesse vous permet d'agir lorsque la vidéo n'a pas démarré dans le lecteur. Le lecteur est désactivé par programmation, la vidéo sera donc lue. le play() est appelée à nouveau, ce qui lancera la vidéo. Suite à ce code, le bouton est créé et configuré dynamiquement.

Ajouter un click écouteur d'événement sur le bouton

Trouvez le code étiqueté :

// ### Add button's event listener ###

Utilisation de JavaScript addEventListener() , le gestionnaire d'événements pour un clic est créé dynamiquement. Dans le gestionnaire d'événements, le lecteur est réactivé, le niveau de volume réglé et enfin le bouton supprimé du DOM.

Configurer le bouton

Trouvez le code étiqueté :

// ###  Configure the button ###

Dans cette section de code, le libellé du bouton est défini, l'apparence du bouton est configurée et un class est ajouté pour une référence CSS qui positionne le bouton.

Ajouter le bouton au conteneur

Trouvez le code étiqueté :

// ### Add the button to the container ###

La seule ligne de code place le bouton dans le div qui contraint le joueur.

Utiliser une annonce pré-roll

Étant donné que l'annonce est lue lorsque le bouton d'activation du son apparaît, vous devez réactiver le lecteur d'annonces plutôt que le lecteur de contenu. Pour ce faire, vous utiliserez ce qui suit pour le gestionnaire de clics:

button.addEventListener("click", function() {
  myPlayer.ima3.adPlayer.muted(false);
  myPlayer.ima3.adPlayer.volume(volumeLevel);
  //myPlayer.muted(false);
  //myPlayer.volume(volumeLevel);
  playerContainer.removeChild(button);
}

Les deux lignes de code pour le contrôle du volume du lecteur de contenu sont commentées et laissées uniquement à titre de comparaison.

Vous n'avez pas besoin de faire la même modification pour le code non-iOS / Safari / Chrome car le volume est modifié AVANT le chargement de l'annonce (sur le loadstart event), et ces modifications sont transmises au lecteur de publicité lors de son chargement.

Regarde ça CodePen pour un exemple de travail.

Style d'application

Les trois sélecteurs CSS effectuent les opérations suivantes:

• Définit la vidéo height et width à 100% pour remplir le récipient dans lequel il est placé.
• Crée un sélecteur de classe qui est utilisé avec le div qui entoure le joueur. Les valeurs utilisées correspondent à la taille du lecteur.
• Crée un autre sélecteur de classe qui positionne le bouton d'activation du son au centre du div qui entoure le joueur.

Code du plug-in

Normalement, lors de la conversion du JavaScript en plugin Brightcove Player, des modifications nominales sont nécessaires. Une modification requise consiste à remplacer l'utilisation standard de la ready() méthode par le code qui définit un plugin.

Voici le code de début de JavaScript très couramment utilisé qui fonctionnera avec le lecteur :

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

Vous allez modifier la première ligne pour utiliser la syntaxe standard pour démarrer un plugin Brightcove Player :

videojs.registerPlugin('pluginName', function(options) {
  var myPlayer = this;
  ...
});

Comme mentionné précédemment, vous pouvez voir le code JavaScript du plugin dans le référentiel GitHub correspondant de ce document: unmute-button.js.

Utilisation du plugin avec un lecteur

Une fois que les fichiers CSS et JavaScript du plugin sont stockés dans un emplacement accessible à Internet, vous pouvez utiliser le plugin avec un lecteur. Dans les studios JOUEURS module, vous pouvez choisir un joueur, puis dans le PLUGINS section ajouter les URL aux fichiers CSS et JavaScript, et également ajouter le Nom et Options , si des options sont nécessaires.