Codebeispiele

Die folgenden Codebeispiele veranschaulichen Anpassungen und Verbesserungen an Brightcove Player. Mit doppelten Sternchen ** gekennzeichnete Beispiele hängen teilweise oder vollständig von den Funktionen der Video Cloud ab. Dort finden Sie auch eine alphabetische Liste der Beispiele Hier.

Outstream (Nur Werbung) Spieler

Outstream (Nur Werbung) Spieler

Dieses Beispiel enthält JavaScript-Hilfsfunktionen, die zeigen, wie die Größe von a dynamisch angepasst wird <div> Element in das Seiten-DOM, fügen Sie den Brightcove-Player dort ein, laden und spielen Sie eine Anzeige ab und entfernen Sie den Player

Scrollen des Players mit Anzeigen in die Ansicht

Scrollen des Players mit Anzeigen in die Ansicht

Beachten Sie, dass die horizontale Lautstärkeregelung im Player die vertikale Standardsteuerleiste ersetzt.

Horizontale Lautstärkeregelung (nur 1.x Player)

Horizontale Lautstärkeregelung (nur 1.x Player)

Im Player ersetzt eine horizontale Lautstärkereglerleiste die vertikale Standardsteuerleiste.

Vertikales Volumen

Vertikales Volumen

Stellen Sie den Lautstärkeregler so ein, dass anstelle des horizontalen Standardlayouts ein vertikaler Schieberegler angezeigt wird.

Anzeigenindikatoren in Wiedergabeleiste

Anzeigenindikatoren in Wiedergabeleiste

Dieses Beispiel zeigt einen Player, bei dem die drei mit dem Video verknüpften Werbepunkte in der Wiedergabeleiste als blaue Markierungen angezeigt werden.

Werbung mit dem SSAI-Plugin

Werbung mit dem SSAI-Plugin

In diesem Beispiel werden in einer VMAP-Datei definierte IMA-Anzeigen verwendet, um serverseitige Anzeigen im Videostream zu liefern. Es gibt eine Pre-Roll-, Mid-Roll- und Post-Roll-Anzeige. Die VMAP-Datei wird in der Anzeigenkonfiguration definiert.

Anzeigen-Countdown-Timer

Anzeigen-Countdown-Timer

Erstellen Sie mit dem Overlay-Plugin einen Countdown-Timer für eine Anzeige.

Age Gate mit ModalDialog

Age Gate mit ModalDialog

In diesem Beispiel wird der Player mithilfe des ModalDialogs zunächst behandelt. Wenn der Benutzer sein Alter durch Klicken auf das modale Fenster bestätigt, werden Steuerelemente angezeigt und das Video abgespielt.

Cue Points CTA anzeigen

Cue-Points-Anzeige CTA **

Der Player zeigt zwei verschiedene CTAs an, die basierend auf Cue-Punkten angezeigt werden. Der erste CTA wird bei 3 Sekunden für eine Dauer von 5 Sekunden angezeigt. Der zweite CTA wird nach 13 Sekunden für eine Dauer von 3 Sekunden angezeigt.

Dynamischer Aufruf zum Handeln **

Dynamischer Aufruf zum Handeln **

Mit diesem Player können Sie drei verschiedene Call-to-Action-Anzeigetechniken sehen.

Video von iframe Parent abspielen/pausieren

Video von iframe Parent abspielen/pausieren

Klicken Sie entweder auf die Wiedergabe- oder Pause-Schaltfläche, die Teil der übergeordneten Seite des Iframes ist, um die Wiedergabe / Pause des Videos im Iframe-Player zu starten.

Zeit-Tor

In diesem Beispiel wird eine Überlagerung angezeigt, in der die Steuerelemente des Players und die Wiedergabetaste ausgeblendet sind. Wenn der Benutzer sein Alter durch Klicken auf die Überlagerung bestätigt, werden Steuerelemente angezeigt und das Video abgespielt.

Autoplay mit Stummschalttaste

Autoplay mit Stummschalttaste

Das Video verhält sich je nach Browser / Plattform, auf der Sie das Video ausführen, unterschiedlich. Wenn das Video mit Audio autoplay wird, tut es dies. Wenn nicht, wird das Video abgespielt, aber die Schaltfläche zum Aufheben der Stummschaltung wird angezeigt.

Hintergrund Video Zufällige Wiedergabeliste

Hintergrundvideo Zufällige Wiedergabeliste **

Im Player werden Videos angezeigt, die zufällig aus einer Wiedergabeliste ausgewählt wurden und kontinuierlich als Hintergrundvideos abgespielt werden. Zu Beginn jedes Videos werden der Titel und die Beschreibung jedes Videos angezeigt.

Hintergrund Video Wiedergabeliste

Hintergrund Video Wiedergabeliste **

Im Player sehen Sie vier Videos, die kontinuierlich als Hintergrundvideos abgespielt werden. Außerdem werden zu Beginn jedes Videos der Titel und die Beschreibung jedes Videos über dem Hintergrundvideo angezeigt.

Hintergrundvideo für das vollständige Fenster

Volles Fenster Hintergrund Video **

In diesem Thema erfahren Sie, wie Sie mithilfe einer Wiedergabeliste Hintergrundvideos bereitstellen und die Größe des Players automatisch ändern, wenn die Größe des Browserfensters so geändert wird, dass das Video das Browserfenster vollständig ausfüllt.

Erstellen einer Videoschleife

Erstellen einer Videoschleife

In einigen Situationen möchten Sie möglicherweise ein Loop-Video verwenden. In diesem Beispiel wird das Video dreimal wiederholt und die Videowiedergabe gestoppt.

Deaktivieren Sie den Fortschrittswäscher

Deaktivieren Sie den Fortschrittswäscher

Spielen Sie das Video ab. Beachten Sie, dass Sie den Fortschrittswäscher nicht zum Vorrücken des Videos verwenden können.

Andere Spieler auf der Seite stoppen, wenn ein Video gestartet wird

Andere Spieler auf der Seite stoppen, wenn ein Video gestartet wird

Starten Sie die Wiedergabe eines der Videos. Spielen Sie als Nächstes das Video auf einem anderen Player ab und stellen Sie fest, dass die Videowiedergabe auf dem anderen Player, der gerade abgespielt wurde, stoppt.

Den Player dynamisch laden

Den Player dynamisch laden

In diesem Beispiel klicken Sie auf die Schaltfläche Player hinzufügen, um den Player dynamisch zu erstellen, zu laden und dann das Video abzuspielen.

RequireJS und Brightcove Player

RequireJS und Brightcove Player

In diesem Thema erfahren Sie, wie Sie RequireJS, eine JavaScript-Datei und einen Modullader, mit Brightcove Player verwenden.

Quellvideos dynamisch ändern **

Quellvideos dynamisch ändern **

Klicken Sie auf die Schaltfläche unter dem Player, um das Quellvideo dynamisch zu ändern.

Kiosk App **

Der Player spielt ein Video aus dem Array von Videoobjekten in einer Endlosschleife ab.

Untertitel-An

Starten Sie die Videowiedergabe. Wenn Sie die Maus über den Player bewegen, werden die Beschriftungen so animiert, dass sie über der Steuerleiste bleiben.

Zugehörigen Link anzeigen **

Zugehörigen Link anzeigen **

In diesem Beispiel sehen Sie den Text, der dem unter dem Player angezeigten Video zugeordnet ist. Sie verwenden den Abschnitt MEDIA> VIDEO INFORMATION von Studio, um den Text und den zugehörigen Link bereitzustellen.

Ansichten in der Steuerleiste anzeigen

Ansichten in der Steuerleiste anzeigen

Während der Wiedergabe des Videos werden die Videoansichten in der Steuerleiste angezeigt. Es kann eine leichte Verzögerung geben, bevor die Informationen als angezeigt werden Analytics API wird asynchron nach den Daten abgefragt.

Miniaturansichten beim Hover anzeigen

Miniaturansichten beim Hover anzeigen

In diesem Beispiel werden mit dem ModalDialog vier Miniaturbilder angezeigt, die an verschiedenen Stellen im Video aufgenommen wurden. Auf diese Weise kann der Benutzer einen kleinen Einblick in das Video erhalten.

Zufällige Stoßstangen anzeigen

Zufällige Stoßstangen anzeigen

In diesem Beispiel werden zufällig ausgewählte Stoßstangen vor jedem Video aus einer Wiedergabeliste abgespielt. In diesem Fall handelt es sich bei den Stoßfängern um Anzeigen, die jedoch nicht von einem Anzeigenserver stammen. Stattdessen handelt es sich um Videos, die in der Video Cloud-Bibliothek definiert sind.

Hyperlinked Firmenlogo

Hyperlinked Firmenlogo

In diesem Beispiel wird ein Firmenlogo in der Steuerleiste des Players angezeigt. Durch Auswahl des Logos werden Sie zur Website des Unternehmens weitergeleitet.

Lightbox-Karussell

Lightbox-Karussell

Navigieren Sie durch die Videos im Karussell. Wählen Sie eine Miniatur aus, um das Video in einem Lightbox-Container abzuspielen. Wählen Sie bei angezeigter Lightbox den Link Schließen aus, um den Lightbox-Container auszublenden.

Lightbox mit Scroller

Lightbox mit Scroller

Ziehen Sie die Bildlaufleiste unter die Miniaturbilder, um durch die Videos zu navigieren. Wählen Sie ein Video aus, um das Video in einem Lightbox-Container wiederzugeben. Wählen Sie bei angezeigter Lightbox den Link Schließen aus, um den Lightbox-Container auszublenden.

Einfacher Leuchtkasten

Einfacher Leuchtkasten

In diesem Beispiel wird ein interaktives Videoposterbild angezeigt, mit dem ein Leuchtkasten mit dem Brightcove-Player geöffnet wird. Wählen Sie das Posterbild aus, um das Video in einem Leuchtkastencontainer abzuspielen.

Logo-Overlay-Plugin

Im folgenden Beispiel wird unten links im Player ein Logo angezeigt. Nach fünf Sekunden im Video wird das Logo langsam ausgeblendet.

Wiedergabe mehrerer Sitzungen

Wiedergabe mehrerer Sitzungen

Spielen Sie das Video ab und stoppen Sie es irgendwann während der Wiedergabe. Wenn Sie die Seite aktualisieren, wird das Video dort wiedergegeben, wo Sie aufgehört haben.

Navigieren Sie auf Video End

Navigieren Sie auf Video End

Nach Abschluss des sehr kurzen Videos wird eine Überlagerung mit einem Link zur Brightcove-Startseite angezeigt. Das von Brightcove gelieferte Overlay-Plugin wird verwendet, daher wird kein JavaScript benötigt. CSS wird verwendet, um das Overlay zu formatieren.

Spieler in die Ansicht scrollen

Spieler in die Ansicht scrollen

Scrollen Sie mit dem Player in die Ansicht hinein und aus der Ansicht heraus. Wenn der Player vollständig in die Ansicht gescrollt wird, wird das Video abgespielt. Wenn Sie den Player aus der Ansicht scrollen, wird das Video nicht mehr abgespielt.

Ein Overlay umschalten

Ein Overlay umschalten

In diesem Beispiel können Sie die Anzeige einer interaktiven Überlagerung umschalten. Wählen Sie die Schaltfläche Überlagerung umschalten, um die Überlagerung ein- und auszublenden.

Rückspulen mit einem benutzerdefinierten Ereignis auslösen

Rücklauf mit einem benutzerdefinierten Ereignis auslösen

Starten Sie die Videowiedergabe. Klicken Sie dann auf die Schaltfläche Video zurückspulen. Sie sollten sehen, dass die Videowiedergabe 5 Sekunden zurückliegt.

Laden Sie das Video Plugin herunter

Video Plugin herunterladen **

Auf der rechten Seite der Steuerleiste befindet sich ein Download-Symbol, mit dem Sie die MP4-Wiedergabe des im Player geladenen Videos in höchster Qualität herunterladen können.

Benutzerdefinierte Live-Fehlermeldung

Benutzerdefinierte Live-Fehlermeldung

Der Player kann keine Verbindung zum Live-Stream herstellen. Es wird ein ModalDialog-Objekt erstellt, ein benutzerdefiniertes Bild darin platziert und dann der ModalDialog angezeigt. Wenn der ModalDialog geschlossen ist, wird der Standardfehler angezeigt.

Spieler-Styling-Spielplatz

Spieler-Styling-Spielplatz

In diesem Thema verwenden Sie einen unten gezeigten Codepen als Styling-Spielplatz. Zeigen Sie es auf der Website codepen.io an, um Änderungen vorzunehmen, und geben Sie den Codepen für Ihren eigenen Gebrauch frei.

Horizontale responsive Playlist

Horizontale responsive Playlist

Sie sehen die horizontale Wiedergabeliste unter dem Player. Wenn Sie die Größe Ihres Browsers ändern, werden sowohl die Größe des Players als auch der Wiedergabeliste geändert.

Meistgesehene Videos in der Wiedergabeliste **

Meistgesehene Videos in der Wiedergabeliste **

Im folgenden Beispiel sehen Sie den Player mit einer Wiedergabeliste auf der rechten Seite. Die Wiedergabeliste wird gefüllt, indem die beliebtesten Videos basierend auf der meisten Anzahl von Spielen mithilfe des Brightcove Player-Katalogs abgerufen werden.

Neueste Videos in der Wiedergabeliste **

Neueste Videos in der Wiedergabeliste **

Im folgenden Player sehen Sie eine Wiedergabeliste mit den 10 neuesten Videos, die dem Konto des Knowledge Teams hinzugefügt wurden.

Wiedergabe-API-Paging

Playback API Paging **

In diesem Beispiel wird ein Brightcove-Player verwendet, um ein Video im Player zusammen mit den ersten drei Videos in der Wiedergabeliste anzuzeigen. Wählen Sie die Schaltfläche Nächste Videos, um die nächsten 3 Videos in der Wiedergabeliste anzuzeigen.

Beliebte Videos überlagern

Beliebte Videos Overlay **

Die Überlagerung wird angezeigt, wenn Sie ein Video anhalten oder das Video endet. Die Anfrage an die Analytics API Die 6 meistgesehenen Videos der letzten 24 Stunden werden zusammen mit der API-Antwort angezeigt.

Beliebte Videos Playlist

Beliebte Videos Playlist **

Die Wiedergabeliste wird automatisch angezeigt, sobald die Videodaten abgerufen wurden. Die Anfrage an die Analytics API Die 6 meistgesehenen Videos der letzten 24 Stunden werden zusammen mit der API-Antwort angezeigt.

Verwandte Videos aus einer Wiedergabeliste

Verwandte Videos aus einer Wiedergabeliste **

In diesem Beispiel wird eine interaktive Überlagerung verwandter Video-Miniaturansichten angezeigt, wenn die Wiedergabe angehalten oder beendet wurde.

Verwandte Videos über Tags

Verwandte Videos über Tags (CMS API) **

In diesem Beispiel wird eine interaktive Überlagerung verwandter Video-Miniaturansichten angezeigt, wenn die Wiedergabe angehalten oder beendet wurde.

Verwandte Videos über Tags

Verwandte Videos über Tags (Playback API) **

In diesem Beispiel wird eine interaktive Überlagerung verwandter Video-Miniaturansichten angezeigt, wenn die Wiedergabe angehalten oder beendet wurde.

Wiedergabeliste mit Registerkarten

Wiedergabeliste mit Registerkarten **

Wählen Sie in der Registerkartennavigation eine Registerkarte aus, um zwischen Wiedergabelisten zu wechseln. Wählen Sie ein Video in einer Wiedergabeliste aus, um die Videowiedergabe zu starten.

Alle Zeit-Videoansichten

Videoansichten aller Zeiten

Der Player unten enthält eine Wiedergabeliste, die Ihnen zeigt, dass der Code zum Abrufen aller Zeitansichten mit Wiedergabelisten funktioniert. Es funktioniert auch mit einem einzelnen Videoplayer.

Video vor der Wiedergabeliste

Video vor der Wiedergabeliste

Erstellen Sie einen Player mit aktivierter Wiedergabeliste, um mit einem Video zu beginnen, das nicht in der Wiedergabeliste enthalten ist.

Video am Ende der Wiedergabeliste

Video am Ende der Wiedergabeliste

Sie sehen, dass die Wiedergabeliste drei Videos enthält. Nachdem diese drei Videos abgespielt wurden, wird ein anderes Video NICHT in der Wiedergabeliste abgespielt. Nachdem das nicht in der Wiedergabeliste enthaltene Video abgespielt wurde, wird die Videowiedergabe gestoppt.

Wiedergaberate Adjustierer

Fügen Sie der Brightcove Player-Steuerleiste eine Schaltfläche für die Wiedergaberate hinzu.

Hintergrundvideo

Hintergrundvideo

Verwenden Sie einen Brightcove-Player für ein Hintergrundvideo auf Ihrer Webseite.

Erhalten Sie Sucht Zeit

Erhalten Sie Sucht Zeit

Wenn Sie in die Suchleiste klicken, werden die Zeiten, zu denen Sie geklickt haben, unter dem Player angezeigt.

Kapitel-Marker im Fortschrittsbalken

Kapitel-Marker im Fortschrittsbalken

Erstellen Sie Markierungen in der Fortschrittsleiste, um definierte Kapitel anzuzeigen.

Dynamischer benutzerdefinierter Endbildschirm

Dynamischer benutzerdefinierter Endbildschirm

Fügen Sie auf dem benutzerdefinierten Endbildschirm einen mit Videodaten verknüpften Link hinzu.

Schaust du immer noch zu?

Schaust du immer noch zu?

In diesem Thema erfahren Sie, wie Sie einen Brightcove-Player erstellen, der erkennt, wenn der Betrachter die Wiedergabe beendet hat, während das Video abgespielt wird.

Spieler vergrößern bei Mouseover

Spieler vergrößern bei Mouseover

In diesem Thema erfahren Sie, wie Sie mit JavaScript und CSS einen kleinen Player vergrößern, wenn Sie mit der Maus darüber fahren, und ihn dann mit der Maus auf eine kleine Größe verkleinern.

Schwebender Spieler

Schwebender Spieler

In diesem Thema erfahren Sie, wie Sie HTML / CSS / JavaScript so konfigurieren, dass der Player an eine neue Position gezogen werden kann. Die Spielerposition bleibt dann fest, auch wenn der Benutzer auf der Seite nach oben und unten scrollt.

Limitierte Spiele

Limitierte Spiele

In diesem Thema erfahren Sie, wie Sie einen Brightcove-Player verwenden, der begrenzt, wie oft ein Benutzer ein Video an einem Tag anzeigen kann.

Zum Spielen anmelden

Zum Spielen anmelden

In diesem Thema erfahren Sie, wie Sie einen Brightcove-Player verwenden, bei dem der Benutzer ein Formular ausfüllen muss, um das Video anzuzeigen.

Registriere dich zum Spielen nach der Vorschau

Registriere dich zum Spielen nach der Vorschau

In diesem Thema erfahren Sie, wie Sie einen Brightcove-Player verwenden, bei dem der Benutzer ein Formular ausfüllen muss, um das Video anzuzeigen, nachdem eine kurze Vorschau angezeigt wurde.

Passwort zum Ansehen von Video

Passwort zum Ansehen von Video

In diesem Thema erfahren Sie, wie Sie nach einem Kennwort fragen, um das Video anzuzeigen.

Steuerleiste umschalten

Steuerleiste umschalten

In diesem Thema erfahren Sie, wie Sie mit einer Schaltfläche die Anzeige der Steuerleiste umschalten können.

Vor- und Zurück-Tasten

Zurück Vorwärts-Tasten

In diesem Thema erfahren Sie, wie Sie Schaltflächen in der Steuerleiste platzieren, die das Video zurückspulen und um eine bestimmte Anzahl von Sekunden vorrücken.

Länderflagge zur Beschriftung hinzufügen

Länderflagge zur Beschriftung hinzufügen

In diesem Thema erfahren Sie, wie Sie eine Länderflagge vor dem Länderbeschriftungsetikett einfügen.

Transcript herunterladen

Transcript herunterladen

In diesem Thema erfahren Sie, wie Sie die WebVTT-Datei mit Untertiteln verwenden und in ein herunterladbares Transkript konvertieren.

Audio herunterladen

Audio herunterladen

In diesem Thema erfahren Sie, wie Sie einen Link erstellen, über den Sie die MP4-Qualität eines Audio-Assets herunterladen können, das in Brightcove Player abgespielt wird.

Untertitelsprache einstellen

Untertitelsprache automatisch festlegen

In diesem Thema erfahren Sie, wie Sie die Standard-Untertitelsprache basierend auf der Browsersprache festlegen.

Stellen Sie die Sprache der Audiospur ein

Automatische Einstellung der Audiospursprache

In diesem Thema erfahren Sie, wie Sie die Standardsprache für Audiospuren basierend auf der Browsersprache festlegen.

Stellen Sie die Sprache der Audiospur ein

Vertikales Video

In diesem Thema erfahren Sie, wie Sie mit dem Brightcove Player ein vertikales Video anzeigen.