Exemple de joueur Brightcove : Contrôle du volume vertical

Exemple de lecteur

Démarrez la lecture vidéo et déplacez votre souris sur le bouton de volume de la barre de contrôle. Vous devriez voir un curseur de volume vertical au lieu du curseur horizontal par défaut.

Voir le stylo volume vertical 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.

Ressources API/Plugin utilisées

Méthodes API
méthode bc ()

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

Parce que nous voulons modifier la barre de contrôle avant la création du lecteur, nous retarderons l'instanciation du lecteur Brightcove en supprimant certains des attributs du <video> marque. Pour plus d'informations à ce sujet, consultez le Retarder l'instanciation du joueur document.

Modifiez le code d'intégration de votre lecteur comme suit:

Ajouter le id attribut au video balise dans le code d'intégration du lecteur
Supprimez les attributs suivants du video marque:
- data-account
- data-player
- data-video-id

Le code d'intégration de votre lecteur devrait maintenant ressembler à ceci:

<video-js id="myPlayerID"
  data-embed="default"
  data-application-id
  width="640" height="360"
  controls></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

Flux d'application

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

Définir les options du lecteur
Ajouter les attributs du joueur
Créer le lecteur

Définir les options du lecteur

Trouvez le code étiqueté :

// +++ Define the player options +++

Définir les volumePanel afin qu'il soit vertical et non aligné avec la barre de contrôle.

Ajouter les attributs du joueur

Trouvez le code étiqueté :

// +++ Add the player attributes +++

Ajoutez les attributs de joueur suivants avec vos valeurs au <video> marque.

data-account
data-player
data-video-id

Créer le lecteur

Trouvez le code étiqueté :

// +++ Create the player +++

Instanciez le lecteur en passant les options de la barre de contrôle dans le méthode bc ().

Style d'application

Il n'y a pas de styles supplémentaires pour cet échantillon.

Mettre à jour plusieurs joueurs

Pour mettre à jour tous les lecteurs de votre page HTML, vous pouvez utiliser un videojs.hook() fonction.

Fonctions de crochet

Les crochets vous permettent d'ajouter des fonctionnalités ou de modifier l'apparence du lecteur à certains moments du cycle de vie de Video.js. Avec une fonction hook, tous les lecteurs de votre page HTML sont mis à jour en passant les options du lecteur dans le videojs.hook() fonction.

Pour plus de détails, consultez Documentation des hooks Video.js.

Exemple de lecteur

Cet exemple modifie le bouton de contrôle du volume pour afficher un curseur de volume vertical pour tous les lecteurs de la page.

Démarrez la lecture vidéo et déplacez votre souris sur le bouton de volume de la barre de contrôle. Vous devriez voir un curseur de volume vertical pour les deux lecteurs, au lieu du curseur horizontal par défaut.

Voir le stylo Volume vertical à l'aide du crochet par Brightcove Learning Services ( bcls1969 ) sur CodePen.

Configuration du lecteur

Vous retarderez la création des lecteurs dans votre page HTML, comme vous l'avez fait dans le premier exemple dans ce document.

Flux d'application

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

Définir la fonction crochet avec les options du joueur
Ajouter les attributs du joueur
Exécutez la fonction crochet
Créez les joueurs

Définir la fonction crochet avec les options du joueur

Trouvez le code étiqueté :

// +++ Define the hook function with player options +++

Définissez la fonction de crochet pour le beforeSetup moment du cycle de vie, qui contient les options du lecteur. Pour les options du lecteur, définissez le volumePanel pour apparaître vertical et non aligné avec la barre de contrôle.

Ajouter les attributs du joueur

Trouvez le code étiqueté :

// +++ Add the player attributes +++

Ajoutez les attributs de joueur suivants avec vos valeurs au <video> tag pour chaque joueur.

data-account
data-player
data-video-id

Exécutez la fonction crochet

Trouvez le code étiqueté :

// +++ Execute the hook function +++

Modifiez les options transmises aux joueurs, à l'aide du beforeSetup moment du cycle de vie avec le Crochet Video.js fonction.

Créez les joueurs

Trouvez le code étiqueté :

// +++ Create the players +++

Instanciez chaque joueur en utilisant le méthode bc ().