Étape par étape : Développement de plug-in

Approche de développement

Le JavaScript et le CSS que vous développez pour les plugins devront éventuellement être stockés dans un emplacement accessible sur Internet, mais il est recommandé de créer et de tester localement pendant le développement. Pour ce faire, vous exécuterez les opérations suivantes:

Créez un fichier contenant le code de votre plugin JavaScript
Créez un fichier pour contenir le code de votre plugin CSS (si nécessaire)
Créez un fichier HTML pour le test. Utilisez le embed_in_page mise en œuvre pour le joueur
Ajouter un id à la <video-js> marque
Lien vers les pages JavaScript et CSS
Utiliser un <script> tag pour appeler la fonction
Développez et déboguez votre code

Le reste de ce document vous guide à travers ces étapes pour créer et déployer un plugin simple.

Construisez les bases

Pour commencer le processus de création d'un plugin, vous devez effectuer certaines des étapes fondamentales de haut niveau mentionnées ci-dessus.

Créez un dossier nommé plugin-dev qui peut être parcouru en utilisant un serveur HTTP réel. Le serveur est nécessaire pour les tests d'implémentation iframe plus loin dans ce document.
Dans le dossier, créez trois fichiers avec les noms suivants:
- plugin-dev.html(Insérez les éléments de base d'une page HTML dans le fichier)
- plugin-dev.js
- plugin-dev.css
Utilisation de Studio Players module, créez un nouveau lecteur.
dans le Media module, sélectionnez une vidéo et publiez-la avec le lecteur nouvellement créé.
En utilisant le VIDEO CONTENT , associez une vidéo au lecteur, puis enregistrez et publiez le lecteur.
Copiez le Advanced code et collez-le dans le corps du plugin-dev.html page.
Du Embed Code & URL > Published Player menu, copiez le Advanced Embed Code code et collez-le dans le corps du plugin-dev.html page.
Ajouter un id attribut au <video-js> balise avec une valeur de player.

Vérifiez que votre page HTML ressemble à ce qui suit (Les clients Brightcove Player n'auront pas data-video-id propriété):

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Quick Start Plugin Dev</title>
</head>

<body>

  <video-js id="myPlayerID"
    data-account="1507807800001"
    data-player="default"
    data-embed="default"
    controls=""
    data-video-id="4607746980001"
    data-playlist-id=""
    data-application-id=""
    width="960" height="540"></video-js>
  <script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script>
</body>

</html>

Parcourez la page pour vous assurer que votre vidéo est en cours de lecture.

Scanner les noms réservés

Le nom d'un plugin personnalisé ne doit pas correspondre au nom d'un plugin intégré au lecteur ou fourni par Brightcove. Cela crée un conflit et peut interférer avec le bon fonctionnement du lecteur.

Lorsque vous donnez un nom à votre plugin, assurez-vous de ne PAS utiliser l'un de ces noms :
- ampSupport
- bcAa
- bcAirplay
- bcAnalytics
- bcGa
- bcGtm
- bcPlaylistUi
- bcTealium
- catalogue
- chromecastReceiver
- menu contextuel
- menu contextuel
- écran final personnalisé
- quai
- eme
- observateur crypté
- écran de fin
- les erreurs
- FreeWheelPlugin
- ima3
- kollectif
- parComportementsSource
- pépin
- greffon
- playerInfo
- playlist
- playlistEndscreen
- playlistUi
- proxyTracks
- menu qualité
- reloadSourceOnError
- rechercher des événements
- sociale
- ssai
- miniatures
- touchActive
- urlparams

Créer JavaScript

Ensuite, vous allez créer et tester le code JavaScript pour créer une superposition pour la vidéo.

Ouvrez le fichier plugin-dev.js et collez le code JavaScript suivant:

videojs.registerPlugin('pluginDev', function() {
  var player = this,
  overlay = document.createElement('p');
  overlay.className = 'vjs-overlay';
  overlay.innerHTML = "Becoming a plugin developer";
  player.el().appendChild(overlay);
});

Remarque : pour la version 5.x et les lecteurs antérieurs, vous devez utiliser videojs.plugin() à la place de videojs.registerPlugin()

Vérifiez votre compréhension de chaque ligne insérée:
- Les lignes 1 et 7 sont la syntaxe standard pour commencer et terminer un nouveau plugin de lecteur. Dans ce cas, le nom du plugin est pluginDev.
- La ligne 2 est un moyen standard d'avoir un moyen d'obtenir une poignée pour le joueur. Ceci est nécessaire pour appeler les méthodes du lecteur, ce que vous ferez plus tard.
- La ligne 3 crée un élément de paragraphe dans le document et l'affecte au overlay variable.
- La ligne 4 attribue une classe à la superposition qui sera utilisée plus tard en conjonction avec CSS.
- La ligne 5 ajoute du texte à l'élément de paragraphe.
- La ligne 6 utilise le el() méthode du lecteur pour récupérer l'élément DOM du lecteur, puis ajoute le nouvel élément de paragraphe à ce DOM.
Remarque : Le point-virgule de fin à la fin du code JavaScript du plugin (ligne 7 ci-dessus) est requis.

Les plugins intégrés aux lecteurs sont soumis à un processus de minification à l'aide de UglifyJS. Le système de gestion des lecteurs ne prend donc pas en charge le code ES6+ dans les plugins intégrés. Tout code ES6+ inclus dans un lecteur entraînera l'impossibilité de le publier ; cependant, les aperçus fonctionneront.

Il est recommandé de transposer le code ES6+ en ES5 à l'aide d'un outil tel que Babel.
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="plugin-dev.js"></script>
<script>videojs.getPlayer('myPlayerID').pluginDev();</script>
```
Parcourez à nouveau la page HTML et vous verrez que rien de visible n'a changé. Le problème est que la superposition est là, mais pas visible. Vous changerez cela plus tard.
Pour vérifier que la superposition est présente, utilisez les outils de développement de votre navigateur. dans le Éléments section, vérifiez le lecteur <div> élément, et vous verrez l'élément de paragraphe nouvellement inséré, comme indiqué ici:

Styliser le plugin

Vous savez que la superposition fait maintenant partie du lecteur, mais n'est pas visible. Ensuite, vous styliserez la superposition pour qu'elle devienne visible. Dans cette section du document, vous utiliserez un CSS très simple pour vous assurer que la superposition est visible.

Ouvrez le fichier plugin-dev.css et collez dans les styles suivants:

.vjs-overlay {
    background-color: #333333;
    color: white;
    position: absolute;
    margin-top: 100px;
    margin-left: 20px;
}

Dans le fichier HTML, ajoutez le code suivant juste en dessous de l'existant <link> marque. Ce code est lié à votre fichier CSS nouvellement créé.
```
<link href="plugin-dev.css" rel="stylesheet">
```
Parcourez la page HTML et vous verrez que la superposition est maintenant visible.

Transmettre les données au plugin

Il sera souvent le cas que vous souhaitiez modifier le comportement de votre plugin au moment de l'initialisation. Ceci est possible en passant des données dans le plugin en utilisant le options propriété. Dans cet exemple, vous passerez le texte à afficher dans la superposition.

Ouvrez la page HTML et modifiez le <script> balises donc une variable nommée options est créé et affecté à un objet avec une paire clé-valeur de "overlayText": "Ces données sont fournies lors de l'initialisation". Aussi, passez le options variable comme argument lors de l'appel de la pluginDev() méthode. Les modifications doivent apparaître comme suit:
```
<script type="text/javascript" src="plugin-dev-copy.js"></script>
<script type="text/javascript">
  var options = {"overlayText": "This data supplied at initialization"};
</script>
<script>videojs.getPlayer('myPlayerID').pluginDev(options);</script>
```

Vous devez maintenant modifier le JavaScript du plugin pour utiliser les données transmises à la fonction. La ligne 110 montre la fonction acceptant les données comme paramètre et la ligne 114 utilise les données de l'objet.

videojs.registerPlugin('pluginDev', function(options) {
  var player = this,
  overlay = document.createElement('p');
  overlay.className = 'vjs-overlay';
  overlay.innerHTML = options.overlayText;
  player.el().appendChild(overlay);
});

Parcourez la page HTML et vous verrez le nouveau texte utilisé.

Déployer le plugin

Une fois que le plugin, le CSS et le lecteur fonctionnent correctement, vous devez déployer les actifs pour une utilisation correcte. Voici un aperçu des étapes requises pour le déploiement:

Copiez / déplacez les fichiers JavaScript et CSS vers votre emplacement distant
Utilisez Studio pour ajouter la configuration du plugin au lecteur.
Créez un fichier HTML à tester et utilisez l'implémentation iframe pour le lecteur
Tester les anomalies

Vous allez maintenant être guidé à travers ces étapes.

Déplacez les fichiers JavaScript et CSS de votre plugin vers un emplacement accessible sur Internet de votre choix.
Si vous le souhaitez, vous pouvez utiliser les fichiers à l'emplacement indiqué ci-dessous dans l'exemple. Vous pouvez également utiliser le API du système de livraison pour stocker les fichiers dans votre propre référentiel.
Dans le dossier dans lequel vous travaillez, créez un autre fichier appelé plugin-dev-iframe.html.
Utilisez Studio Players module pour modifier le lecteur que vous avez créé précédemment.
Cliquez sur Plugins dans le menu de navigation de gauche.
Cliquez sur suivant Ajouter un plugin> Plugin personnalisé.
Pour le nom du plugin, entrez pluginDev. Ce nom DOIT correspondre au nom de votre plugin.

Pour le JavaScript URL, saisissez (ou votre URL):

 https://solutions.brightcove.com/bcls/brightcove-player/plugins/plugin-dev.js

Pour le CSS URL, saisissez (ou votre URL):

 https://solutions.brightcove.com/bcls/brightcove-player/plugins/plugin-dev.css

Entrez les options de configuration dans la zone de texte Options (JSON) .
```
 {"overlayText": "This data is supplied at initialization"}
```
Votre boîte de dialogue de configuration doit ressembler à ce qui suit:
Cliquez sur Save.
Pour publier le lecteur, cliquez sur Publier et intégrer > Publier les modifications.
Pour fermer la boîte de dialogue ouverte, cliquez sur Fermer.
dans le Media module, sélectionnez une vidéo et publiez-la avec le lecteur nouvellement mis à jour et publié.
Copiez le Standard code et collez-le dans le corps du plugin-dev-iframe.html page. Votre page doit ressembler à ce qui suit :

Du Embed Code & URL > Published Player menu, copiez le Standard Embed Code code et collez-le dans le corps du plugin-dev-iframe.html page. Votre page doit ressembler à ce qui suit :

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Quick Start Plugin Dev - iframe</title>
</head>

<body>
    <iframe src='https://players.brightcove.net/1507807800001/Bk6LLayNQ_default/index.html' allowfullscreen allow='encrypted-media'></iframe>
</body>

</html>

Parcourez la page HTML et vous devriez voir le plugin fonctionner correctement avec l'iframe.

Plugins avec plusieurs lecteurs sur une page

Lorsque plusieurs lecteurs sont utilisés sur une même page et que les deux lecteurs utilisent un plugin du même nom, mais qu'il s'agit en fait de plugins différents, seul le plugin du premier lecteur chargé sera utilisé. La raison en est que videojs est une variable globale. Les deux lecteurs semblent être de la même version puisque les noms des plugins sont les mêmes, qu'ils partagent les mêmes vidéos et que, par souci d'efficacité, le lecteur ne charge qu'une seule version. Cela signifie que les plugins du même nom enregistrés à l'aide de videojs.registerPlugin() sont partagés par tous les lecteurs de la même version.

Il existe plusieurs solutions à ce problème. Il s'agit de :

Modifiez les noms des plugins.
N'implémentez pas la fonctionnalité en tant que plugin Video.js, mais plutôt en tant que script général.

3rd party bibliothèques

Si votre plugin a des dépendances sur des bibliothèques tierces, par exemple jQuery, vous devez les inclure de l'une de ces deux manières:

Ajoutez la bibliothèque en tant qu'un autre fichier JavaScript dans le Plugins section de Players module dans Nuage vidéo Studio.
Ajouter plusieurs entrées dans le scripts section de la configuration du lecteur dans une instruction curl.

Assurez-vous de mettre les bibliothèques dont dépend votre plugin avant l'entrée JavaScript de votre plugin dans les deux scénarios listés ci-dessus. L'ordre d'entrée est important.