Exemple de joueur Brightcove : Défilement du lecteur dans la vue

Dans cette rubrique, vous apprendrez à utiliser un Brightcove Player qui démarre la lecture de la vidéo dès que vous faites défiler complètement le lecteur et met la vidéo en pause lorsque vous la faites défiler hors de la vue. Nous appelons l'API Brightcove Player play() et pause() méthodes pour démarrer et arrêter la vidéo en fonction de la position du lecteur.

Exemple de lecteur

Faites défiler le lecteur dans et hors de la vue. Lorsque le lecteur est entièrement défilé vers la vue, la vidéo commence à être lue. Lorsque vous faites défiler le lecteur hors de la vue, la lecture de la vidéo s'arrête.

Voir le stylo 18202-vue-joueur-avec-défilement 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 :
    1. Cliquez sur le EDIT ON CODEPEN bouton dans le CodePen et ayez le code disponible dans un onglet navigateur/navigateur.
    2. Dans CodePen, réglez le code que vous souhaitez afficher. Vous pouvez modifier la largeur de différentes sections de code dans CodePen.
    3. 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.

Ressources API/Plugin utilisées

Méthodes API
jouer ()
pause ()

Un événement JavaScript clé utilisé dans ce code est onscroll. Cet événement est distribué et dans ce code est géré chaque fois que l' window élément fait défiler.

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

L' muted attribut a été ajouté au lecteur afin d'éviter les problèmes de lecture automatique. Voir le Considérations sur la lecture automatique document pour plus de détails.

Autre HTML

Un HTML <script> la balise est utilisée pour importer le jQuery bibliothèque.

Flux d'application

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

  • Écoutez les événements Scroll.
  • Lorsqu'un événement de défilement est géré, vérifiez si le lecteur se trouve dans la fenêtre d'affichage ou non.
  • Si le lecteur dans la fenêtre d'affichage, lisez la vidéo, si ce n'est pas le cas, mettez la vidéo en pause.

Écoutez les événements de défilement sur le la fenêtre élément

Trouvez le code étiqueté :

// ### Execute every time page is scrolled ###

Cette ligne de code appelle la checkIfVideoInView() méthode à chaque envoi window.onscroll d'événements.

Gérer les événements Scroll

Trouvez le code étiqueté :

// ### Called on scroll, check if in view and the play/pause ###

le checkIfVideoInView() La fonction de gestionnaire d'événements vérifie si le lecteur est dans la fenêtre, puis lit ou met la vidéo en pause. La isScrolledIntoView() méthode est utilisée dans une instruction if pour vérifier si le lecteur se trouve dans la fenêtre d'affichage. Naturellement, la isScrolledIntoView() méthode renvoie une valeur booléenne.

Vérifiez si le lecteur est entièrement dans la fenêtre d'affichage

Trouvez le code étiqueté :

// ### Checks if player is in view ###

Cette fonction, qui renvoie une valeur booléenne, utilise jQuery pour déterminer si le lecteur se trouve entièrement dans la fenêtre d'affichage.

Style d'application

Le seul CSS définit la taille du lecteur.

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: scroll-into-view.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.