Support Kontakt Support | Systemstatus Systemstatus

Einbetten Brightcove Players in einem CMS

Dieses Thema enthält eine Anleitung zum Bereitstellen eines Dialogfelds für CMS-Benutzer, damit diese einbetten können Brightcove Player in einer Seite.

Einführung

Wenn Ihre CMS-Benutzer ein Video oder eine Wiedergabeliste einbetten player Auf einer Seite möchten Sie ihnen bei der Generierung der Brightcove so viel Flexibilität wie möglich geben player Betten Sie Code ein, damit sie das Erscheinungsbild der Brightcove steuern können player auf der Webseite, aber nicht erwarten, dass sie HTML- oder JavaScript-Experten sind.

Dieses Thema enthält Richtlinien dazu. Die Zielgruppe für dieses Dokument sind in erster Linie Brightcove-Partner, die jedoch für alle Integrierenden nützlich sind Video Cloud oder das Standalone Brightcove Player mit Ihrem CMS.

Player Dialogverhalten einbetten

Es sollte ein Dialogfeld vorhanden sein, in dem der Benutzer die Formatierung des steuern kann player auf der Webseite. In diesem Dialogfeld sollte der Benutzer die unten aufgeführten Felder festlegen können. Es wird davon ausgegangen, dass der Benutzer bereits ein Brightcove-Konto und ein Video oder eine Wiedergabeliste ausgewählt hat, bevor dieser Dialog angezeigt wird. Andernfalls sollte zuerst die Auswahl des Brightcove-Kontos und des Videos oder der Wiedergabeliste erfolgen, wie in beschrieben Anhang A unten.

  1. Player: Der Benutzer sollte in der Lage sein, a zu wählen player aus der verfügbaren Brightcove players. Wenn sie ein Video einbetten player, dann nur Nicht-Playlist aktiviert players sollte zur Auswahl stehen. Wenn sie eine Wiedergabeliste einbetten player, dann nur Wiedergabeliste aktiviert players sollte zur Auswahl stehen.
  2. Autoplay: Der Benutzer sollte Autoplay aktivieren / deaktivieren können. Standard ist deaktiviert.
  3. Stumm: Der Benutzer sollte Mute aktivieren / deaktivieren können. Standard ist deaktiviert.
  4. Typ einbetten: Der Benutzer sollte in der Lage sein, zwischen iFrame und Javascript einzubetten.
    1. Für ein Video playersollte der Standardwert Javascript sein.
    2. Für eine Wiedergabeliste playerDer Standardwert sollte iFrame sein.
  5. Sizing: Der Benutzer sollte zwischen Responsive auswählen können[1-1] oder Feste Größe[1-2].
    1. Für ein Video playersollte der Standardwert Responsive sein.
    2. Für eine Wiedergabeliste player:
      1. Wenn iFrame, sollte der Standardwert Responsive sein.
      2. Wenn Sie Javascript verwenden, sollte der Standardwert Fixed sein.
  6. Aspect Ratio: Der Benutzer sollte das Seitenverhältnis auswählen können[1-1].
    1. Die Auswahlmöglichkeiten sind:
      • 16:9
      • 4:3
      • Custom
    2. Standard sollte sein 16:9.
  7. Breite Höhe: Der Benutzer sollte in der Lage sein, Breite und Höhe einzugeben[1-1].
    1. Wenn das Seitenverhältnis ist 16:9 or 4:3, das Höhe Feld sollte ausgegraut sein und basierend auf automatisch berechnet werden Breite und Aspect Ratio.
    2. Standardwerte sollten sein 640 die Breite und 360 die Höhe Wenn das Seitenverhältnis benutzerdefiniert ist.

Wichtige Informationen

  • [1-1] Wenn das CMS einen nativen Container zum Einbetten von Code bereitstellt, mit dem der Benutzer Responsive vs Fixed und Width / Height angeben kann, ist es möglicherweise sinnvoller, den Container für die Größenanpassung zu verwenden und den Brightcove-Einbettungscode immer ansprechbar zu machen.
  • [1-2] Der Responsive-Einbettungscode, der unten enthalten wird, verwendet die Breite als eine maximale Breite.

Allgemeine Hilfe bei der Integration Video Cloud mit deinem CMS

Integrieren Sie Ihr CMS mit Video Cloud

Eine Liste von players

Player Management API Referenz

Wiedergabeliste identifizieren players

  1. Durchlaufen Sie die Liste von players zurückgegeben von der Player Management API Anfrage oben angegeben.
  2. Suche die playlist Feld:
    1. Wenn das Feld vorhanden ist und der Wert ist trueist es eine Wiedergabeliste player
    2. Wenn der Wert ist false oder playlist existiert nicht, mach den nächsten Schritt.
  3. Iterieren durch die plugins Liste (falls vorhanden) und nach a suchen registry_id Feld gleich @brightcove/videojs-bc-playlist-ui;; Wenn dies vorhanden ist, handelt es sich um eine Wiedergabeliste player;; wenn nicht, ist es nicht. Hier ist ein Beispiel für die Rückgabe in der players Liste:
    "items": [
       {
          {
          "account_id": "4031511818001",
          "branches": {
            "master": { "configuration": {
              "playlist": true, "plugins": [
                  {
                    "options": {
                      "account_id": "4031511818001",
                      "branches": {
                        "master": { "configuration": {
                          "id": "NkVhrXzug",
                          "playlist": true,
                          "plugins": [], // this is a v1 playlist player ...
            {
              "account_id": "4031511818001",
              "branches": {
                "master": { "configuration": {
                  "playlist": true,
                  "plugins": [
                    {
                      "options": {
                        "playOnSelect": true
                      },
                      "registry_id": "@brightcove/videojs-bc-playlist-ui",
                      "version": "2.x" // this is a v2 playlist player
                      }
                    }
                  ] ...
    

Einbetten von Parametern und Code

In den folgenden Abschnitten wird beschrieben, wie Sie die Brightcove generieren player Code basierend auf Benutzerauswahl einbetten. Das %XYZ% Werte werden in den Einbettungscode wie unten beschrieben eingesetzt.

Gemeinsame Parameter

  • %AUTOPLAY% = Autoplay wenn Autoplay aktiviert, sonst ist es ein null Schnur
  • %MUTED% = stumm wenn Muted aktiviert, sonst ist es ein null Schnur
  • %ACCOUNTID% = Vom Benutzer ausgewählte Brightcove-Konto-ID
  • %VIDEOID% = Benutzer ausgewählte Video ID
  • %PLAYLISTID% = Vom Benutzer ausgewählte Playlist-ID
  • %PLAYERID% = Vom Benutzer ausgewähltes Video player ID oder Wiedergabeliste player ID
  • %CMS% = Name des CMS
  • %CMSVERSION% = Version von CMS
  • %CONNECTORVERSION% = Version des Connectors

iFrame-Video player einbetten

Parameter für Responsive Sizing (mit maximaler Größe)

%MAXWIDTH% = Width . ‘px’
%MINWIDTH% = 0px
%WIDTH% = 100% %HEIGHT% = 100%
%PADDINGTOP%
  if (Aspect Ratio == “16:9”) {
    %PADDINGTOP% = 56%
  } elseif (Aspect Ratio == “4:3”) {
    %PADDINGTOP% = 75%
  } elseif {
  %PADDINGTOP% = (Height / Width * 100) . “%”
  }

Parameter für die feste Größe

%MINWIDTH% = Width . ‘px’
%WIDTH% = Width . ‘px’
%HEIGHT% = Height . ‘px’
%PADDINGTOP%
  if (Aspect Ratio == “16:9”) {
    %PADDINGTOP% = 56%
  } elseif (Aspect Ratio == “4:3”) {
    %PADDINGTOP% = 75%
  } elseif {
  %PADDINGTOP% = (Height / Width * 100) . “%”
  }

Einbettungscode für Brightcove

<div style="display: block; position: relative; min-width: %MINWIDTH%; max-width: %MAXWIDTH%;">
  <div style="padding-top: %PADDINGTOP%;">
    <iframe src="//players.brightcove.net/%ACCOUNTID%/%PLAYERID%_default/index.html?videoId=%VIDEOID%
      &usage=cms:%CMS%:%CMSVERSION%:%CONNECTORVERSION%:iframe
      &%AUTOPLAY%
      &%MUTED%"
      allowfullscreen=””
      webkitallowfullscreen=””
      mozallowfullscreen=””
      style= width: %WIDTH%; height: %HEIGHT%; position: absolute; top: 0; bottom: 0; right: 0; left: 0;">
    </iframe>
  </div>
</div

Beispielimplementierung

Beispiel Implementierung
Iframe-Beispielimplementierung

JavaScript (In-Page) player einbetten

Parameter für Responsive Sizing (mit maximaler Größe)

%MAXWIDTH% = Width . ‘px’
%MINWIDTH% = 0px
%WIDTH% = 100% %HEIGHT% = 100%
%PADDINGTOP%
  if (Aspect Ratio == “16:9”) {
    %PADDINGTOP% = 56%
  } elseif (Aspect Ratio == “4:3”) {
    %PADDINGTOP% = 75%
  } elseif {
  %PADDINGTOP% = (Height / Width * 100) . “%”
  }

Parameter für die feste Größe

%MINWIDTH% = Width . ‘px’
%WIDTH% = Width . ‘px’
%HEIGHT% = Height . ‘px’
%PADDINGTOP%
  if (Aspect Ratio == “16:9”) {
    %PADDINGTOP% = 56%
  } elseif (Aspect Ratio == “4:3”) {
    %PADDINGTOP% = 75%
  } elseif {
  %PADDINGTOP% = (Height / Width * 100) . “%”
  }

Einbettungscode für Brightcove

<div style="display: block; position: relative; min-width: %MINWIDTH%; max-width: %MAXWIDTH%;">
  <div style="padding-top: %PADDINGTOP%; ">
    <video-js data-video-id="%VIDEOID%"
      data-account="%ACCOUNTID%"
      data-player="%PLAYERID%"
      data-embed="default"
      data-usage="cms: :%CMS%:%CMSVERSION%:%CONNECTORVERSION%:javascript" class="video-js"
      controls %AUTOPLAY% %MUTED%
      style="width: %WIDTH%; height: %HEIGHT%; position: absolute; top: 0; bottom: 0; right: 0; left: 0;">
    </video-js>
    <script src="https://players.brightcove.net/%ACCOUNTID%/%PLAYERID%_default/index.min.js"></script>
  </div>
</div>

Beispielimplementierung

In-Page Embed Beispielimplementierung
In-Page Embed Beispielimplementierung

iFrame-Wiedergabeliste Player Einbetten

Parameter für Responsive Sizing (mit maximaler Größe)

%MAXWIDTH% = Width . ‘px’
%MINWIDTH% = 0px
%WIDTH% = 100% %HEIGHT% = 100%
%PADDINGTOP%
  if (Aspect Ratio == “16:9”) {
    %PADDINGTOP% = 56%
  } elseif (Aspect Ratio == “4:3”) {
    %PADDINGTOP% = 75%
  } elseif {
  %PADDINGTOP% = (Height / Width * 100) . “%”
  }

Parameter für die feste Größe

%MINWIDTH% = Width . ‘px’
%WIDTH% = Width . ‘px’
%HEIGHT% = Height . ‘px’
%PADDINGTOP%
  if (Aspect Ratio == “16:9”) {
    %PADDINGTOP% = 56%
  } elseif (Aspect Ratio == “4:3”) {
    %PADDINGTOP% = 75%
  } elseif {
  %PADDINGTOP% = (Height / Width * 100) . “%”
  }

Einbettungscode für Brightcove

<div style="display: block; position: relative; min-width: %MINWIDTH%; max-width: %MAXWIDTH%;">
  <div style="padding-top: %PADDINGTOP%;">
    <iframe src="//players.brightcove.net/%ACCOUNTID%/%PLAYERID%_default/index.html?playlistId=%PLAYLISTID%
      &usage=cms:%CMS%:%CMSVERSION%:%CONNECTORVERSION%:iframe
      &%AUTOPLAY%
      &%MUTED%"
      allowfullscreen=””
      webkitallowfullscreen=””
      mozallowfullscreen=””
      style=" width: %WIDTH%; height: %HEIGHT%; position: absolute; top: 0; bottom: 0; right: 0; left: 0;">
    </iframe>
  </div>
</div>

Beispielimplementierung

In-Page Embed Beispielimplementierung
In-Page Embed Beispielimplementierung

JavaScript-Wiedergabeliste (In-Page) player einbetten

Parameter für Responsive Sizing (mit maximaler Größe)

%MAXWIDTH% = Width . ‘px’
%MINWIDTH% = 0px
%PADDINGTOP% = na
%WIDTH% = 100%
%HEIGHT% = 65%
%THUMBNAILWIDTH% = Round((Width-NumThumbnails*4)/ NumThumbnails);
%THUMBNAILHEIGHT% = Round(%THUMBNAILWIDTH% * %HEIGHT% / %WIDTH%);

Parameter für die feste Größe

%MAXWIDTH% = Width . ‘px’
%MINWIDTH% = Width . ‘px’
%PADDINGTOP% = na
%WIDTH% = Width . ‘px’
%HEIGHT% = Height . ‘px’
%THUMBNAILWIDTH% = Round((Width-NumThumbnails*4)/ NumThumbnails);
%THUMBNAILHEIGHT% =Round(%THUMBNAILWIDTH% * %HEIGHT% / %WIDTH%);

Einbettungscode für Brightcove

<style type="text/css">
  .vjs-playlist {
    background-color: #000000;
    width: %WIDTH%;
    height: calc (%THUMBNAILHEIGHT% + 16px);
    text-align: center;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    margin: 0;
    padding: 0;
  }

  .vjs-playlist-title-container {
    color: #FFFFFF;
    /*display: none;*/
    opacity: 1;
    font-size: 0.7em;
    font-family: sans-serif;
    font-weight: bold;
  }

  .vjs-playlist-now-playing-text {
    color: #FFFFFF;
    /*display: none;*/
    opacity: 1;
    font-size: 0.7em;
    font-family: sans-serif;
    font-weight: bold;
  }

  .vjs-up-next-text {
    color: #FFFFFF;
    /*display: none;*/
    opacity: 1;
    font-family: sans-serif;
    font-weight: bold;
    text-align: right;
  }

  .vjs-playlist-duration {
    color: #FFFFFF;
    /*display: none;*/
    opacity: 1;
    font-family: sans-serif;
    font-weight: bold;
  }

  .vjs-mouse.vjs-playlist {
    background-color: #000000;
  }

  li.vjs-playlist-item {
    background-color: #000000;
    height: %THUMBNAILHEIGHT%;
    width: %THUMBNAILWIDTH%;
    display: inline-block;
    border: 2px solid #000000;
    padding: 0;
    margin: 0;
    cursor: pointer;
    vertical-align: middle;
  }

  li.vjs-playlist-item:hover {
    border-color: #FFFFFF;
  }
</style>
<div style="
display: block; position: relative; width: %WIDTH%; height: ; min-width:
%MINWIDTH%; max-width: %MAXWIDTH%; ">
  <video-js data-playlist-id="%PLAYLISTID%" data-account="%ACCOUNTID%" data-player="%PLAYERID%" data-embed="default" data- usage="cms:%CMS%:%CMSVERSION%:%CONNECTORVERSION%:javascript " class="video-js" controls %AUTOPLAY% %MUTED% style="
width: %WIDTH%; height: %HEIGHT%; position: relative;
top: 0px; bottom: 0px; right: 0px; left: 0px;
“> </video-js> <script
src="https://players.brightcove.net/%ACCOUNTID%/%PLAYERID%_default/index .min.js "></script>
<ol class="vjs-playlist vjs-csspointerevents vjs-mouse "></ol> </div>

Beispielimplementierung

In-Page Embed Beispielimplementierung
In-Page Embed Beispielimplementierung

Anhang A

Wenn vor dem Öffnen von kein Video oder keine Wiedergabeliste ausgewählt wurde player Dialogfeld einbetten, das Video oder die Wiedergabeliste (und ggf. das Brightcove-Konto) sollten im Dialogfeld auswählbar sein. Der Dialog sollte dem Benutzer die unten aufgeführten Felder anzeigen:

  1. Brightcove-Konto: Der Benutzer sollte in der Lage sein, ein Brightcove-Konto auszuwählen, falls noch keines ausgewählt ist.
  2. Suchfilter: Der Benutzer sollte in der Lage sein, eine Suchzeichenfolge einzugeben, um die Liste der angezeigten Videos oder Wiedergabelisten zu filtern. Bei Verwendung der Brightcove-Such-API sollte die Suchzeichenfolge URI-codiert sein (siehe Beispiel unten).
  3. Folder: Der Benutzer sollte in der Lage sein, einen Ordnernamen aus dem Brightcove-Konto auszuwählen, um die Liste der angezeigten Videos zu filtern. Die Brightcove-API bietet keinen integrierten Filter für Ordner, sodass der Clientcode alle Videos abrufen und dann nach Ordner filtern muss. (Gilt nicht für Wiedergabelisten)
  4. Grenze: Der Benutzer sollte in der Lage sein, die Anzahl der zurückgegebenen Videos zu begrenzen, um vor allem die Leistung der Suche zu verbessern. Bei Verwendung der Brightcove-Suche kann maximal 100 angegeben werden. Um mehr als 100 Videos zurückzugeben, muss ein Paging-Mechanismus implementiert werden. Wenn der Benutzer einen zu filternden Ordner ausgewählt hat, muss der Client alle Videos im Konto mithilfe des Paging-Mechanismus anfordern und diese Liste dann lokal nach Ordner filtern und die vom Benutzerlimit angegebene Anzahl von Videos zurückgeben. (Gilt nicht für Wiedergabelisten)
  5. Sortiere Nach: Der Benutzer sollte ein Sortierfeld auswählen können.
    1. Bei Videos sollte der Nutzer in der Lage sein, den Videonamen, das aktualisierte Datum, das Erstellungsdatum, das Startdatum und die Gesamtzahl der Wiedergaben auszuwählen. Der Standardwert sollte das aktualisierte Datum sein.
    2. Bei Wiedergabelisten wählt der Benutzer entweder den Namen oder das Änderungsdatum aus. Der Standardwert sollte ein Änderungsdatum sein.
  6. Sortierreihenfolge: Der Benutzer sollte in der Lage sein, die Sortierreihenfolge aufsteigend oder absteigend zu wählen. Der Standardwert sollte absteigend sein.

Der Dialog sollte das folgende Verhalten haben:

  1. Zeigen Sie eine Liste von Videos oder Playlists basierend auf der oben angegebenen Benutzerauswahl an. Erlaubt dem Benutzer, ein Video oder eine Playlist auszuwählen.
  2. Beim Anzeigen einer Liste von Videos:
    1. Nur aktive Videos sollten aufgelistet werden.
    2. Das Miniaturbild, der Videoname und die ID sollten angezeigt werden.
    3. Es kann nur ein Video ausgewählt werden.
  3. Beim Anzeigen einer Liste von Playlists:
    1. Wenn es sich bei der Wiedergabeliste um eine manuelle Wiedergabeliste handelt, zeigen Sie den Namen der Wiedergabeliste, die ID und die Anzahl der Videos in der Wiedergabeliste an.
    2. Wenn es sich bei der Wiedergabeliste um eine intelligente Wiedergabeliste handelt, zeigen Sie den Namen der Wiedergabeliste, die ID und - anstelle der Anzahl der Videos an.
    3. Es kann nur eine Playlist ausgewählt werden.
  4. Zeigen Sie einen anklickbaren Link an, der das Video oder die Wiedergabeliste öffnet player in einem neuen Browser-Tab.

Verwandte Brightcove-Dokumentation

Beispieldialogimplementierungen

Videoauswahl

Videoauswahldialog
Videoauswahldialog

Playlistenauswahl

Playlist Auswahldialog
Playlist Auswahldialog

URI-Codierungsbeispiele

  1. Suchbegriff: great+blue

    Zeichenfolge ein CMS API Ruf sollte sein: great%2Bblue

    Videos zurückgegeben: alle, die die Wörter enthalten: great UND blue[2-1]

  2. Suchbegriff: great blue

    Zeichenfolge ein CMS API Ruf sollte sein: great%20blue

    Zurückgegebene Videos enthalten alle die folgenden Wörter: great OR blue[2-1]

  3. Suchbegriff: "great blue"

    Zeichenfolge ein CMS API Ruf sollte sein: %22great%20blue%22

    Zurückgegebene Videos enthalten nur den vollständigen Satz: great blue[2-1]

Wichtige Informationen

  • [2-1] Stemming gilt in allen Fällen. Suchvorgänge wie die oben gezeigten würden mit betitelten Videos übereinstimmen Great Blues und auch die Great Blue Heron.

Seite zuletzt aktualisiert am 12. Juni 2020