Implémentation du ModalDialog

Exemple

Ce qui suit montre un exemple du composant ModalDialog. Dans ce cas, la fenêtre modale est affichée sur l'affichage initial du lecteur, mais des méthodes existent pour l'afficher également par programme. Ici, du texte jaune est tout ce qui est affiché dans la fenêtre modale. La fenêtre modale bloque toute interaction avec le joueur jusqu'à ce que X dans le coin supérieur droit est cliqué, ou ESC est pressé.

Création du ModalDialog

Il existe différentes façons de créer une implémentation du ModalDialog, les deux utilisées dans ce document sont:

En utilisant createModal() , une fonction d'assistance
En utilisant le ModalDialog() constructeur

Utilisation de la fonction d'assistance createModal ()

le createModal() encapsule le code pour vous faciliter l'utilisation de ModalDialog. La syntaxe est la suivante :

createModal(content,options)

Paramètre	Obligatoire	Description
contenu	Non (bien que si non fourni, rien ne sera affiché par le modal)	Contenu à afficher dans le modal
options	Non	Un objet pour définir d'autres options pour le modal; détaillé plus loin dans ce document

Ce qui suit montre une implémentation simple du ModalDialog créé et utilisé avec Brightcove Player.

  <video-js id="myPlayerID"
    data-video-id="5079788144001"
    data-account="1507807800001"
    data-player="HJLWns1Zbx"
    data-embed="default"
    data-application-id=""
    controls=""></video-js>
  <script src="https://players.brightcove.net/1507807800001/HJLWns1Zbx_default/index.min.js"></script>

  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      myPlayer.createModal('Using the helper function');
    });
  </script>

  <video-js id="myPlayerID"
    data-account="3676484087001"
    data-player="S1lOCfk6Ze"
    data-embed="default"
    data-application-id=""
    controls=""></video-js>
  <script src="https://players.brightcove.net/3676484087001/S1lOCfk6Ze_default/index.min.js"></script>

  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      myPlayer.createModal('Using the helper function');
    });
  </script>

Utilisation du constructeur ModalDialog

Vous pouvez également utiliser le constructeur de la classe pour implémenter ModalDialog. Il s'agit d'un processus en deux étapes, obtenant la classe puis instanciant un objet. La syntaxe est la suivante :

var ModalDialog = videojs.getComponent('ModalDialog');
var myModal = new ModalDialog(player, options);

Paramètre	Obligatoire	Description
joueur	Oui	Le joueur auquel le modal sera appliqué
options	Non	Un objet pour définir d'autres options pour le modal; détaillé dans la section suivante

Ce qui suit montre une implémentation du ModalDialog en cours de création et d'utilisation avec Brightcove Player.

  <video-js id="myPlayerID"
    data-video-id="5079788144001"
    data-account="1507807800001"
    data-player="B1mMJs3Ge"
    data-embed="default"
    data-application-id=""
    controls=""></video-js>
  <script src="https://players.brightcove.net/1507807800001/B1mMJs3Ge_default/index.min.js"></script>

  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this,
        options = {};
        options.content = 'In the  modal';
        options.label = 'the label';

      var ModalDialog = videojs.getComponent('ModalDialog');
      var myModal = new ModalDialog(myPlayer, options);
      myPlayer.addChild(myModal);
      myModal.open();
    });
  </script>

  <video-js id="myPlayerID"
    data-account="3676484087001"
    data-player="S1lOCfk6Ze"
    data-embed="default"
    data-application-id=""
    controls=""></video-js>
  <script src="https://players.brightcove.net/3676484087001/S1lOCfk6Ze_default/index.min.js"></script>

  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this,
        options = {};
      options.content = 'In the  modal';
      options.label = 'the label';

      var ModalDialog = videojs.getComponent('ModalDialog');
      var myModal = new ModalDialog(myPlayer, options);
      myPlayer.addChild(myModal);
      myModal.open();
    });
  </script>

Dans ce cas, le texte qui apparaît dans le ModalDialog est défini dans le options.content valeur.

L'objet d'options

Voici les propriétés que vous pouvez utiliser dans le cadre de l'objet options à utiliser avec la classe ModalDialog:

Propriété	Type de données	Valeur par défaut	Description
contenu	Mixte (élément de chaîne ou DOM)	Non défini	Contenu personnalisable qui apparaît dans le modal
description	Chaîne	Non défini	Une description textuelle pour le modal, principalement pour l'accessibilité
Remplissez toujours	Booléen	true	Normalement, les modaux ne sont automatiquement renseignés que la première fois qu'ils s'ouvrent; cette option indique au modal d'actualiser son contenu à chaque ouverture
étiquette	Chaîne	Non défini	Une étiquette de texte pour le modal, principalement pour l'accessibilité
temporaire	Booléen	true	Si `true` le modal ne peut être ouvert qu'une seule fois; il sera éliminé dès sa fermeture
infermable	Booléen	faux	Si `true` l'utilisateur ne pourra pas fermer le modal via l'interface utilisateur de la manière habituelle; la fermeture programmatique est toujours possible

L'exemple de code précédent montre l'utilisation du options objet pour définir et utiliser le content et label properties avec un ModalDialog.

Méthodes

Les méthodes suivantes font partie de la classe ModalDialog:

Méthode	Description
fermer ()	Ferme le modal
fermable ()	Renvoie un booléen indiquant si le modal peut être fermé ou non
description ()	Renvoie la chaîne de description de ce modal; principalement utilisé pour l'accessibilité
vide ()	Vide l'élément de contenu; cela se produit automatiquement à chaque fois que le modal est rempli
fill ()	Remplissez l'élément de contenu du modal avec le modal `content` option; l'élément de contenu sera vidé avant que ce changement n'ait lieu
étiquette ()	Renvoie la chaîne d'étiquette pour ce modal; principalement utilisé pour l'accessibilité
open ()	Ouvre le modal
ouvert()	Renvoie un booléen reflétant si le modal est ouvert actuellement

Utilisation du contenu HTML

Jusqu'à présent, le contenu affiché dans le modal était de simples chaînes. Si vous souhaitez utiliser des éléments HTML comme contenu, vous devez adopter une approche légèrement différente.

La clé pour utiliser HTML comme contenu est que vous devez créer un élément HTML que vous attribuerez plus tard au contenu. Dans le code ci-dessous, JavaScript createElement() est utilisée pour créer un élément conteneur dans lequel vous pouvez placer un autre HTML. L'élément créé dynamiquement est ensuite affecté au content propriété. Le code et la capture d'écran du résultat sont tous deux affichés.

//Create a div in which to place HTML content
var newElement = document.createElement('div');
//Place data in div
newElement.innerHTML = "<p style='font-size: 1em;'>this is in a paragraph</p><ul><li>in a list</li></ul>";
//Assign element to content
options.content = newElement;

Utiliser des éléments HTML comme contenu

Styliser le contenu

Par défaut, le texte affiché dans le modal est blanc et situé en haut à gauche, comme illustré ici:

Vous pouvez modifier l'emplacement et le style du texte en utilisant CSS. Pour ce faire, vous pouvez ajouter une classe à ModalDialog et créer un sélecteur de classe et un style à votre guise. Le processus de style du modal suit ces étapes:

Ajouter par programme une classe au modal; dans ce document .vjs-my-custom-modal est utilisé, mais vous pouvez nommer cette classe comme vous le souhaitez
Créez le style en utilisant la classe nouvellement ajoutée et la classe qui est automatiquement un enfant du modal; cette classe est .vjs-modal-dialog-content , par exemple:
```
.vjs-my-custom-modal .vjs-modal-dialog-content {
  color: red;
  margin-top: 40px;
  margin-left: 40px;
}
```

Le style illustré ci-dessus apparaîtrait comme suit:

Voici le code pour utiliser un style avec le createModal() fonction d'assistance:

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <style>
    .video-js {
      height: 344px;
      width: 610px;
    }
    .vjs-my-custom-modal .vjs-modal-dialog-content {
      color: red;
      margin-top: 40px;
      margin-left: 40px;
    }
  </style>
</head>

<body>

  <video-js id="myPlayerID"
    data-video-id="5079788144001"
    data-account="1507807800001"
    data-player="HJLWns1Zbx"
    data-embed="default"
    data-application-id=""
    controls=""></video-js>
  <script src="https://players.brightcove.net/1507807800001/HJLWns1Zbx_default/index.min.js"></script>

  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      const myModal = myPlayer.createModal('In the modal');
      myModal.addClass('vjs-my-custom-modal');
    });
  </script>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <style>
    .video-js {
      height: 344px;
      width: 610px;
    }
    .vjs-my-custom-modal .vjs-modal-dialog-content {
      color: red;
      margin-top: 40px;
      margin-left: 40px;
    }
  </style>
</head>

<body>

  <video-js id="myPlayerID"
    data-account="1507807800001"
    data-player="HJLWns1Zbx"
    data-embed="default"
    data-application-id=""
    controls=""></video-js>
  <script src="https://players.brightcove.net/1507807800001/HJLWns1Zbx_default/index.min.js"></script>

  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      const myModal = myPlayer.createModal('In the modal');
      myModal.addClass('vjs-my-custom-modal');
    });
  </script>

Voici le code complet pour utiliser un style avec le ModalDialog fonction constructeur:

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <style>
    .video-js {
      height: 344px;
      width: 610px;
    }
    .vjs-my-custom-modal .vjs-modal-dialog-content {
      color: red;
      margin-top: 40px;
      margin-left: 40px;
    }
  </style>

</head>

<body>

  <video-js id="myPlayerID"
    data-video-id="5079788144001"
    data-account="1507807800001"
    data-player="HJLWns1Zbx"
    data-embed="default"
    data-application-id=""
    controls=""></video-js>
  <script src="https://players.brightcove.net/1507807800001/HJLWns1Zbx_default/index.min.js"></script>

  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this,
        options = {};
        options.content = 'In the  modal';
        options.label = 'the label';

        var ModalDialog = videojs.getComponent('ModalDialog');
        var myModal = new ModalDialog(myPlayer, options);
        myModal.addClass('vjs-my-custom-modal');
        myPlayer.addChild(myModal);
        myModal.open();
    });
  </script>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <style>
    .video-js {
      height: 344px;
      width: 610px;
    }
    .vjs-my-custom-modal .vjs-modal-dialog-content {
      color: red;
      margin-top: 40px;
      margin-left: 40px;
    }
  </style>

</head>

<body>

  <video-js id="myPlayerID"
    data-account="1507807800001"
    data-player="HJLWns1Zbx"
    data-embed="default"
    data-application-id=""
    controls=""></video-js>
  <script src="https://players.brightcove.net/1507807800001/HJLWns1Zbx_default/index.min.js"></script>

  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this,
      options = {};
      options.content = 'In the  modal';
      options.label = 'the label';

      var ModalDialog = videojs.getComponent('ModalDialog');
      var myModal = new ModalDialog(myPlayer, options);
      myModal.addClass('vjs-my-custom-modal');
      myPlayer.addChild(myModal);
      myModal.open();
    });
  </script>