Exemple de joueur Brightcove : Contrôle du volume horizontal

Sélectionnez l'implémentation

Dans cet exemple, vous testerez avec le code incorporé sur la page, puis vous ajouterez les fichiers CSS et JavaScript au lecteur. Ensuite, vous déploierez le plugin. Avec le plugin de volume horizontal ajouté au lecteur, vous pouvez utiliser l'implémentation iframe.

Ressources API utilisées

Les sections suivantes détaillent les ressources utilisées à partir de diverses API.

Méthodes de l'API Brightcove Player

• control_bar.addChild()
• control_bar.removeChild()

Le joueur

Dans le lecteur ci-dessous, notez que la barre de contrôle du volume horizontale remplace la barre de contrôle verticale par défaut.

Fonctionnement

Les sections suivantes expliquent le lecteur, le JavaScript et le code CSS utilisés dans l'exemple.

Créer le lecteur

Pour créer un lecteur et lui attribuer une vidéo, procédez comme suit :

• Dans le Joueurs module, créez un nouveau lecteur ou utilisez un existant.
• Dans le Médias module, sélectionnez une vidéo et publiez-la avec ce lecteur.Attribuez du contenu vidéo au lecteur et publiez-le.
• Copiez le code d'intégration In-Page et collez-le dans un nouveau fichier HTML.

Le code du joueur

Votre code d'intégration sur la page doit ressembler à ceci:

    <video-js id="video_1"
      width="640px" height="360px"
      data-video-id="4172255216001"
      data-account="1752604059001"
      data-player="default"
      data-embed="default"
      controls=""></video-js>
    <script src="//players.brightcove.net/1752604059001/default_default/index.min.js"></script>

La feuille de style

Cet exemple utilise des styles CSS pour Brightcove Player.

• Lignes 9-22: Définissez l'ordre des éléments dans la barre de contrôle. Cet exemple place la commande de sourdine et la commande de volume après la barre de progression, mais avant le bouton plein écran.

  Pour plus d'informations sur la définition de l'ordre des icônes de la barre de contrôle, consultez le Personnaliser l'apparence du joueur document.

• Lignes 24-26: Supprimez l'ombre par défaut autour du contrôle du volume pour mieux correspondre à la barre de progression.
• Lignes 27-34: Réglez la hauteur et la couleur d'arrière-plan du contrôle du volume.
• Lignes 36 à 38 : Ajoutez un remplissage à droite du contrôle du volume pour vous assurer qu'il ne chevauche pas le bouton plein écran.

    <style type="text/css">
        /* Order of controls in bar, should flow in before fullscreen button.  */
        .vjs-mute-control {
          order: 7;
          -webkit-box-ordinal-group: 7;
          -moz-box-ordinal-group: 7;
          -webkit-order: 7;
          -ms-flex-order: 7;
        }
        .vjs-volume-control {
          order: 8;
          -webkit-box-ordinal-group: 8;
          -moz-box-ordinal-group: 8;
          -webkit-order: 8;
          -ms-flex-order: 8;
        }
        /* Better match progress bar */
        .video-js.video-js .vjs-volume-bar:before {
          box-shadow:none;
        }
        .video-js.video-js .vjs-volume-bar,
        .video-js.video-js .vjs-volume-bar:before,
        .video-js.video-js .vjs-volume-level {
          height: 4px;
        }
        .video-js.video-js .vjs-volume-handle {
          background-color: initial;
        }
        /* Additional padding to reduce inadvertently covering the fullscreen button */
        .vjs-volume-control {
          padding-right: 5px;
        }
    </style>

Le code JavaScript

Ajoutez le code JavaScript suivant à votre code de page.

• Ligne 57 : Obtient une référence au lecteur lorsqu'il est prêt.
• Ligne 59 : Obtient une référence à la barre de contrôle du lecteur.
• Ligne 60 : Obtient une référence au bouton de menu de volume.

• Lignes 61-62: Ajoutez le bouton de sourdine et les éléments de contrôle du volume à la barre de contrôle.

• Ligne 63 : Supprime le bouton de menu de volume par défaut de la barre de contrôle.

    <script id="pageScript" type="text/javascript">
        var myPlayer;

        videojs.getPlayer('video_1').ready(function(){
            myPlayer = this;

            var control_bar = myPlayer.controlBar;
            var vmb = control_bar.volumeMenuButton;
            control_bar.addChild('VolumeControl');
            control_bar.addChild('MuteToggle');
            control_bar.removeChild(vmb);
        });
    </script>

Utilisez un plugin

Il est recommandé d'utiliser un plugin afin de pouvoir facilement ajouter cette fonctionnalité à plusieurs joueurs.

Créez le fichier CSS

Déplacez les styles CSS dans un fichier et placez-le dans une URL accessible sur Internet.

1. Créez un nouveau fichier pour vos styles CSS. Dans ce cas, nommez-le horizontal-volume.css.
2. dans le <head> section de votre fichier HTML, ajoutez le lien suivant pour inclure votre fichier CSS nouvellement créé.

   <link href="horizontal-volume.css" rel="stylesheet"> 

3. Parcourez la page HTML. Vous devriez voir le contrôle de volume horizontal, sauf que maintenant vos styles ont été supprimés de la page HTML.

Créez le fichier JavaScript

Déplacez le code JavaScript du plugin dans un fichier et placez-le dans une URL accessible sur Internet.

• Créez un nouveau fichier pour le code JavaScript de votre plugin. Dans ce cas, nommez-le horizontal-volume.js.
• Coupez et collez le code JavaScript de votre fichier HTML principal dans ce nouveau fichier.
• Lignes 77,85: Enveloppez votre code JavaScript en utilisant le videojs.registerPlugin() fonction. Le premier argument, horizontalVolume , est le nom du plugin.
• Ligne 78: Obtient une référence à votre joueur.
• Le reste est votre code JavaScript qui a été examiné dans une section précédente.

/**
 * Horizontal Volume
 */
videojs.registerPlugin('horizontalVolume', function() {
    var myPlayer = this,
    control_bar = myPlayer.controlBar,
    vmb = control_bar.volumeMenuButton;

    control_bar.addChild('VolumeControl');
    control_bar.addChild('MuteToggle');
    control_bar.removeChild(vmb);
});

1. Dans le fichier HTML, ajoutez le code suivant juste en dessous des <script> balises existantes. Ce code inclut le fichier JavaScript, puis appelle la méthode définie dans ce code JavaScript.

   <script type="text/javascript" src="horizontal-volume.js"></script>
   <script>videojs.getPlayer('video_1').horizontalVolume();</script>

2. Parcourez la page HTML. Vous devriez voir le contrôle de volume horizontal, sauf que maintenant votre code JavaScript a été supprimé de la page HTML.

Déployer le plugin et le CSS

Pour déployer le plug-in du bouton de superposition à l'aide du module Lecteurs, procédez comme suit:

1. Dans le nouveau Video Cloud Studio, ouvrez le Joueurs module et localisez le lecteur.
2. Cliquez sur le lien du lecteur pour ouvrir les propriétés de celui-ci.
3. Allez dans la section Plugins et cliquez sur Edit.
4. Pour le URL JavaScript , entrez l'URL qui spécifie l'emplacement où vous avez enregistré le JavaScript de votre plugin.
5. Pour le URL CSS , entrez l'URL qui spécifie l'emplacement où vous avez enregistré le CSS de votre plugin.
6. Pour le Nom , entrer horizontalVolume.
7. Ce plugin n'a pas d'options, vous pouvez donc laisser la section des options du plugin vide.
8. Cliquez sur Enregistrer, puis sur Publier le lecteur.

Utiliser iframe

Il est recommandé d'utiliser l'implémentation du lecteur iframe. Si cela est possible pour cet exemple, remplacez l'implémentation incorporée sur la page par l'implémentation iframe.

1. dans le Médias module, sélectionnez une vidéo et publiez-la avec ce lecteur.Revenir au Joueurs module.

2. Copiez le code d'intégration iframe et collez-le dans un nouveau fichier HTML. Votre code doit ressembler à ceci :

   <!DOCTYPE html>
   <html>
   
   <head>
       <meta charset="UTF-8">
       <title>Brightcove Player: Horizontal Volume - iframe</title>
   </head>
   
   <body>
       <iframe style='width: 640px;height: 360px;' src='//players.brightcove.net/1752604059001/b42edc12-2ac9-48a9-92bc-fbdb5ca9aed7_default/index.html?videoId=4172255216001' allowfullscreen allow='encrypted-media'></iframe>
   
   </body>
   </html>

3. Parcourez la page HTML. Vous devriez voir le plugin fonctionner correctement.