Plugin für Miniaturansichten anzeigen

In diesem Thema erfahren Sie mehr über das Plugin für die Vorschau von Miniaturansichten, mit dem die Zeitleiste ein Vorschaubild an definierten Punkten für Ihr Video anzeigen kann. Der Benutzer kann mit der Maus über die Zeitleiste fahren und von Ihnen definierte Bilder werden für bestimmte Zeitbereiche angezeigt.

Beispiel

Das Bild unten zeigt eine Miniaturansicht, die angezeigt wird, wenn der Benutzer mit der Maus über den Fortschrittsbalken fährt:

Das folgende Beispielvideo zeigt die Verwendung des Thumbnails-Plugins. Fange an, das Video abzuspielen. Fahren Sie dann mit der Maus über den Fortschrittsbalken und wählen Sie ein Miniaturbild aus, um zu diesem Abschnitt des Videos zu springen.

Dieses Thema enthält die folgenden Abschnitte:

Sammeln Sie Miniaturbilder
Implementierung mit dem Player-Modul
Thumbnails Plugin Eigenschaften
Verwenden von CSS-Bild-Sprites

Sammeln Sie Miniaturbilder

Zu diesem Zeitpunkt müssen Sie die Bilder selbst sammeln. Vorschaubilder können als Teil des generiert werden Zencoder-Codierungsprozess. Auch Tools existieren wie SnapMotion um diesen Prozess zu automatisieren.

Unabhängig davon, wie Sie die Bilder generieren, müssen Sie die Anzahl der Bilder festlegen, die Sie verwenden möchten, und eine geeignete Größe auswählen.

Implementieren Sie mit Einbettungscode

Thumbnails können mithilfe des Thumbnails-Plugins konfiguriert werden. Gehen Sie folgendermaßen vor, um das Miniaturbild-Plugin mithilfe von Einbettungscode zu implementieren:

Öffnen Sie in Video Cloud Studio die Option MEDIEN Modul.
Wählen Sie ein Video aus, das Sie verwenden möchten, und wählen Sie das aus Veröffentlichen und einbetten Taste.
Wählen Sie im Dialogfeld entweder den Brightcove-Standardplayer oder einen von Ihnen konfigurierten Player aus.

Kopiere das Fortgeschrittene Code einbetten und ein hinzufügen id Attribut auf die video-js Etikett. Es sollte ähnlich aussehen wie folgt:

<video-js
  id="myPlayerID"
  data-account="1752604059001"
  data-player="default"
  data-embed="default"
  controls=""
  data-video-id="2026618970001"
  data-playlist-id=""
  data-application-id=""
  width="960" height="540"></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

Fügen Sie den Player-Einbettungscode mit Ihrem HTML-Seitencode in einen Editor ein.

In dem head Fügen Sie im Abschnitt Ihres Seitencodes die folgende CSS-Datei hinzu:

<link rel="stylesheet" type="text/css" href="https://players.brightcove.net/videojs-thumbnails/videojs.thumbnails.css">

In dem body Fügen Sie im Abschnitt unter dem Player-Einbettungscode die folgende JavaScript-Datei hinzu:
```
<script src="https://players.brightcove.net/videojs-thumbnails/videojs.thumbnails.js"></script>
```
Fügen Sie unter dem vorherigen Skript einen Skriptblock mit den folgenden Optionen hinzu:
- Holen Sie sich einen Verweis auf den Player, wenn er fertig ist
- Ruf den thumbnails Plugin mit Vorschaubildern
Beachten Sie, dass das erste Miniaturbild a . hat width Eigentum. Sie müssen dies einschließen, damit das Miniaturbild vollständig angezeigt wird, wenn der Benutzer über den Anfang oder das Ende des Fortschrittsbalkens schwebt oder schrubbt.
```
<script>
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this;

    myPlayer.thumbnails(thumb_data);
  });
  var thumb_data = {
      "0": {
          "src": "http://solutions.brightcove.com/bcls/assets/images/sea-lionfish-thumbnail.png",
          "width": 120
      },
      "29": {
          "src": "http://solutions.brightcove.com/bcls/assets/images/sea-anemone-thumbnail.png"
      },
      "54": {
          "src": "http://solutions.brightcove.com/bcls/assets/images/sea-clownfish-thumbnail.png"
      },
      "84": {
          "src": "http://solutions.brightcove.com/bcls/assets/images/sea-seahorse-thumbnail.png"
      },
      "114": {
          "src": "http://solutions.brightcove.com/bcls/assets/images/sea-crab-thumbnail.png"
      },
      "143": {
          "src": "http://solutions.brightcove.com/bcls/assets/images/sea-dolphins-thumbnail.png"
      }
  };
	</script>
```
In diesem Beispiel wird ein Vorschaubild mit Miniaturansichten angezeigt, wenn Sie mit der Maus wie folgt über die Zeitachse fahren:
- Das sea-lionfish-thumbnail.png Das Bild wird vom Videostart bis zu 29 Sekunden angezeigt
- Das sea-anemone-thumbnail.png Das Bild wird von 29 Sekunden bis 54 Sekunden angezeigt
- Das sea-clownfish-thumbnail.png Das Bild wird von 54 Sekunden bis 84 Sekunden angezeigt
  . . .
- Das sea-delphins-thumbnail.png Das Bild wird von 143 Sekunden bis zum Ende des Videos angezeigt
Einzelheiten zu den Plugin-Optionen finden Sie in der Eigenschaften Sektion.

Hier ist das vollständige Codebeispiel:

<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Display Thumbnail Previews</title>
	<link rel="stylesheet" type="text/css" href="https://players.brightcove.net/videojs-thumbnails/videojs.thumbnails.css">
</head>

<body>
	<video-js
		id="myPlayerID"
		data-account="1752604059001"
		data-player="default"
		data-embed="default"
		controls=""
		data-video-id="2026618970001"
		data-playlist-id=""
		data-application-id=""
		width="960" height="540"></video-js>
	<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

	<!-- Script for thumbnails plugin -->
	<script src="https://players.brightcove.net/videojs-thumbnails/videojs.thumbnails.js"></script>

	<script>
	  videojs.getPlayer('myPlayerID').ready(function() {
	    var myPlayer = this;

			myPlayer.thumbnails(thumb_data);
	  });
		var thumb_data = {
        "0": {
            "src": "http://solutions.brightcove.com/bcls/assets/images/sea-lionfish-thumbnail.png",
            "width": 120
        },
        "29": {
            "src": "http://solutions.brightcove.com/bcls/assets/images/sea-anemone-thumbnail.png"
        },
        "54": {
            "src": "http://solutions.brightcove.com/bcls/assets/images/sea-clownfish-thumbnail.png"
        },
        "84": {
            "src": "http://solutions.brightcove.com/bcls/assets/images/sea-seahorse-thumbnail.png"
        },
        "114": {
            "src": "http://solutions.brightcove.com/bcls/assets/images/sea-crab-thumbnail.png"
        },
        "143": {
            "src": "http://solutions.brightcove.com/bcls/assets/images/sea-dolphins-thumbnail.png"
        }
    };
	</script>
</body>
</html>

Immobilien

Die folgenden Plugin-Eigenschaften werden zur Steuerung der Miniaturbilder verwendet:

erstes Argument:
- Der Wert kann eine Zeichenfolge oder eine Zahl sein und ist einem Objekt zugeordnet.
- Dies definiert die Zeit in Sekunden, in der Sie Ihr Miniaturbild anzeigen möchten.
- Zumindest benötigen Sie eine 0 Eigentum mit einem src Wert für den Fall, dass Benutzer mit der Maus über den Anfang des Fortschrittsbalkens fahren. Wenn Sie zusätzliche Zeiten haben, partitioniert das Plugin den Fortschrittsbalken und zeigt das entsprechende Bild an, wenn der Benutzer über den Fortschrittsbalken fährt.
Hinweis: Sie müssen a einschließen 0 Eigentum mit einem src Wert. Andernfalls versucht das Plugin, das Beispiel-Thumbnail zu verwenden, und Sie erhalten möglicherweise eine Fehlermeldung.
src:
- Der Wert muss eine Zeichenfolge sein.
- Dies ist die URL für Ihr Miniaturbild.
width:
- Diese Eigenschaft muss für das erste Miniaturbild enthalten sein. Es verhindert, dass das Bild aus der Anzeige gerät, wenn es sich am Anfang oder Ende des Fortschrittsbalkens befindet.

Hier ist ein Beispiel für das Festlegen von Miniaturbildern für drei Zeitblöcke in der Fortschrittsanzeige:

Das erste Bild wird angezeigt, wenn ein Benutzer vom Videostart bis zu 5 Sekunden mit der Maus über den Fortschrittsbalken fährt
Das zweite Bild wird von 5 Sekunden bis 10 Sekunden angezeigt
Das dritte Bild wird von 10 Sekunden bis zum Videoende angezeigt

  {
    "0": {
        "src": "http://solutions.brightcove.com/bcls/assets/images/Tiger-4-preview.jpg",
        "width": 120
    },
    "5": {
        "src": "http://solutions.brightcove.com/bcls/assets/images/Water-4-preview.jpg"
    },
    "10": {
        "src": "http://solutions.brightcove.com/bcls/assets/images/BirdsOfAFeather-4-preview.jpg"
    }
  }

CSS-Bild-Sprites

Wenn Sie möchten, können Sie CSS-Bild-Sprites als Vorschaubilder verwenden. Der folgende JSON ist ein Beispiel für die options Eigenschaft bei Verwendung eines CSS-Image-Sprites:

{
  0: {
    src: 'thumbnails.png',
    style: {
      left: '-60px',
      width: '600px',
      height: '68px',
      clip: 'rect(0, 120px, 68px, 0)'
    }
  },
  10: {
    style: {
      left: '-180px',
      clip: 'rect(0, 240px, 68px, 120px)'
    }
  },
  20: {
    style: {
      left: '-300px',
      clip: 'rect(0, 360px, 68px, 240px)'
    }
  },
  30: {
    style: {
      left: '-420px',
      clip: 'rect(0, 480px, 68px, 360px)'
    }
  },
  40: {
    style: {
      left: '-540px',
      clip: 'rect(0, 600px, 68px, 480px)'
    }
  }

Änderungsliste

Keine gemeldet