Étape par étape : Générateur de plug-in Video.js
Le générateur de plugins video.js crée les fichiers et dossiers nécessaires pour créer un plugin conventionnel. Il comprend un environnement de test afin que vous puissiez facilement voir vos modifications lorsque vous développez votre plugin. Il génère même les fichiers de plug-in finaux que vous pouvez utiliser lorsque vous êtes prêt à le publier.
Aperçu
Dans cette rubrique, vous allez effectuer les tâches suivantes :
- Configurez votre environnement
- Créer la fondation du plugin
- Afficher les fichiers source
- Testez votre plugin
- Modifier le fichier JavaScript
- Editez le fichier CSS
- Construisez votre plugin
- Transmettez des données à votre plugin
- Recommandations
- Ressources
Pour obtenir un aperçu vidéo, voir les éléments suivants :
Configurez votre environnement
Pour configurer votre environnement pour exécuter le générateur de plugins, procédez comme suit:
-
Si vous ne l'avez pas déjà, téléchargez et installez le Runtime JavaScript Node.js. Cela inclut npm, qui est un écosystème de packages qui comprend une grande collection de bibliothèques open source.
- Créez un dossier local sur votre ordinateur. Pour cet exemple, nous en créerons un nommé tester. C'est là que les fichiers du générateur et vos fichiers de plugins iront.
- Revoir le LISEZ-MOI informations pour le générateur de plugin video.js. dans le docs dossier, ouvrez et examinez le Conventions du plugin video.js. Ce document décrit les règles recommandées pour créer votre plugin.
- Ouvrez l'application Terminal dans le dossier que vous avez créé à une étape précédente. Pour cet exemple, ouvrez l'application Terminal dans le tester dossier.
-
Dans l'application Terminal, installez le générateur de plugins avec Yeoman:
$ npm install -g yo generator-videojs-plugin
Le générateur de plugins video.js utilise un générateur Yeoman, qui est un outil d'échafaudage pour configurer les bases de tout projet. Cela configure les fichiers et dossiers de base. Vous n'avez pas besoin de comprendre Yeoman. Il vous suffit de l'installer avec le générateur de plugins.
Créer la fondation du plugin
Dans cette section, vous allez créer les dossiers et fichiers de base pour votre plugin.
-
Dans le terminal, exécutez la commande suivante :
$ yo videojs-plugin
-
Ensuite, on vous posera une série de questions sur les détails de votre plugin. Voici une liste des options ainsi qu'une brève description de chacune.
Option Description Valeurs pour cet exemple Portée du package Facultatif: Cela n'est nécessaire que si vous prévoyez de publier votre plugin dans une organisation npm privée. Vous pouvez utiliser le nom de votre entreprise ici ou le laisser vide. Vide Nom du plugin Donnez un nom à votre plugin. Entrer le nom démo crée un plugin nommé videojs-demo. démo Description Entrez une description pour votre plugin. Ceci est une démo Auteur Le format du nom et de l'adresse e-mail n'est pas obligatoire, mais est utilisé pour renseigner le auteur champ dans le package.json fichier. Le générateur essaiera de deviner ces valeurs en fonction de votre configuration git, mais vous pouvez les modifier. [votre nom] <votre adresse e-mail> Licence Sélectionnez l'une des options de licence. Pour vos plugins privés, vous pouvez sélectionner Sans licence. Sans licence Plugin de base ou avancé Le plugin de base basé sur des fonctions est une simple fonction JavaScript. Si vous avez écrit un plugin Video.js dans le passé, vous devez être familiarisé avec le concept de base du plugin.
Le plugin avancé basé sur les classes a été introduit avec Video.js 6. Ce type de plugin commence par une classe JavaScript, qui est une fonction constructeur.
Pour plus de détails, consultez le Plugins Video.js documentation Lisez-moi.Plugin de base (basé sur les fonctions) Outillage CSS Sélectionnez oui, si vous souhaitez inclure le style CSS. Cela générera un fichier CSS. Oui Outils de documentation Si oui, le générateur inclut JSDoc et fournit une commande pour générer la documentation. Non Chaînes internationalisées Ceci est utile si vous souhaitez traduire du texte dans différentes langues. L'outil n'offre pas de traduction automatique, mais il convertit les fichiers du format JSON video.js en JavaScript. Ensuite, vous pouvez créer des langages comme vous le feriez pour video.js et les faire compiler dans la sortie de votre plugin. Non Lint a changé les fichiers Inclure un outil de peluchage appelé standard videojs. Ce processus vérifie votre code pour certaines erreurs courantes. Oui Avant Git push Cela vous donne la possibilité d'empêcher le transfert vers un référentiel git si les vérifications sélectionnées échouent. La vérification de la qualité du code est un bon moyen d'éviter de pousser du code qui n'est pas conforme aux normes. Non Voici à quoi ressemble la sortie avec les valeurs définies pour cet exemple:
- Lorsque la configuration est terminée, vous verrez plusieurs messages. Il peut y avoir des messages d'avertissement, mais aucune erreur.
Notez que le nom du plugin est videojs-demo.
Afficher les fichiers source
Dans cette section, nous passerons en revue les fichiers source créés par le générateur videojs.
-
Dans un éditeur, ouvrez le dossier supérieur où vous avez placé votre projet de plugin. Ouvrez le src dossier. Vous trouverez ici les éléments suivants:
- UNE plugin.js fichier. Ce fichier contient le code de votre plugin.
- UNE plugin.css fichier, si vous avez sélectionné Oui à l'option d'outillage CSS.
- (Si vous n'avez pas sélectionné Oui à l'option d'outils CSS, vous pouvez ignorer cette étape.) Ouvrez le src> plugin.css fichier.
Votre code doit ressembler à ce qui suit :
/* Note: all vars must be defined here, there are no "local" vars */ :root { --main-color: red; --base-font-size: 9; --font-size: 7; } .video-js { &.vjs-demo { /* This class is added to the video.js element by the plugin by default. */ display: block; & .remove-me, & .remove-me-too, &.finally-remove-me { /* examples of postcss syntax, you probably want to remove this */ color: var(--main-color); /** * Note that you have to use calc and multiply by a value with a unit * prepending the unit like `var(--base-font-size)px` or * `calc(10 * var(--base-font-size)em` will NOT work! */ font-size: calc(var(--font-size) * 8 * var(--base-font-size) * 1px); } } }
- Ouvrez le src> plugin.js fichier.
Votre code doit ressembler à ce qui suit :
- Lignes 25-27: appelez le
onPlayerReady()
fonction, lorsque le lecteur est prêt. Ici, vous pouvez passer des variables dans votre plugin en utilisant leoptions
objet. - Ligne 26: ajoute le
vjs-demo
classe à votre joueur. Par défaut, c'est la seule chose que fait le code squelette. C'est ici que vous pouvez ajouter des fonctionnalités à votre plugin. - Ligne 48: enregistre votre plugin avec video.js.
- Ligne 51: ajoute un paramètre de version à votre plugin. Lorsque vous exécutez le version npm script, il mettra à jour cette variable avec la version sur laquelle vous vous trouvez.
import videojs from 'video.js'; import {version as VERSION} from '../package.json'; // Default options for the plugin. const defaults = {}; // Cross-compatibility for Video.js 5 and 6. const registerPlugin = videojs.registerPlugin || videojs.plugin; // const dom = videojs.dom || videojs; /** * Function to invoke when the player is ready. * * This is a great place for your plugin to initialize itself. When this * function is called, the player will have its DOM and child components * in place. * * @function onPlayerReady * @param {Player} player * A Video.js player object. * * @param {Object} [options={}] * A plain object containing options for the plugin. */ const onPlayerReady = (player, options) => { player.addClass('vjs-demo'); }; /** * A video.js plugin. * * In the plugin function, the value of `this` is a video.js `Player` * instance. You cannot rely on the player being in a "ready" state here, * depending on how the plugin is invoked. This may or may not be important * to you; if not, remove the wait for "ready"! * * @function demo * @param {Object} [options={}] * An object of options left to the plugin author to define. */ const demo = function(options) { this.ready(() => { onPlayerReady(this, videojs.mergeOptions(defaults, options)); }); }; // Register the plugin with video.js. registerPlugin('demo', demo); // Include the version number. demo.VERSION = VERSION; export default demo;
- Lignes 25-27: appelez le
Testez votre plugin
Le générateur de plugins facilite le développement et le test de votre plugin à l'aide d'un environnement de test local. Suivez ces étapes pour tester votre plugin:
-
Dans le terminal, entrez la commande suivante pour démarrer le serveur de développement:
$ npm start
- Dans un navigateur, saisissez ce qui suit pour ouvrir le serveur de développement:
http://localhost:9999/
Vous devriez voir le lecteur avec une vidéo de test. Le générateur vous donne un lecteur de démonstration qui s'exécute dans la page. Dans les outils de développement du navigateur, ouvrez le Éléments onglet pour voir le code HTML du lecteur.
- Inspectez les éléments de cette page Web. Vous devriez voir que le
vjs-demo
la classe a été ajoutée au lecteur. N'oubliez pas que nous avons ajouté cette classe au lecteur dans le code du plugin. - Maintenant, essayons d'ajouter du code au plugin pour démarrer automatiquement la lecture de la vidéo lorsque le lecteur se charge. Revenir au src> plugin.js fichier dans votre éditeur.
- dans le
onPlayerReady()
méthode, ajoutez du code pour démarrer la lecture de la vidéo.const onPlayerReady = (player, options) => { player.addClass('vjs-demo'); player.play(); };
- Sauver la plugin.js fichier dans votre éditeur. Lorsque vous actualisez votre navigateur, vous devriez voir que la lecture de la vidéo commence dans l'environnement de test.
Lorsque vous développez votre plugin dans le plugin.js fichier et enregistrer les modifications, l'outil reconstruit et recharge automatiquement le lecteur dans le navigateur. Cela facilite le développement et le test de votre plugin.
-
Supprimez la ligne de code pour commencer la lecture de la vidéo.
player.play();
Modifier le fichier JavaScript
Dans cette section, vous allez ajouter du code au fichier source JavaScript pour ajouter un élément de paragraphe avec du texte personnalisé au lecteur.
- Dans votre éditeur, retournez au src> plugin.js déposer.
- dans le
onPlayerReady()
fonction, ajoutez du code pour ajouter un<p>
élément avec un texte personnalisé au joueur.const onPlayerReady = (player, options) => { player.addClass('vjs-demo'); var textDisplay = document.createElement('p'); textDisplay.className = 'vjs-text'; textDisplay.innerHTML = "Becoming a plugin developer"; player.el().appendChild(textDisplay); };
- Enregistrez le fichier. N'oubliez pas que vos modifications seront automatiquement mises à jour dans le navigateur de test.
- Revenez dans le navigateur de test. Vous verrez que rien n'a changé dans le lecteur. Le problème est que le texte est là, mais il n'est pas visible. Nous réglerons cela ensuite.
Pour vérifier que l'élément de texte a été ajouté au lecteur, utilisez les outils de développement dans le navigateur. dans le Éléments section, développez le lecteur
<div>
élément. Vous devriez voir la balise de paragraphe nouvellement ajoutée.Nous rendrons le texte visible dans la section suivante en utilisant CSS.
Editez le fichier CSS
Dans cette section, vous ajouterez du code au fichier source CSS pour afficher du texte sur le lecteur.
- Dans votre éditeur, revenez à la src> plugin.css fichier.
- Ajouter le
.vjs-text
sélecteur avec des styles pour afficher le texte personnalisé dans le lecteur./* Note: all vars must be defined here, there are no "local" vars */ :root { --main-color: red; --base-font-size: 9; --font-size: 7; } .vjs-text { background-color: #333333; color: white; position: absolute; font-size: 2em; text-align: center; width: 100%; margin-top: 10%; }
- Enregistrez le fichier. N'oubliez pas que vos modifications seront automatiquement mises à jour dans le navigateur de test.
- Revenez dans le navigateur de test. Vous devriez maintenant voir le texte personnalisé affiché sur le lecteur.
- Arrêtez le serveur de développement en appuyant sur CTRL-C dans l'application Terminal.
Vous êtes maintenant prêt à préparer votre plugin pour la distribution. Nous ferons cela ensuite.
Construisez votre plugin
Dans cette section, vous construirez votre plugin. Cela prend votre code source et crée des fichiers CSS et JavaScript distribuables.
-
Dans le terminal, exécutez la commande suivante :
$ npm run build
La construction prend votre code source ES6 et le convertit en code JavaScript ES5.
-
Dans votre dossier de projet, développez le dist dossier. C'est ici que vous trouverez une version distribuable de votre plugin. Ici, vous devriez trouver les fichiers suivants (en supposant que vous ayez sélectionné Oui pour l'outillage CSS):
- videojs-demo.css
- videojs-demo.js
- videojs-demo.min.js
Vous trouverez également ces fichiers moins couramment utilisés:
- dans le dist dossier, ouvrez le videojs-demo.js fichier.
Quelques points à noter à propos de ce fichier de distribution:
- Une bannière de licence a été ajoutée en haut du fichier.
- Votre plugin a été enveloppé dans un browserify espace de noms. Cela signifie qu'il n'y a pas de variables globales qui pourraient entrer en conflit avec votre code de page.
- Le plugin s'enregistre en interne avec videojs. Cela signifie que vous pouvez créer plusieurs plugins, chacun fonctionnant indépendamment, pour un joueur.
Transmettez des données à votre plugin
Cette section est facultative. Vous pouvez ignorer cette section à moins que vous ne souhaitiez apprendre à transmettre des données à votre plugin.
-
Nous utiliserons le
options
propriété pour transmettre les données de notre page HTML au plugin. Pour plus d'informations sur l'utilisation de cette propriété, consultez le Passer des données au plug-in document. -
Dans votre éditeur, retournez au src> plugin.js déposer.
-
dans le
onPlayerReady()
fonction, ajoutez du code pour utiliser la valeur de texte dans leoptions
propriété si elle existe, sinon utilisez une valeur de texte par défaut.- Ligne 4: crée un élément de paragraphe
- Ligne 5: attribue le type de classe de texte
- Ligne 6: vérifie si le
displayText
l'objet existe dans leoptions
propriété - Ligne 7: utilise le
displayText
valeur pour remplir l'affichage du texte - Ligne 9: utilise la valeur d'affichage du texte par défaut
- Ligne 13: ajoute l'élément de texte d'affichage au DOM
const onPlayerReady = (player, options) => { player.addClass('vjs-demo'); var textDisplay = document.createElement('p'); textDisplay.className = 'vjs-text'; if ('displayText' in options) { textDisplay.innerHTML = options.displayText; } else { textDisplay.innerHTML = "Becoming a plugin developer"; } player.el().appendChild(textDisplay); };
- Enregistrez le fichier et revenez au navigateur de test. Vous ne devriez voir aucun changement dans l'affichage du texte.
- Si vous ne l'avez pas déjà fait, ajoutez le css pour le
.vjs-text
sélecteur du Editez le fichier CSS section. - Construisez votre plugin. Nous utiliserons les fichiers dans le dist dossier dans une page Web de test.
- Dans votre serveur de test local, comme MAMP, créez un dossier nommé plugin-générateur.
- Dans ce dossier, copiez le videojs-demo.css et videojs-demo.js fichiers du dist dossier et collez-les dans votre dossier de serveur de test, plugin-générateur.
- Ensuite, dans ce dossier, créez un fichier HTML avec un lecteur qui appelle notre
demo
plugin et transmet une valeur pour le texte d'affichage. Nous nommerons ce fichier testing.html.- Ligne 8: inclut nos styles de plugins.
- Lignes 13-22: ajoutez un Brightcove Player à notre page Web.
- Ligne 24: inclut notre fichier JavaScript du plugin.
- Lignes 26-32: exécutez un script de page personnalisé.
- Ligne 27: attend que le joueur soit prêt.
- Ligne 28: obtient une référence au joueur.
- Ligne 29: définit le
options
objet. - Ligne 30: appelle notre
demo
plugin et passe dans leoptions
objet. Notez que le nom du plugin estdemo
, tandis que les noms des fichiers du plugin sontvideojs-demo
.
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Passing data to the plugin</title> <link href="videojs-demo.css" rel="stylesheet"> </head> <body> <video-js id="myPlayerID" data-video-id="5977793284001" data-account="1752604059001" data-player="default" data-embed="default" data-application-id="" width="640px" height="360px" controls=""></video-js> <script src="//players.brightcove.net/1752604059001/default_default/index.min.js"></script> <script type="text/javascript" src="videojs-demo.js"></script> <script type="text/javascript"> videojs.getPlayer('myPlayerID').ready(function() { var myPlayer = this, options = {"displayText": "This data supplied at initialization"}; myPlayer.demo(options); }); </script> </body> </html>
- Dans un navigateur, exécutez le testing.html fichier. Vous devriez voir que la valeur du texte d'affichage provient du code de la page au lieu du plugin.
Recommandations
Il est recommandé d'utiliser ce générateur pour tous vos plugins, même les plus simples. De cette façon, vous aurez toujours la même configuration pour tous vos plugins. Cela vous libère également de la tâche de créer des scripts pour exécuter certaines fonctions, comme le peluchage ou la réduction.
Avec ce générateur, vous pouvez vous concentrer sur le développement et le test de votre plugin sans avoir à vous soucier des outils sous-jacents.
Vous pouvez garder votre plugin local ou le mettre sur votre dépôt GitHub privé. La création d'un plugin videojs signifie qu'il fonctionnera avec le Brightcove Player.
Ressources
Voici un résumé des ressources que vous utiliserez tout au long de ce démarrage rapide. Ces liens sont également fournis dans les étapes ci-dessous:
- Télécharger et installer: Node.js (cela inclut npm)
Utilisez la version «Recommandé pour la plupart des utilisateurs».
- Le générateur video.js
- Les conventions du plugin video.js
- Premiers pas avec npm
- L'outil d'échafaudage Yeoman