Eine der Aufgaben des zentralen Webplayer-Teams hier bei Brightcove besteht darin, Hindernisse für die Integration mit dem Brightcove-Player zu beseitigen. Unser Ziel ist es, unsere Kunden mit der Flexibilität, Stabilität und Benutzerfreundlichkeit des Players zu begeistern.
Die grundlegende Architektur des HTML5-Webplayers hat sich in den letzten fünf Jahren kaum verändert. Player werden über die Player-Verwaltungs-API oder das Studio (das die API verwendet) verwaltet, nach Bedarf veröffentlicht und in unserem CDN gehostet unter players.brightcove.net als eigenständige Skripte.
In den letzten fünf Jahren sind die Webtools immer ausgefeilter geworden, und das im CDN gehostete JavaScript passt oft nicht in die neuen Paradigmen. Anstelle des Einfügens einer <script> Tag in ihre Web-Templates oder CMS integrieren, erwarten Web-Entwickler und andere fortgeschrittene Nutzer, dass sie ein Paket über npm, import es als ES-Modulund bündeln es in ihrer Anwendung über webpack, Rollupoder ähnlich.
Bis jetzt haben die meisten dieser fortgeschrittenen Nutzer ihre eigenen Lösungen entwickelt. Das zeigt uns, dass unser Player-Ökosystem die Anforderungen unserer Kunden nicht vollständig erfüllt und diese Benutzer gezwungen sind, um uns herum statt mit uns zu arbeiten. Um diese Benutzer besser bedienen zu können, bieten wir jetzt eine optionale Suite kostenloser Open-Source-Tools an, die alle über npm verfügbar sind und mit den meisten modernen Web-Tooling-Stacks verwendet werden können.
Diese Tools werden zusammen als Brightcove Player Toolbox bezeichnet.
Ab 2018 umfasst die Toolbox:
PLAYER-LADEGERÄT
Der Player Loader ist unser offizieller, Framework-/Tooling-unabhängiger, asynchroner Skriptlader und Einbettungsgenerator für den Brightcove-Player. Er ist unabhängig von einer bestimmten Toolchain und dient einem doppelten Zweck:
- Es generiert einen beliebigen Einbettungscode mit vielen Optionen und Unterstützung für Anpassungen, die von einigen Brightcove-Player-Plugins benötigt werden.
- Es lädt Player-Skripts asynchron von unserem CDN herunter und initialisiert automatisch alle passenden Einbettungen.
Dieses Tool ist vollständig laufzeitkonfiguriert, d. h. es lädt immer den neuesten Player zur Laufzeit herunter.
Der Player Loader ist auf npm verfügbar als @brightcove/player-loader. Beginnen Sie mit dem Lesen die README oder die Brightcove-Dokumentation.
BEISPIEL
HINWEIS: In diesem Beispiel werden zwar ES-Module verwendet, diese sind jedoch nicht erforderlich - Sie sollten in der Lage sein, auch CommonJS, AMD oder ein einfaches Skript-Tag zu verwenden.
<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
Das React Player Loader-Projekt bietet Benutzern eine offizielle React-Komponente, die zum Einbetten und Herunterladen eines Brightcove-Players unter Verwendung des Player Loaders im Hintergrund verwendet werden kann.
Diese Komponente übernimmt alle Optionen des Player-Loaders(mit einigen Ausnahmen) und kümmert sich um die Entsorgung des Players, wenn die React-Komponente getrennt wird.
Der React Player Loader ist auf npm verfügbar als @brightcove/react-player-loader. Beginnen Sie mit dem Lesen die README oder die Brightcove-Dokumentation.
BEISPIEL (JSX)
HINWEIS: React/ReactDOM/global sind NICHT erforderlich, sie dienen nur als Beispiel.
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')
);
PLAYER-LADER WEBPACK-PLUGIN
Das Player Loader-Webpack-Plugin ist unser offizielles Webpack-Plugin zum Bündeln des Brightcove-Players. Es hat einen einzigen Zweck: einen Brightcove-Player einem Webpack-Bundle voranzustellen, um eine zusätzliche asynchrone HTTP-Anforderung zu vermeiden.
Im Gegensatz zum Brightcove-Player-Loader werden mit diesem Tool keine Einbettungen erstellt.
Es kann jedoch auch mit dem Player Loader verwendet werden. In dieser Konfiguration wird ein Player durch das Webpack-Plugin vorausgefüllt, während der Player Loader zum Generieren von Einbettungen verwendet wird. Der Player Loader lädt Brightcove-Player, die er bereits heruntergeladen oder im Speicher erkannt hat, nicht erneut herunter, sodass alle dem Paket vorangestellten Player nicht erneut heruntergeladen werden.
Der einzige Nachteil dieses Tools ist, dass es den Player nur zum Zeitpunkt der Erstellung herunterlädt. Mit anderen Worten: Wenn Sie Ihren Player erneut veröffentlichen, muss Ihr Webpack-Bündel neu erstellt werden, bevor der Player auf Ihrer Website aktualisiert wird.
Das Player Loader webpack Plugin ist auf npm verfügbar als @brightcove/player-loader-webpack-plugin. Beginnen Sie mit dem Lesen die README.
BEISPIEL
Der folgende Beispielcode würde in Ihrem webpack.config.js Datei.
const PlayerLoaderPlugin = require('@brightcove/player-loader-webpack-plugin');
module.exports = {
// Other webpack configuration here...
plugins: [
new PlayerLoaderPlugin({accountId: '123456789', playerId: 'AbCDeFgHi'})
]
};
SCHLUSSFOLGERUNG
Wir hoffen, dass diese neue Sammlung von Tools für unsere Kunden hilfreich ist, die mit dem Brightcove-Player in modernen Toolchains arbeiten.
Während der Brightcove-Player weder kostenlos noch quelloffen ist, sind die Tools, aus denen die Brightcove-Player-Toolbox besteht, alle kostenlos und quelloffen und fallen unter die Apache-2.0-Lizenz.
Mit anderen Worten: Sie werden nicht offiziell von Brightcove, Inc. unterstützt, und Feedback oder Fehlerberichte sollten nicht an den Brightcove-Kundensupport gerichtet werden.
Nach diesem Vorbehalt ist es erwähnenswert, dass unseren Ingenieuren Open Source nicht fremd ist und wir unser Bestes tun, um auf Feedback, Fehlerberichte und Pull Requests auf GitHub zu reagieren.
Wir begrüßen und ermutigen jeden, zu diesen Open-Source-Tools beizutragen, um sie für alle besser zu machen!
REFERENZEN
REPOSITORIES UND OPEN-SOURCE-DOKUMENTATION
BRIGHTCOVE-SUPPORT-DOKUMENTATION
