Exemple de joueur Brightcove : Agrandir le lecteur sur le survol de la souris

Exemple de lecteur

Passez la souris sur et hors du lecteur ci-dessous pour voir la fonctionnalité.

Voir le stylo 18165-agrandir-joueur-mouseover par Brightcove Learning Services ( bcls1969 ) 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.

Séquence de développement

Voici la séquence de développement recommandée :

Utilisez l'implémentation du lecteur intégré In-Page pour tester les fonctionnalités de votre lecteur, de votre plugin et de votre CSS (si CSS est nécessaire)
Placez le JavaScript et le CSS du plugin dans des fichiers séparés pour des tests locaux
Déployez le code du plugin et le CSS sur votre serveur une fois que vous avez corrigé des erreurs.
Utilisez Studio pour ajouter le plugin et le CSS à votre lecteur
Remplacez l'implémentation du lecteur intégré dans la page si vous déterminez que l'implémentation iframe est mieux adaptée (détaillée dans la section suivante)

Pour plus de détails sur ces étapes, consultez la section étape par étape : Guide de développement de plug-ins.

Intégrer iFrame ou In-Page

Lorsque vous développez des améliorations pour Brightcove Player, vous devrez décider si le code convient le mieux à l'implémentation intégrée iframe ou In-Page. La recommandation des meilleures pratiques consiste à créer un plugin à utiliser avec une implémentation iframe. Les avantages de l'utilisation du lecteur iframe sont les suivants :

Aucune collision avec JavaScript et/ou CSS existants
Réactif automatiquement
L'iframe facilite l'utilisation dans les applications de médias sociaux (ou lorsque la vidéo devra « voyager » dans d'autres applications)

Bien que l'intégration du lecteur d'intégration dans la page puisse être plus complexe, il y a des moments où vous planifiez votre code autour de cette implémentation. Pour généraliser, cette approche est préférable lorsque la page contenante doit communiquer avec le lecteur. En particulier, voici quelques exemples :

Le code dans la page contenant doit écouter et agir sur les événements du joueur
Le lecteur utilise des styles de la page contenante
L'iframe entraînera l'échec de la logique de l'application, comme une redirection à partir de la page contenant

Même si votre implémentation finale n'utilise pas le code iframe, vous pouvez toujours utiliser le code intégré In-Page avec un plugin pour votre JavaScript et un fichier séparé pour votre CSS. Cela encapsule votre logique afin que vous puissiez facilement l'utiliser sur plusieurs joueurs.

Détails d'implémentation

Il existe une logique supplémentaire utilisant le API Player pour supprimer le comportement de réduction pendant la lecture de la vidéo, puis le restaurer à nouveau lorsque la vidéo est mise en pause ou se termine. Comme créé ici, cet exemple doit utiliser le Advanced (encart) lecteur intégré. Vous pouvez créer cette fonctionnalité en utilisant le iframe incorporer du code aussi, mais la logique serait un peu différente et ne se prêterait pas à être transformée en plugin.

Ressources API/Plugin utilisées

Événements API
jouer
pause
terminé

Configuration du lecteur/HTML

Dans cet exemple, le code Brightcove Player utilise un style attribut avec le width et height propriétés définies sur 100%.

Autre HTML

Un wrapper de joueur <div> L'élément est ajouté autour du code d'intégration du lecteur pour contrôler dynamiquement la taille du lecteur.

N'oubliez pas d'ajouter l' id attribut à la video-js balise dans le code d'intégration du lecteur.

<video-js id="myPlayerID"
...

Flux d'application

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

Définissez la taille des grands et des petits joueurs.
Ajoutez des fonctions pour rendre le lecteur grand ou petit.
Ajouter des auditeurs pour le mouseover et mouseout événements.
Au survol de la souris, agrandissez le lecteur. Au passage de la souris, réduisez la taille du lecteur. Pendant la lecture de la vidéo, gardez le lecteur grand. Lorsque la vidéo est mise en pause ou que la vidéo se termine, réduisez la taille du lecteur.

Obtenir les références DOM

Obtenez une référence au Brightcove Player et au wrapper. Définissez la taille des grands et des petits joueurs.

Modifier la taille du lecteur

Trouvez le code étiqueté :

// +++ Change the size of the player +++

Ajoutez des fonctions pour rendre le lecteur grand et petit.

Écoutez l'événement mouseout

Trouvez le code étiqueté :

// +++ Listen for the mouseout event +++

Écoutez le mouseout événement sur le playerWrapper. Lorsque l'événement est déclenché, faites en sorte que le joueur soit petit.

Contrôlez la taille du lecteur

Trouvez le code étiqueté :

// +++ Control the player size +++

Ajoutez une logique pour effectuer les opérations suivantes:

Au départ, faites en sorte que le joueur soit petit.
Sur mouseover , agrandissez le lecteur.
Sur play événement, gardez le joueur grand.
Sur pause ou ended événements, rendez le joueur petit.
Sur mouseout , rendez le joueur petit.

Style d'application

Le CSS définit initialement le playerWrapper et définit la transition entre le petit et le grand 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: agrandir-player.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.

Notes de mise en œuvre

Si vous souhaitez être en mesure de spécifier les tailles petite et grande du lecteur pour chaque instance, vous pouvez les transmettre en tant qu'options au plugin, puis modifier le code du plugin pour lire les valeurs de l'objet options. Voir le Pas à pas: Développement de plugins pour plus de détails sur la façon de procéder.
Si vous souhaitez utiliser le lecteur iframe au lieu du lecteur inpage. Le div wrapper du lecteur entourerait la balise iframe, et le Javascript pour gérer la taille du lecteur serait très similaire à ce que vous voyez ici. Il faudrait cependant qu'il se trouve dans la page HTML plutôt que dans un plugin de lecteur.