Picture-in-Picture-Plugin (auch bekannt als "schwebend" oder "angeheftet")

Überblick

Im Bild-in-Bild-Modus können Benutzer Multitasking ausführen. Sobald die Videowiedergabe gestartet wurde und der Benutzer die Seite nach unten scrollt, wird der Bild-in-Bild-Modus neu positioniert und der Player an einer Ecke der Webseite befestigt.

Warum es Bild-in-Bild heißt

Das Verhalten, das dieses Plugin ermöglicht, wird allgemein auch als "schwebendes" oder "festgestecktes" Verhalten bezeichnet. Brightcove verwendet den Begriff "Bild-in-Bild", da Apple und Google diese Redewendung für ihre nativen Browser übernehmen. W3C Standards Verweisen Sie auch auf "Bild-in-Bild".

Brightcove-Plug-in im Vergleich zu nativer Funktionalität

Die meisten modernen Browser verfügen mittlerweile über eine Bild-in-Bild-Funktionalität. In diesem Abschnitt werden die Unterschiede zwischen dem Picture-in-Picture-Plugin und der nativen Funktionalität erläutert. Darauf folgen Gründe, warum Sie die native Funktionalität deaktivieren und das Plugin zu Ihrem Player hinzufügen möchten.

Native Browserfunktionalität

Im Folgenden wird die Funktionsweise des nativen Browsers Bild-in-Bild beschrieben:

• Sie müssen nichts tun, um die Funktionalität zu aktivieren, das Symbol für Bild-in-Bild befindet sich in der Kontrollleiste.
• Die Symbolschaltfläche fungiert als Umschalter, Zuschauer schalten die Funktionalität ein und aus.
• Die native Bild-in-Bild-Funktionalität öffnet einen Browserplayer in einem völlig neuen Browser-/Betriebssystemfenster, das unabhängig von der Webseite, die ihn gestartet hat, gesteuert werden kann. Daher ist der Bild-in-Bild-Player NICHT an den Browser gebunden. Der Bild-in-Bild-Player wird unten rechts auf Ihrem Bildschirm angezeigt, unabhängig von der Größe Ihres Browsers.
• Das Video im Brightcove Player ist "ausgegraut", wenn die native Bild-in-Bild-Funktion eingeschaltet ist.

Sehen Sie wie es funktioniert

Sehen Sie sich dieses Video an, um die native Implementierung im Einsatz zu sehen:

Funktion ausschalten

Wenn Sie die native Browserfunktionalität deaktivieren möchten, fügen Sie die folgende Zeile des JSON-Codes in die Player-Konfiguration ein, indem Sie die Funktionen von Video Cloud Studio . verwenden JSON-Editor:

"picture_in_picture_control": false,

Brightcove-Plugin

Im Folgenden wird beschrieben, wie das Brightcove Player Picture-in-Picture-Plug-in funktioniert:

• Sobald das Plugin installiert ist, muss der Viewer KEINE weiteren Schritte ausführen, um den Bild-in-Bild-Player zu starten, außer den Brightcove-Player größtenteils aus dem Sichtbereich zu scrollen. Es gibt keine Schaltfläche zum Anklicken, um Bild-in-Bild einzuschalten.
• Wenn der Viewer den Brightcove-Player zurück in die Ansicht scrollt, wird der Bild-in-Bild-Player automatisch ausgeblendet.
• Der Bild-in-Bild-Player wird (als Standard) in der unteren rechten Ecke des Browsers angezeigt. Im Gegensatz zur nativen Funktionalität ist das Plugin an den Browser gebunden.

Sehen Sie wie es funktioniert

Sehen Sie sich dieses Video an, um die verwendete Brightcove Player-Plug-in-Implementierung zu sehen:

Warum das Brightcove Player-Plug-in verwenden?

Wenn die native Funktionalität integriert ist und Sie nichts tun müssen, warum sollten Sie die native Funktionalität deaktivieren und das Brightcove Player-Plug-in installieren? Im Folgenden sind einige der Gründe aufgeführt:

• Der native Player spielt keine clientseitigen Anzeigen ab. Es spielt SSAI-Anzeigen ab, bietet jedoch nicht die Benutzeroberflächenanpassungen, die Brightcove Player vornimmt, und hindert den Benutzer nicht daran, diese Anzeigen zu durchsuchen.
• Sie möchten, dass die Bild-in-Bild-Funktionalität durch den Browser begrenzt wird. Sie möchten nicht, dass der Bild-in-Bild-Player außerhalb des Bereichs des Browsers platziert wird.
• Sie möchten, dass die Funktionalität ohne Benutzerinteraktion wirksam ist.
• Das Plugin bietet mehr und einfacher zu implementierende Anpassungen. Optionen, Methoden und Ereignisse, die Sie mit dem Plugin verwenden können, sind am Ende dieses Dokuments aufgeführt.

Beispiel eines Spielers

Starten Sie die Videowiedergabe. (You can then stop it). Scrollen Sie auf der Seite nach unten, um den Bild-in-Bild-Player in der rechten Ecke der Webseite anzuzeigen. Sie können den Bild-in-Bild-Player schließen oder zum Player in voller Größe zurückblättern.

Siehe den Stift Bild-in-Bild-Plugin von Brightcove Learning Services ( bcls1969 ) auf CodePen.

Mit dem Player-Modul implementieren

So implementieren Sie das Bild-in-Bild Führen Sie die folgenden Schritte aus, wenn Sie das Plugin mit dem Players-Modul verwenden:

1. Ö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.
2. Wähle den Link für den Spieler aus, um die Eigenschaften des Spielers zu öffnen.
3. Auswählen Plugins im linken Navigationsmenü.

4. Wählen Sie als Nächstes die Plugin hinzufügen -Taste und wählen Sie dann Brightcove-Plug-in.

   

5. Erweitern Sie die Brightcove Plugin Dropdown und auswählen Bild im Bild.

   

6. Optional: Geben Sie die Konfigurationsoptionen im Optionen (JSON) Textfeld. Ein Beispiel für die Einstellung der horizontalen Ausrichtung des Players im Bild-in-Bild-Modus finden Sie hier:

   

   Siehe die Optionen Abschnitt für weitere Details.

7. Wähle aus Speichern Taste.

8. Sie werden jetzt die sehen Bild im Bild Plugin zur Liste der Plugins für Ihren Player hinzugefügt.

   

9. Um den Player zu veröffentlichen, wählen Sie Veröffentlichen & Einbetten > Änderungen veröffentlichen aus.
10. Um den geöffneten Dialog zu schließen, wählen Sie Schließen aus.

11. Gehe zurück zum MEDIEN Modul und veröffentlichen Sie Ihr Video mit dem Player, den Sie gerade für Bild-in-Bild aktualisiert haben.

12. Kopieren Sie in einem Editor den Player-Einbettungscode in Ihre Webseite.

13. Das Bild-in-Bild-Plugin erfordert, dass Ihr Player von einem Containerelement mit der Klasse "umschlossen" umschlossen wird vjs-pip-container. Ihr Code sollte folgendermaßen aussehen:

    <div class="vjs-pip-container">
      <video-js id="myPlayerID"
        data-video-id="5701202551001"
        data-account="1752604059001"
        data-player="default"
        data-embed="default"
        width="640" height="360"
        controls=""></video-js>
      <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
    </div>

    Wenn das obige <div> Element nicht als übergeordnetes Element des Players gefunden wird, kann das Plugin nicht initialisiert werden und Sie erhalten die folgende Protokollwarnung:

    VIDEOJS: WARN: expected player to be a child of a "vjs-pip-container" element, cannot continue with picture-in-picture plugin

14. Wenn das Video abgespielt wurde, scrollen Sie nach unten, um den Bild-in-Bild-Player am unteren Rand der Seite anzuzeigen.

Implementieren mit Code

Um das Plugin mit benutzerdefiniertem Code zu implementieren, konfigurieren Sie die folgenden Plugin-Eigenschaften:

• scripts - JavaScript supplied for the plugin and will not change for different plugin implementations
• stylesheets - CSS supplied to you for the plugin and will not change for different plugin implementations
• plugin name - Always pip
• plugin options - Contains an array of properties and values

Gehen Sie folgendermaßen vor, um das Plugin zu Ihrem Code hinzuzufügen:

1. Fügen Sie die Stile für das Bild-in-Bild-Plugin hinzu.

   <link href="https://players.brightcove.net/videojs-pip/1/videojs-pip.css" rel="stylesheet">

2. Fügen Sie die JavaScript-Datei hinzu, um das Bild-in-Bild-Plugin einzuschließen.

   <video-js id="myPlayerID"
     data-video-id="5701202551001"
     data-account="1752604059001"
     data-player="default"
     data-embed="default"
     width="640" height="360"
     controls=""></video-js>
   <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
   
   <!-- Script for the picture-in-picture plugin -->
   <script src="https://players.brightcove.net/videojs-pip/1/videojs-pip.min.js"></script>

3. Wickeln Sie den Player-Einbettungscode in ein Containerelement mit der Klasse ein vjs-pip-container. Das Bild-in-Bild-Plugin erfordert, dass Ihr Player von diesem Containerelement umschlossen ist.

   <div class="vjs-pip-container">
       <video-js id="myPlayerID"
         data-video-id="5701202551001"
         data-account="1752604059001"
         data-player="default="
         data-embed="default="
         controls=""
         width="640" height="360"></video-js>
       <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
     </div>
   
           <!-- Script for the picture-in-picture plugin -->
           <script src="https://players.brightcove.net/videojs-pip/1/videojs-pip.min.js"></script>

   Wenn das obige <div> Element nicht als übergeordnetes Element des Players gefunden wird, kann das Plugin nicht initialisiert werden und Sie erhalten die folgende Protokollwarnung:

   expected player to be a child of a "vjs-pip-container" element, cannot continue with picture-in-picture plugin

4. Fügen Sie benutzerdefinierten Skriptcode hinzu, der Folgendes bewirkt:
   • Wenn der Player bereit ist, wird ein Verweis auf den Brightcove-Player abgerufen. In diesem Beispiel erstellen wir eine Variable mit dem Namen myPlayer und weisen ihr einen Verweis auf den Player zu.
   • Initialisiert das Bild-in-Bild-Plugin.

   videojs.getPlayer('myPlayerID').ready(function() {
     // When the player is ready, get a reference to it
     var myPlayer = this;
     // Initialize the picture-in-picture plugin
     myPlayer.pip();
   });

   Einzelheiten finden Sie in der Codepen Beispiel über.

Optionen

Sie können bei der Initialisierung ein Optionsobjekt an das Plugin übergeben. Dieses Objekt kann eine der folgenden Optionen enthalten:

allowOnMobile

• allowOnMobile:
  • Typ: boolean
  • Standard: false

  • Standardmäßig funktioniert der Bild-in-Bild-Modus auf Android- oder iOS-Mobilgeräten nicht. Der Grund dafür ist, dass diese feste CSS-Positionierung auf zoombaren Geräten mit mehreren Ansichtsfenstern nicht wie auf Desktop-Geräten funktioniert.

    Wenn Sie Bild-in-Bild auf unterstützten Mobilgeräten aktivieren möchten, können Sie dies mit dieser Option tun. In einigen Fällen möchten Sie möglicherweise den Support aktivieren:

    • Der Integrator ist bereit, die Verantwortung für die Verwaltung der Positionierung für den Bild-in-Bild-Player-Modus zu übernehmen.
    • Es ist unwahrscheinlich, dass die Website, auf der der Player verwendet wird, gezoomt wird.
    • Das Zoomen wurde mit a deaktiviert user-scalable=no Richtlinie. Die Verwendung dieser Richtlinie wird machen position: fixed Verhalten Sie sich wie auf Desktops, dies wird jedoch nicht ausdrücklich empfohlen, da dies ein Problem mit der Barrierefreiheit sein kann.

      <meta name="viewport" content="width=device-width, user-scalable=no">

  • Beispiel:

    // Allow mobile (iOS and Android) devices to enter PIP mode.
    player.pip({allowOnMobile: true});

schließbar

• closeable:
  • Typ: boolean
  • Standard: true
  • Standardmäßig kann der Bild-in-Bild-Modus vom Benutzer durch Klicken auf deaktiviert werden X. Schaltfläche in der oberen rechten Ecke des Players. Diese Funktion kann durch Übergeben deaktiviert werden false für diese Option.

  • Beispiel:

    // Do not allow the user to close the PIP mode player.
    player.pip({closeable: false});

Rahmen

• scale:
  • Typ: number
  • Standard: 2 / 3
  • Der Skalierungsfaktor, der auf den Player angewendet wird, wenn er sich im Bild-in-Bild-Modus befindet. Dieser Wert muss eine Zahl größer als Null und kleiner oder gleich 1 sein.

  • Beispiel:

    // Detach the player, but do not change its size.
    player.pip({scale: 1});

  • Beispiel 2:

    // Detach the player, and change its size to 1/2.
    player.pip({scale: 0.5});

Höhe und Breite

• height and width:
  • Typ: number
  • Standard: null

  • Standardmäßig verkleinert das Plugin die Abmessungen des Players um einen Faktor, der durch das bestimmt wird scale Möglichkeit. Bereitstellung eines height (oder width ) überschreibt die Standardskalierung und legt die Größe des verkleinerten Players explizit fest.

    Wenn nur eine Dimension bereitgestellt wird, wird die andere verkleinert, um das Seitenverhältnis beizubehalten. Wenn beide Abmessungen angegeben sind, wird der Player auf die genaue, angegebene Größe eingestellt, sodass sich das Seitenverhältnis ändern kann.

  • Beispiel:

    // Detach the player and set its width to 300 pixels. Scale its height to
    // maintain its current aspect ratio.
    player.pip({width: 300});

posX

• posX:
  • Typ: string
  • Standard: "right"

  • Die horizontale Ausrichtung des Players im Bild-in-Bild-Modus - entweder "rechts" oder "links".

  • Beispiel:

    // When the player is in PIP mode, align it to the left side of the viewport.
    player.pip({posX: 'left'});

Sträußchen

• posY:
  • Typ: string
  • Standard: "bottom"

  • Die vertikale Ausrichtung des Players im Bild-in-Bild-Modus - entweder "oben" oder "unten".

  • Beispiel:

    // When the player is in PIP mode, align it to the top of the viewport.
    player.pip({posY: 'top'});

sichtbar

• viewable:
  • Typ: number
  • Standard: 0.8

  • Der Schwellenwert, ab dem der Spieler als sichtbar angesehen wird. Mit anderen Worten, wenn dieser Prozentsatz der gesamten Spielerfläche (Höhe und Breite) im Ansichtsfenster des Browsers sichtbar ist, wird er als sichtbar angesehen.

    Mit der Standardeinstellung von 0,8 wird der Player beispielsweise nicht als sichtbar angesehen, es sei denn, 80% davon sind im Ansichtsfenster sichtbar. Das viewable Der Wert muss eine Zahl größer oder gleich 0 und kleiner oder gleich 1 sein.

  • Beispiel:

    // If more than half the player is outside of the viewport, activate PIP mode.
    player.pip({viewable: 0.5});

manualContainerSize

• manualContainerSize:
  • Typ: boolean
  • Standard: false

  • Standardmäßig hält ein Player mit aktiviertem Plugin die physischen Abmessungen des speziellen Containerelements mit den Abmessungen des Players synchron. Dieses Verhalten funktioniert jedoch möglicherweise nicht für alle Anwendungsfälle. Daher kann es deaktiviert werden, indem diese Option auf gesetzt wird true.

    Dabei verhält sich das Containerelement wie ein normales Blockelement. Dies bedeutet, dass Benutzer des Plugins seine Größe selbst verwalten müssen.

    Diese Option kann auch über den Booleschen Wert im Einbettungscode festgelegt werden data-manual-container-size Attribut auf dem Container. Durch seine Anwesenheit wird diese Option auf true gesetzt. Beachten Sie, dass jeder an das Plugin übergebene Wert Vorrang vor allen im Einbettungscode definierten Werten hat.

  • Beispiel:

    // Implementation will handle sizing the container.
    player.pip({manualContainerSize: true});

  • Beispiel mit dem data-manual-container-size Attribut auf dem Container:

    <div class="vjs-pip-container" data-manual-container-size>
      <video-js class="video-js vjs-default-skin">
      </video-js>
    </div>

Verwenden der Optionen

Sie haben zwei Möglichkeiten, die Option zu nutzen:

1. Im Studio SPIELER> PLUGINS Sektion.
2. Verwenden von JavaScript mit dem Player.

Verwenden von Studio

Bearbeiten Sie in Studio den Player und kehren Sie zum zurück Plugins Sektion. Klicken Sie in der Namensliste auf Bild-in-Bild. Listen Sie im richtigen JSON-Format die Option (in Anführungszeichen) auf, gefolgt vom entsprechenden Wert. Wenn die Werte Zeichenfolgen sind, müssen sie in Anführungszeichen stehen. Wenn sie numerisch oder boolesch sind, können Anführungszeichen nicht eingefügt werden:

Verwenden von JavaScript

Um die Optionen in Code zu implementieren, erstellen Sie ein Objekt, weisen den gewünschten Optionen ihre jeweiligen Werte zu und übergeben dann das Options-Objekt beim Aufruf des Plugins:

videojs.getPlayer('myPlayerID').ready(function() {
  // When the player is ready, get a reference to it
  var myPlayer = this,
      options = {};

  options.scale = 0.5;
  options.posX = "left";
  // Initialize the picture-in-picture plugin
  myPlayer.pip(options);
});

Methoden

Mit den folgenden Methoden können Sie mit dem Bild-in-Bild-Plugin interagieren:

Veranstaltungen

Die folgenden Ereignisse werden vom Bild-in-Bild-Plugin ausgelöst:

Änderungsliste

Siehe die Versionshinweise zum Bild-in-Bild-Plug-in.

Historische Versionshinweise finden Sie im Changelog hier.