play() et pause() des méthodes sont appelées 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 défile complètement, la lecture de la vidéo ou de l'annonce commence. Lorsque vous faites défiler le lecteur hors de vue, la lecture de la vidéo ou de l'annonce s'arrête. Dans cet exemple, il y a un pré-roll, un mid-roll désactivable à cinq secondes et un post-roll.
Voir le stylo 18352-scrolling-player-view-ads 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.
Ressources API/Plugin utilisées
| Méthodes API | Plugins de lecteur Brightcove |
|---|---|
| jouer () | Plugin IMA3 |
| pause () | |
| au() |
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 la bibliothèque jQuery et le JavaScript du plugin IMA3. Dans le HTML head section le CSS de IMA3 est importé en utilisant un HTML <link> marque.
Flux d'application
La logique de base derrière cette application est la suivante :
- Configurez le plug-in IMA3.
- É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.
- Suivez les événements publicitaires pour déterminer si le Brightcove Player ou le lecteur publicitaire normal est actuellement utilisé.
Configurer le plugin IMA3
Trouvez le code étiqueté :
// ### Configure IMA3 plugin
Le plugin IMA3 est configuré pour utiliser une configuration VMAP qui lira un pré, un mid et un post-roll.
É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 généralement si le lecteur est dans la fenêtre, puis lit ou met la vidéo en pause. Il est essentiel que le code détermine quel lecteur est utilisé, le lecteur normal ou le lecteur publicitaire. La valeur booléenne isAdPlaying est basculé en fonction des événements publicitaires (dans le gestionnaire d'événements en bas du code), puis un opérateur conditionnel (ternaire) est utilisé pour attribuer le currentPlayer variable le bon joueur. 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.
Suivre le lecteur utilisé
Trouvez le code étiqueté :
// ### Set Boolean value for if ad is playing ###
Un certain nombre d'événements publicitaires sont surveillés et la valeur booléenne est définie en conséquence.
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-ads.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.