Miniaturansichtssuche mit Brightcove Player

Überblick

Mithilfe von Miniaturbildern können Benutzer den Fortschrittsbalken schnell nach dem Abschnitt durchsuchen, an dem sie interessiert sind. Brightcove Player zeigt Miniaturbilder an, wenn der Benutzer mit der Maus über den Fortschrittsbalken fährt. Durch Klicken auf den Fortschrittsbalken gelangen sie zu dieser Stelle im Video.

Wann werden Bilder generiert?

Brightcove generiert die Bilder auf Wunsch dynamisch. Für jedes mit Dynamic Delivery aufgenommene Video werden Bilder bei der ersten Anfrage generiert. Dadurch wird sichergestellt, dass keine Bilder für nicht verwendete Videos erstellt werden. Nach der Generierung werden Bilder lokal und auf dem CDN zwischengespeichert, um sie wie jedes andere Bild wiederholt anzuzeigen.

Welche Bildfrequenz hat ein Video?

Die Liste der Miniaturansichten wird basierend auf der Pixelbreite des Players bei der Initialisierung nach unten gefiltert. Diese Liste variiert erheblich je nach Player-Stil, Fenstergröße, Plattform / Gerät usw. Das Miniaturbild-Plugin soll ungefähr alle 30 Pixel ein neues Miniaturbild anzeigen, wenn der Benutzer mit der Maus über den Fortschrittsbalken fährt. Wenn der Player beispielsweise 1.500 Pixel breit ist, versucht der Player, die Liste auf 50 Miniaturansichten zu filtern. Die verbleibenden Zeitintervalle für die WebVTT-Cues werden entsprechend der Dauer des Inhalts angepasst.

Voraussetzungen

Die folgenden Anforderungen gelten für das Thumbnail-Plugin:

• Sie müssen einen Brightcove Player Version 6.41.0+ verwenden
• Videos müssen für die dynamische Übermittlung aufgenommen werden
• Für diese Funktion muss die Playback-API v2 verwendet werden
• Für die serverseitige Anzeigeneinfügung (SSAI) müssen Sie die verwenden videojs-ssai Plugin Version 1.10.0+

Beispiel eines Spielers

Klicken Sie auf das folgende Beispiel und bewegen Sie den Mauszeiger über den Fortschrittsbalken, um Vorschaubilder anzuzeigen.

Siehe den Stift Thumbnails Plugin von Brightcove Learning Services ( bcls1969 ) auf CodePen.

Quellcode

Sie können den Quellcode anzeigen, indem Sie die Option auswählen HTML Schaltfläche im CodePen oben, oder Sie können die anzeigen Komplettlösung auf GitHub.

Erste Schritte

Diese Funktion steht jedem mit einem Brightcove Video Cloud-Konto zur Verfügung.

Stellen Sie sicher, dass Ihre Videos für die dynamische Bereitstellung aufgenommen werden.

Implementieren von Miniaturansichten mit Studio

Der einfachste Weg, Ihren Player für die Suche nach Miniaturansichten zu konfigurieren, ist mit Video Cloud Studio.

1. Öffne das SPIELER Modul. Benutze einen vorhandenen Spieler oder erstelle einen neuen Spieler.

2. Wählen Sie den Player-Link, um die Eigenschaften des Players zu öffnen.
3. Wählen Sie in der linken Navigation aus Kontrollen.

4. Prüfen Vorschaubild suchen.

   

5. Um den Player zu veröffentlichen, wählen Sie Veröffentlichen & Einbetten> Änderungen veröffentlichen

   

6. Das Thumbnails-Plugin ist jetzt für Ihren Player konfiguriert.

   Verwenden Sie ein für Dynamic Delivery aufgenommenes Video und veröffentlichen Sie es mit dem Player, den wir in den obigen Schritten konfiguriert haben. Sie sollten Miniaturbilder sehen, wenn Sie den Mauszeiger über den Fortschrittsbalken des Players bewegen.

Implementieren von WebVTT-Miniaturansichten

Wenn Sie Ihre eigenen Miniaturbilder verwenden möchten, können Sie eine benutzerdefinierte WebVTT-Datei erstellen und diese mithilfe von an den Player übergeben player.addRemoteTextTrack() Methode. Hier sind die Schritte:

1. Ein ... kreieren .vtt Datei, die dem Standard-WebVTT-Format folgt. Ersetzen Sie den Beschriftungstext durch die URL für jedes Miniaturbild. Es könnte ungefähr so aussehen:

   

2. Wählen Sie in Video Cloud Studio ein Video aus, das für die dynamische Bereitstellung aufgenommen wurde. Kopieren Sie den Advanced Embed-Code für einen Player mit Version 6.41.0+.
3. Fügen Sie in die HTML-Datei Ihrer Webseite den Code für die erweiterte Einbettung ein.
4. In dem head Abschnitt Ihres HTML-Codes fügen Sie die Miniaturansichten der CSS-Datei hinzu:

   //players.brightcove.net/videojs-thumbnails/1/videojs-thumbnails.css

5. In dem body Abschnitt Ihres HTML-Codes fügen Sie die JavaScript-Datei mit den Miniaturansichten hinzu:

   //players.brightcove.net/videojs-thumbnails/1/videojs-thumbnails.js

6. Zum video Tag, füge ein hinzu id Eigentum.
7. Vor dem Schließen body Tag, fügen Sie ein script Block.

8. Fügen Sie in dem soeben erstellten Skriptblock Folgendes hinzu:

   Eigentum	Wert
   type	Der MIME-Typ für Ihr Video
   src	Die Quell-URL für dein Video

   Ihr Code sollte dem ähneln:

   var player = bc('myPlayerID');
   
   player.thumbnails();
   
   player.ready(() => {
     player.src({
       type: 'video/mp4',
       src: '//solutions.brightcove.com/bcls/videos/Great Blue Heron.mp4'
     });
   });

9. Fügen Sie im selben Skriptblock Folgendes hinzu:

   Nachdem das Plugin initialisiert und der Player bereit ist, übergeben Sie Miniaturbildquellen an das Plugin in einer WebVTT-Datei mit dem addRemoteTextTrack() Methode. Wenn Sie die Methode mit der Miniaturbilddatei aufrufen, müssen Sie außerdem Folgendes festlegen:

   Eigentum	Wert
   src	Der Speicherort Ihrer WebVTT-Datei mit Miniaturbildern
   kind	Einstellen metadata
   label	Einstellen thumbnails
   mode	Einstellen hidden
   addRemoteTextTrack() manualCleanup	Einstellen false so dass die Spur automatisch entfernt wird, wenn sich die Quelle ändert

   
   

   Ihr Code sollte dem ähneln:

   var player = bc('myPlayerID');
   
   player.thumbnails();
   
     player.ready(() => {
       player.src({
         type: 'video/mp4',
         src: '//solutions.brightcove.com/bcls/videos/Great Blue Heron.mp4'
       });
   
     player.addRemoteTextTrack({
       src: 'thumbnails.vtt',
       kind: 'metadata',
       label: 'thumbnails',
       mode: 'hidden'
     }, false);
   });

Quellcode

Einzelheiten finden Sie in der Komplettlösung auf GitHub.

Änderungsliste

Siehe die Versionshinweise zum Thumbnail-Plug-in.

Historische Versionshinweise finden Sie im Changelog hier.