L'une des missions de l'équipe chargée du lecteur Web chez Brightcove est d'éliminer les obstacles à l'intégration du lecteur Brightcove. Notre objectif est d'enthousiasmer nos clients par la flexibilité, la stabilité et la facilité d'utilisation du lecteur.
L'architecture fondamentale du lecteur web HTML5 n'a pas beaucoup changé au cours des cinq dernières années environ. Les lecteurs sont gérés via l'API de gestion des lecteurs ou le Studio (qui utilise l'API), publiés à la demande et hébergés sur notre CDN à l'adresse suivante players.brightcove.net en tant que scripts autonomes.
Au cours des cinq dernières années, les outils web ont continué à se sophistiquer et le JavaScript hébergé par le CDN n'est souvent pas adapté aux nouveaux paradigmes. Au lieu de coller un <script> dans leurs modèles web ou leur CMS, les développeurs web et autres utilisateurs avancés s'attendent à pouvoir installer un paquet par le biais de npm, import Il s'agit d'un Module ESet l'intègrent dans leur application par l'intermédiaire de webpack, Enroulementou similaire.
Jusqu'à présent, la plupart de ces utilisateurs avancés ont développé leurs propres solutions. Cela nous indique que notre écosystème Player ne répond pas pleinement aux besoins de nos clients et que ces utilisateurs sont obligés de travailler autour de nous plutôt qu'avec nous. Afin de mieux servir ces utilisateurs, nous offrons maintenant une suite optionnelle d'outils libres et gratuits - tous disponibles sur npm - qui peuvent être utilisés avec la plupart des piles d'outils web modernes.
Collectivement, nous appelons ces outils la boîte à outils du lecteur Brightcove.
En 2018, la boîte à outils comprend
PLAYER LOADER
Le chargeur de lecteur est notre chargeur de script asynchrone officiel, indépendant de toute structure ou de tout outil, et notre générateur d'intégration pour le lecteur Brightcove. Il est indépendant de toute chaîne d'outils spécifique et sert un double objectif :
- Il génère n'importe quel code d'intégration avec de nombreuses options et prend en charge les personnalisations requises par certains plugins du lecteur Brightcove.
- Il téléchargera les scripts de lecteur de notre CDN de manière asynchrone et initialisera automatiquement tous les éléments correspondants.
Cet outil est entièrement configuré à l'exécution, ce qui signifie qu'il téléchargera toujours le dernier lecteur à l'exécution.
Le Player Loader est disponible sur npm en tant que @brightcove/player-loader. Commencez par lire le README ou la documentation de Brightcove.
EXEMPLE
NOTE : Bien que cet exemple utilise des modules ES, ils ne sont pas obligatoires - vous devriez pouvoir utiliser CommonJS, AMD, ou une simple balise de script.
<body>
<div id="player-container"></div>
</body>
import brightcovePlayerLoader from '@brightcove/player-loader';
brightcovePlayerLoader({
refNode: '#player-container',
accountId: '123456789',
playerId: 'AbCDeFgHi',
videoId: '987654321'
})
.then(function(success) {
// The player has been created!
// success.type will be "in-page" or "iframe"
// success.ref will be the player or the iframe element
})
.catch(function(error) {
// Player creation failed!
});
REACT PLAYER LOADER (CHARGEUR DE LECTEUR)
Le projet React Player Loader offre aux utilisateurs un composant React officiel qui peut être utilisé pour intégrer et télécharger un lecteur Brightcove en utilisant le Player Loader dans les coulisses.
Ce composant prend en charge toutes les options du chargeur de lecteur(à quelques exceptions près) et s'occupe de l'élimination du lecteur lorsque le composant React se démonte.
Le React Player Loader est disponible sur npm en tant que @brightcove/react-player-loader. Commencez par lire le README ou la documentation de Brightcove.
EXEMPLE (JSX)
NOTE : React/ReactDOM/global ne sont PAS obligatoires, ils ne sont utilisés que pour montrer un exemple de fonctionnement.
import document from 'global/document';
import React from 'react';
import ReactDOM from 'react-dom';
import BrightcovePlayer from '@brightcove/react-player-loader';
let brightcovePlayer;
// A success callback will offer two ways of accessing the underlying player
// or iframe.
const onSuccess = function(success) {
console.log(success.ref);
console.log(brightcovePlayer.player);
};
brightcovePlayer = ReactDOM.render(
<BrightcovePlayer accountId='1234678' onSuccess={onSuccess}/>,
document.getElementById('fixture')
);
PLUGIN WEBPACK DE CHARGEMENT DE LECTEUR
Le plugin webpack Player Loader est notre plugin webpack officiel pour l'intégration du lecteur Brightcove. Il n'a qu'un seul objectif : ajouter un lecteur Brightcove à un pack webpack, en évitant une requête HTTP asynchrone supplémentaire.
Contrairement au chargeur de lecteur Brightcove, cet outil ne crée pas d'éléments intégrés.
Cependant, il peut être utilisé avec le Player Loader. Dans cette configuration, le plugin webpack va pré-remplir un lecteur tandis que le chargeur de lecteur sera utilisé pour générer des éléments intégrés. Le chargeur de lecteur ne rechargera pas les lecteurs Brightcove qu'il a déjà téléchargés ou détectés en mémoire, de sorte que les lecteurs ajoutés à l'ensemble ne seront pas rechargés.
Le seul inconvénient de cet outil est qu'il ne télécharge le lecteur qu'au moment de la création. En d'autres termes, si vous publiez à nouveau votre lecteur, votre bundle webpack devra être recréé avant que le lecteur ne soit mis à jour sur votre site Web.
Le plugin webpack Player Loader est disponible sur npm en tant que @brightcove/player-loader-webpack-plugin. Commencez par lire le README.
EXEMPLE
L'exemple de code suivant serait placé dans votre webpack.config.js fichier.
const PlayerLoaderPlugin = require('@brightcove/player-loader-webpack-plugin');
module.exports = {
// Other webpack configuration here...
plugins: [
new PlayerLoaderPlugin({accountId: '123456789', playerId: 'AbCDeFgHi'})
]
};
CONCLUSION
Nous espérons que cette nouvelle collection d'outils sera utile à nos clients qui utilisent le lecteur Brightcove dans des chaînes d'outils modernes.
Bien que le lecteur Brightcove ne soit ni gratuit ni open source, les outils qui composent la boîte à outils du lecteur Brightcove sont tous gratuits et open source et tombent sous la licence Apache-2.0.
En d'autres termes, ils ne sont pas officiellement pris en charge par Brightcove, Inc. et les commentaires ou les rapports de bogues ne doivent pas être adressés au support client de Brightcove.
Cette mise en garde étant faite, il convient de mentionner que nos ingénieurs ne sont pas étrangers à l'open source et que nous nous engageons à faire de notre mieux pour répondre aux commentaires, aux rapports de bogues et aux demandes d'extraction sur GitHub.
Nous encourageons toute personne à contribuer à ces outils open source afin de les améliorer pour tout le monde !
RÉFÉRENCES
LES RÉFÉRENTIELS ET LA DOCUMENTATION SUR LES LOGICIELS LIBRES
DOCUMENTATION D'ASSISTANCE BRIGHTCOVE
