Exemple de lecteur
Commencez à lire l'une des vidéos. Ensuite, lisez la vidéo dans un autre lecteur et vérifiez que la lecture vidéo s'arrête dans l'autre lecteur en cours de lecture.
Voir le stylo 18179-page-d'arrêt-d'autres-joueurs-quand-la-vidéo-démarre par Brightcove Learning Services ( rcrooks1969 ) sur CodePen.
Code source
Voir le solution complète sur GitHub.
Utilisation du CodePen
Voici quelques conseils pour utiliser efficacement le CodePen ci-dessus :
- Basculez l'affichage réel du joueur en cliquant sur le Result bouton.
- Cliquez sur les HTML/CSS/JS boutons pour afficher L'UN des types de code.
- Plus loin dans ce document, la logique, le flux et le style utilisés dans l'application seront discutés dans la configuration Plateur/HTML, le flux d'application et le style de l'application. sections. La meilleure façon de suivre les informations contenues dans ces sections est de :
- Cliquez sur le EDIT ON CODEPEN bouton dans le CodePen et ayez le code disponible dans un onglet navigateur/navigateur.
- Dans CodePen, réglez le code que vous souhaitez afficher. Vous pouvez modifier la largeur de différentes sections de code dans CodePen.
- Voir le Configuration du lecteur/HTML , Flux de candidature et/ou Style d'application sections dans un autre navigateur/onglet de navigateur. Vous pourrez maintenant suivre les explications du code et en même temps afficher le code.
Séquence de développement
Normalement, pour les exemples, cette section suggère une approche du développement passant d'une page à l'utilisation d'un plugin Brightcove Player. Dans ce cas, le code agit sur tous les joueurs de la page de concert, et ne peut pas être attribué à un joueur en tant que plugin, donc aucun code de plugin n'est affiché.
Ressources API/Plugin utilisées
| Méthodes API | Événements API |
|---|---|
| jouer () | jouer |
| pause () |
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
Aucune configuration spéciale n'est requise pour le Brightcove Player, mais il y a trois lecteurs distincts sur la page HTML <div> balises pour le contrôle de la disposition.
Autre HTML
Aucun autre élément HTML n'est ajouté à la page.
Flux d'application
La logique de base derrière cette application est la suivante :
- Déterminez le nombre de joueurs sur la page.
- Faites une boucle sur les lecteurs, en les initialisant en tant que lecteurs Brightcove et en définissant un
playécouteur d'événement sur chacun. - Chaque fois qu'un
playl'événement est géré, boucle sur les joueurs et met en pause tous les joueurs qui n'ont pas le nom du joueur qui a distribué l'événement.
Créez une boucle sur les joueurs et attribuez un gestionnaire d'événements à chacun
Trouvez le code étiqueté :
// ### Determine the available player IDs ###
Si vous avez plusieurs lecteurs sur une page, ils sont stockés dans un nom d'objet videojs.players avec des clés qui sont les noms des joueurs. Vous utilisez JavaScript Object.keys() pour extraire les noms des joueurs que vous voulez pour la boucle, pas les objets joueurs réels. Dans la boucle, vous assignez un gestionnaire d'événements, puis poussez le lecteur dans un tableau.
Manipulez le play événement et arrêter la lecture d'un autre joueur
Trouvez le code étiqueté :
// ### Handle all players' play event ###
Chaque fois qu'un événement de lecture est géré, vous extrayez le nom du joueur (id) de l'objet événement, puis bouclez sur tous les joueurs et mettez tous les joueurs en pause, alors vous n'avez pas le nom du joueur dont la vidéo vient de commencer à jouer.
Style d'application
Le CSS utilisé pour la page contrôle la mise en page des multiples lecteurs.