Entwickeln von Playervorlagen

Product
Video Cloud
Betrifft die Rollen
Entwickler
Version
Brightcove 5
Module
BEML
Edition
Pro, Enterprise
Erstellt von Britta Schellenberg.

Ein Brightcove-Player wird durch ein XML-Dokument definiert, das als Playervorlage bezeichnet wird. Brightcove umfasst eine Reihe von standardmäßigen Playervorlagen, bietet Ihnen jedoch auch die Möglichkeit, benutzerdefinierte Playervorlagen zu erstellen. In diesem Dokument werden die Hauptbestandteile einer benutzerdefinierten Playervorlage beschrieben.

Benutzerdefinierte Playervorlagen stehen nur Kunden von Brightcove Pro und Enterprise zur Verfügung. Wenn Sie Ihr Brightcove-Konto heraufstufen möchten, nehmen Sie Kontakt mit Brightcove auf, um weitere Informationen zu erhalten.

Dieser Themenbereich enthält Informationen zu den folgenden Punkten:

Hauptelemente in BEML

Der XML-Code, der in einer benutzerdefinierten Playervorlage verwendet wird, wird durch die Dokumenttypdefinition (DTD) für die Brightcove Experience Markup Language (BEML) definiert. In der BEML-DTD-Referenz werden alle XML-Elemente und -Attribute beschrieben, die in einem BEML-Dokument verwendet werden können. Die Standard-Playervorlagen eignen sich ideal als Ausgangspunkt zum Entwickeln von eigenen Playervorlagen. Sie können die BEML für jede Standard-Playervorlage als ZIP-Datei herunterladen.

Jedes Element in einer Playervorlage definiert einen visuellen oder nichtvisuellen Aspekt eines Players. Ein Element kann ein Benutzeroberflächenelement (Textlabel, Banner oder Videoplayer bzw. Layoutelement) definieren, wodurch definiert wird, wie die Benutzeroberflächenelemente im Verhältnis zueinander und zum allgemeinen Layout des Players angeordnet werden. Anhand der Attribute der Playerelemente werden Aspekte wie die Position der Elemente (ausgedrückt in x- und y-Koordinaten), der Stil und die Quelle der anzuzeigenden Daten definiert (Videoname, Position des Bilds usw.). Zu den Hauptelementen in einer Playervorlage zählen:

BEML und XML

Da es sich bei einer BEML-Playervorlage um ein XML-Dokument handelt, müssen Sie XML-Grundkenntnisse besitzen, um benutzerdefinierte Playervorlagen in BEML erstellen zu können. In den folgenden Ressourcen finden Sie grundlegende Informationen zu XML:

In XML-Dateien treten am häufigsten Probleme im Zusammenhang mit Sonderzeichen auf. Deshalb sollten Sie im XML-Code die folgenden fünf Sonderzeichen mit Escape-Zeichen versehen:

Zeichen
Escape-Zeichen
<
&lt;
>
&gt;
&
&amp;
'
&apos;
"
&quot;

Verwenden Sie keine zusätzlichen Leerstellen in XML-Attributen. Verwenden Sie beispielsweise diese Syntax:

<element id="foo" />

und nicht diese Syntax:

<element id = "foo" />

Die zusätzlichen Leerstellen vor und nach dem Gleichheitszeichen in diesem Beispiel verhindern die Gestaltung der Playervorlage im Veröffentlichungsmodul.

Labels-Element: Anpassen und Lokalisieren von Text

Mit dem Labels-Element in einer Playervorlage können Sie den Text der Labels in Ihrem Player anpassen. So können Sie Labels in den verschiedensten Sprachen erstellen und den Text auf besondere Weise gestalten, beispielsweise für Marken- oder Werbezwecke. Weitere Informationen finden Sie unter Lokalisieren von Playern.

Theme-Element: Anpassen von Design und Verhalten

Durch Verwendung des Theme-Elements in einer Playervorlage können Sie das Design und Verhalten Ihrer benutzerdefinierten Brightcove-Player anpassen. Je nachdem, wie individuell Sie die Anpassung vornehmen möchten, können Sie die Theme- und Style-Elemente für folgende Zwecke verwenden:

Wenn eine Playervorlage kein Theme-Element enthält, ist es nicht möglich, die Stile der Player, die auf dieser Playervorlage basieren, mithilfe des Veröffentlichungsmoduls zu ändern. Weitere Informationen finden Sie unter Designs und Stile in Playervorlagen.

Layout-Element: Anpassen der Position

Das Layout-Element steuert, welche Benutzeroberflächenelemente in einen Player aufgenommen werden und wo sie im Player positioniert werden. Ein Layout-Element kann zwei Arten von untergeordneten Elementen enthalten: Layoutboxen und Komponenten. Layoutboxen sind Container für andere Elemente, bei denen es sich entweder um weitere Layoutboxen oder um Komponenten handeln kann. Die übergeordnete Layoutbox bestimmt das Layout und die Größe der untergeordneten Elemente. Die Komponenten sind die Benutzeroberflächenelemente, wie beispielsweise VideoPlayer, Label oder Image.

Normalerweise werden Layoutboxen nicht dargestellt. Sie können einer Layoutbox jedoch eine Hintergrundfarbe und ein Hintergrundbild zuweisen. Diese Farbe und dieses Bild werden dann hinter allen untergeordneten Elementen angezeigt. Folgende Standard-Layoutboxen stehen zur Verfügung:

Canvas

Dies ist die einfachste Layoutbox. Die untergeordneten Elemente einer Canvas-Layoutbox werden an der absoluten x/y-Position platziert, die im untergeordneten Element angegeben ist.

HBox

Eine horizontale Layoutbox, in der alle untergeordneten Elemente horizontal angeordnet werden. Die untergeordneten Elemente einer HBox-Layoutbox werden nacheinander von links nach rechts positioniert. Jedes untergeordnete Element wird direkt rechts neben seinem Vorgängerelement platziert, wobei wahlweise ein Abstand eingehalten werden kann.

VBox

Eine vertikale Layoutbox, in der alle untergeordneten Elemente vertikal angeordnet werden. Die untergeordneten Elemente einer VBox-Layoutbox werden nacheinander von oben nach unten positioniert. Jedes untergeordnete Element wird direkt unterhalb seines Vorgängerelements platziert, wobei wahlweise ein Abstand eingehalten werden kann.

Grid

Diese Layoutbox ermöglicht ein komplexeres Layout, in dem die untergeordneten Elemente in Spalten und Reihen angeordnet werden.

TextRegion

Mithilfe einer TextRegion-Layoutbox können Sie Textkomponenten (wie Labels, Links usw.) gruppieren und die Gruppe im Gestaltungsmodus des Veröffentlichungsmoduls als einheitlichere Komponente strukturieren. Dies umfasst neue Funktionen zum Festlegen der Hintergrund- und Rahmenfarben des Bereichs.

Weitere Informationen zum Layout-Element und zu Layoutboxen finden Sie unter Layoutelemente in Playervorlagen.

Komponenten: Benutzeroberflächenelemente

Zu Komponenten zählen mehrere verschiedene Objektklassen, die Sie in das Layout eines Players aufnehmen können. Es kann sich dabei um visuelle Komponenten handeln, wie beispielsweise ein VideoPlayer oder ein Bild, oder um nicht visuelle Komponenten. Die folgende Abbildung zeigt, wie einige dieser Elemente in einem Player dargestellt werden:

Brightcove bietet die folgenden Standardkomponenten, die unter dem Thema Komponenten in Playervorlagen und in der BEML-DTD-Referenz ausführlicher beschrieben werden:

VideoPlayer

Besteht aus einem Videofenster und mehreren standardmäßigen Brightcove-Mediensteuerelementen. Sie enthält u. a. einen Wechselschalter für Abspielen/Pause, eine Navigationsleiste für die Zeitachse, Lautstärkeregler, Steuerelemente zum Maximieren und eine Schaltfläche für den Menüzugriff.

VideoDisplay

Ein Videofenster ohne die standardmäßige Mediensteuerleiste.

ChromelessVideoPlayer

Der ChromelessVideoPlayer sieht wie eine VideoDisplay-Komponente aus, aber ohne die Playersteuerung für den Ladebildschirm („chrome“). Wenn der Betrachter mit der Maus auf den Videodisplaybereich zeigt, werden die Playersteuerelemente im unteren Bereich des Displaybereichs eingeblendet.

MediaControls

Ein Layoutcontainer, der andere Komponenten zur Wiedergabesteuerung enthält, wie Playhead und ToggleButtons.

Playhead

Eine Navigationsleiste, die sich während der Wiedergabe kontinuierlich bewegt und die aktuelle Medienposition anzeigt. Der Benutzer kann den Abspielkopf (Playhead) vor und zurück ziehen, um an eine andere Position zu gelangen.

VolumeControl

Ein vertikaler Schieberegler zur Lautstärkeregelung während der Wiedergabe.

ToggleButton

Eine Grafik mit einem Label, auf die der Benutzer klicken kann. Sie kann zwei Statusmöglichkeiten aufweisen. Sie können verschiedene Grafiken (Symbole), Beschriftungen, QuickInfo und Klickaktionen für den aktivierten und den deaktivierten Status definieren.

Label

Eine einfache Textkomponente, die es Ihnen ermöglicht, einem Player beliebigen Text hinzuzufügen. Der Text kann dynamisch an die Eigenschaft einer anderen Komponente gebunden werden, um beispielsweise den Namen des derzeit abgespielten Videos anzuzeigen.

TitleLabel

Eine Label-Komponente zur Darstellung des „ausgewählten“ Status. Dies eignet sich beispielsweise für Listen, in denen das derzeit ausgewählte Element besonders hervorgehoben werden soll.

Image

Eine Image-Komponente lädt ein skalierbares visuelles Element (.jpg, .gif oder .swf) in einen Player.

Button

Eine Grafik mit einem Label, auf die der Benutzer klicken kann und die Ereignisse senden kann.

ThumbnailButton

Zeigt ein Bild an. Wenn der Betrachter die Maus über das Bild bewegt, wird auf der Schaltfläche ein Abspielen-Symbol angezeigt.

Link

Bietet die Möglichkeit, Text in einem Player anzuzeigen, auf den der Benutzer klicken kann, um zu einer anderen URL zu navigieren oder um JavaScript aufzurufen.

List

Eine vertikale Liste mit Bildlaufleiste, die benutzerdefinierte Listenelemente enthält. Eine List-Komponente enthält ListItem-Elemente, die jeweils andere Komponenten enthalten können.

TileList

Eine kachelförmige Liste, die benutzerdefinierte Listenelemente enthält. Eine TileList-Komponente enthält ListItem-Elemente, die jeweils andere Komponenten enthalten können.

ListItem

Ein ListItem-Element muss innerhalb einer List - oder TileList-Komponente definiert werden. Dies dient als visuelle Definition aller Listenelemente, die in der jeweiligen Liste angezeigt werden. Für die Definition einer ListItem-Komponente wird derselbe BEML-Code verwendet wie für ein Layout-Element. Als Unterkomponente kann jede unterstützte Komponente verwendet werden, mit Ausnahme von VideoPlayer oder einer anderen List-Komponente.

Banner

Das Banner wird in die Werbemöglichkeiten eines Players integriert. Wenn Sie einen Bannerknoten einschließen, ist ein neues Format zulässig, das an alle Aufrufe an Anzeigenserver angefügt wird, um den Anzeigenserver darauf hinzuweisen, dass ein Banner angezeigt werden kann. Die Größe des Banners gibt das unterstützte Anzeigenformat vor. Beispielsweise unterstützt ein Bannerelement mit einer Größe von 468x60 standardmäßig ein Banneranzeigenformat von 468x60. Sie können auch zusätzliche Anzeigenformate angeben, damit mehrere kleinere Banner in einem großen Bannerbereich untergebracht werden können. Die Banner-Attribute steuern, wie diese Banner innerhalb des größeren Bereichs skaliert und ausgerichtet werden.

ExpandingBanner

Das ExpandingBanner wird in die Werbemöglichkeiten eines Players integriert. Wenn Sie einen Knoten für ein erweiterbares Banner einschließen, sind zwei neue Formate zulässig, die an alle Aufrufe an Anzeigenserver angefügt werden, um den Anzeigenserver darauf hinzuweisen, dass ein Banner angezeigt werden kann. Die Größe des Banners gibt die unterstützten Anzeigenformate vor. Beispielsweise unterstützt ein Bannerelement mit einer Größe von 468x60 standardmäßig ein Banneranzeigenformat von 468x60 und eine synchronisierte Bannereinheit von 468x60.

Spacer

Eine Formatierungskomponente, die Abstand zwischen anderen Elementen schafft.

TabBar

Mehrere horizontal angeordnete Registerkarten. Die TabBar-Komponente ermöglicht die Auswahl eines einzelnen Eintrags in der Sammlung. Die TabBar-Komponente beinhaltet Steuerelemente für die Navigation nach rechts und links, wenn nicht alle Registerkarten in die Komponente passen. Wahlweise enthält die TabBar-Komponente eine Registerkarte, für die eine Dropdownliste eingeblendet wird, wenn der Benutzer die Maus über die Komponente bewegt.

SWFLoader

Über die SWFLoader-Komponente können benutzerdefinierte Komponenten geladen werden, deren Position und Größe im Player festgelegt werden können. An die geladene SWF wird eine Prozedur für die Laufzeit-API übergeben, damit sie auf Ereignisse warten und mit den restlichen Playerkomponenten interagieren kann. Weitere Informationen zu benutzerdefinierten Komponenten finden Sie unter Erstellen von benutzerdefinierten Playerkomponenten und Hinzufügen einer benutzerdefinierten Komponente zu einer Playervorlage.

Modules-Element: Benutzerdefinierte Komponenten

Mithilfe des Modules-Elements können Sie nicht darstellbare benutzerdefinierte Komponenten in Ihre Player laden. Ein benutzerdefiniertes Modul muss in einer SWF-Datei kompiliert werden, die außerhalb von Brightcove gehostet wird. Zur Angabe eines benutzerdefinierten Moduls geben Sie als untergeordnetes Element des Modules-Elements ein Module-Element an, das ein file-Attribut mit dem Pfad der zu ladenden SWF enthält. Beispiel:

<Modules>
  <Module file="http://myserver/customReporting.swf" />
</Modules>

Das Module-Element kann wahlweise eine beliebige Anzahl an Parametern enthalten, die an die SWF übergeben werden, wenn diese geladen wird:

<Module file="http://server/file.swf">
  <param name="foo" value="bar" />
  <param name="food" value="grill" />
</Module>

Die Werte der Parameter können auch an andere Elemente in der Playervorlage gebunden werden. Wenn ein Modul beispielsweise bei jeder Änderung einen flashvar-Parameter im HTML-Code und den Namen des Videos benötigt, könnten Sie den folgenden BEML-Code verwenden:

<Module file="http://server/file.swf">
  <param name="customParam" value="{player.parameters.customParam}" />
  <param name="videoName" value="{videoPlayer.video.displayName}" />
</Module>

Ein Modules-Element kann mehrere untergeordnete Module-Elemente enthalten, wenn mehr als eine SWF in den Player geladen werden soll. Verwenden Sie stattdessen die SWFLoader-Komponente für benutzerdefinierte Komponenten, die im Player dargestellt werden sollen. Weitere Informationen zu benutzerdefinierten Komponenten finden Sie unter Erstellen von benutzerdefinierten Playerkomponenten und Hinzufügen einer benutzerdefinierten Komponente zu einer Playervorlage.

Weitere Schritte…

Weitere Informationen über die Elemente, die eine Playervorlage bilden: