360 ° / VR Video Plugin

Beispiel Spieler

Das folgende Beispielvideo zeigt die Verwendung des 360°/VR-Plugins. Sobald Sie auf das Video geklickt haben, um es abzuspielen, können Sie entweder mit der Maus oder den Pfeiltasten die Ansicht auf dem Desktop oder das Gyroskop steuern, wenn Sie auf einem mobilen Gerät anzeigen. Die Schaltfläche zum Abspielen des 360°-Video-Logos verschwindet beim Spielen.

Einleitung

Merkmale

Die folgenden Merkmale des 360°/VR-Plugins sind:

Gyroskop-Integration auf Mobilgeräten: Die Perspektive ändert sich, wenn Sie Ihr Telefon drehen.
Unterstützung für Cardboard/VR-Modus: Auf Geräten, die es unterstützen, erscheint das Cardboard Viewer-Symbol in der Steuerleiste. Wenn Sie gedrückt werden, wird die Projektion so angepasst, dass sie mit einer VR-Brille im Karton-Stil funktioniert.
360°-Einstellung für Video-Cloud-Medien: Wenn Sie Video Cloud-Videos verwenden, respektiert das Plugin die Einstellung von Video Cloud für 360° auf Video Cloud-Medien. Wenn der Wert nicht vorhanden ist, wird das Video als normales Video wiedergegeben. Sie müssen nicht sicherstellen, dass nur 360°-Videos auf Spielern mit dem 360°/VR-Plugin abgespielt werden.
Nicht-Video-Cloud-Medien: Wenn du bist Keine Medien verwenden, die aus der Video Cloud bereitgestellt werden können Sie das Plugin weiterhin verwenden. Sie müssen das vr Plugin aufrufen, das ein Objekt mit einem projection Wert wie folgt übergibt:
```
<script type="text/javascript">
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this;
    myPlayer.vr({projection: '360'});
  });
</script>
```
Setzen Sie die projection Eigenschaft auf 360 equirectangular oder Sphere sind alle logisch gleichwertig.

Der obige Code geht natürlich davon aus, dass Sie die JavaScript- und CSS-Dateien für das Plugin aufgenommen haben, wie später in diesem Dokument beschrieben.

Kompatibilität mit Browser

Das Plugin ist mit den neuesten Versionen dieser gängigen Browser kompatibel:

Chrome-Desktop
Chrome Mobile (auf Android 6+)
Firefox-Desktop
Kante
Safari-Desktop *
Safari-Mobil (iOS 11.2+) *

* Wenn Sie das Plugin in Safari verwenden und ein Video verwenden, das nicht von Video Cloud stammt (ein Video, das NICHT über Video Cloud aufgenommen wurde), müssen Sie Folgendes festlegen crossorigin Konfigurationseigenschaft zu anonymous.

Das Plugin tut es NICHT mit dem Internetexplorer arbeiten.

Überblick über die Implementierung

Die Implementierung des Plugins ist einfach. Führen Sie einfach diese beiden Schritte aus:

Das Video richtig aufnehmen.
Füge das Plugin dem Player hinzu.

Das 360°-Video aufnehmen

Sobald Sie das 360°-Video aufgenommen haben, müssen Sie es in die Video Cloud aufnehmen. Ein kleines Verständnis dafür, wie 360°-Video funktioniert, hilft Ihnen, einige Gründe für das Ingest Profile zu verstehen. Das 360°-Video wird gefilmt, um auf das Innere einer Kugel projiziert zu werden. Dies bedeutet, dass der sichtbare Bereich des Videos im Player nur einen Bruchteil des gesamten Videos ausmacht. Der folgende Screenshot gibt Ihnen eine grobe Vorstellung von diesem Konzept. Der Bereich innerhalb des roten Rechtecks ist das, was im Player sichtbar ist, aber nur ein kleiner Teil des gesamten Videos.

Da nur ein kleiner Teil des Videos gleichzeitig im Player enthalten ist, möchten Sie, dass eine sehr hochwertige Wiedergabe abgespielt wird, ohne dass die Möglichkeit besteht, auf eine Wiedergabe mit geringerer Qualität zurückzutreten. Im Wesentlichen „zoomen“ Sie einen Teil des Videos und eine Wiedergabe von schlechter Qualität würde zu einem sehr schlechten Seherlebnis führen. Aus diesem Grund empfiehlt Brightcove beim Hochladen Ihres Videos, ein benutzerdefiniertes Dynamic Delivery-Ingest-Profil mit einer einzigen 1080p-Wiedergabe und mindestens einer Audiowiedergabe zu erstellen. Dies wird gegenüber HLS-Formatvarianten bevorzugt, wenn das 360°/VR-Plugin verwendet wird.

Stellen Sie sicher, wenn das Video aufgenommen wird, ist es für eine 360°-Projektion markiert, wie hier im Informationsbereich des Videos gezeigt:

Mit dem Player-Modul implementieren

Um das 360°/VR-Plugin zu implementieren, fügen Sie den Namen des Plugins und die URLs zu den JavaScript- und CSS-Dateien des Plugins hinzu:

Öffnen Sie das PLAYERS-Modul und erstellen Sie entweder einen neuen Player oder suchen Sie den Player, dem Sie das Plugin hinzufügen möchten.
Klicken Sie auf den Link für den Spieler, um die Eigenschaften des Spielers zu öffnen.
Klicken Plugins im linken Navigationsmenü.
Wählen Sie im Dropdown-Menü Plugin hinzufügen die Option Benutzerdefiniertes Plugin aus.
Geben Sie für den Plugin-Namen ein vr.

Geben Sie für die JavaScript-URL ein:

https://players.brightcove.net/videojs-vr/2/videojs-vr.min.js

Wenn Sie Brightcove Player 6 verwenden, verwenden Sie stattdessen diese URL:

            https://players.brightcove.net/videojs-vr/1/videojs-vr.min.js

Geben Sie für die CSS-URL ein:

https://players.brightcove.net/videojs-vr/2/videojs-vr.css

Wenn Sie Brightcove Player 6 verwenden, verwenden Sie stattdessen diese URL:

          https://players.brightcove.net/videojs-vr/1/videojs-vr.css

Sie müssen keine Optionen für dieses Plugin eingeben.
Klicken Sie auf Speichern.
Klicken Styling im linken Navigationsmenü.
Wenn Sie der Meinung sind, dass es ein besseres Seherlebnis sein wird, können Sie das Titel- und Beschreibungsdock deaktivieren. Deaktivieren Sie dazu das Titel und Beschreibung anzeigen Kontrollkästchen.
Um den Player zu veröffentlichen, klicken Sie auf Veröffentlichen & Einbetten > Änderungen veröffentlichen.
Um das Dialogfeld „Öffnen“ zu schließen, klicken Sie auf Schließen.

Optionen

ForceCardBoard

Typ: boolean Standardwert: false

Erzwingen Sie, dass die Kartontaste auf allen Geräten angezeigt wird.

MotionControls

Typ: boolean Standardwert: true unter iOS und Android

Bestimmt, ob Bewegung/Gyro-Steuerelemente aktiviert werden sollen.

Projektion

Typ: string Standardwert: auto

Video-Typ	Wert für `projection` Option
Kugel	360, Kugel oder äquirechteckig
Würfel	Cube oder 360_CUBE
KEIN 360°-Video	Keine
Wenn Sie überprüfen möchten, ob es sich bei dem aktuellen Video um ein 360°-Video handelt `player.mediainfo.projection`	AUTO
Side-by-Side 360°-Video	360_LR
360°-Video von oben nach unten	360 TB

player.mediainfo.projektion

Typ: string Standardwert: undefined

Dieser Wert sollte quellenweise festgelegt werden, um 360°-Videos je nach Video ein- und auszuschalten.

debuggen