Responsive Sizing für Brightcove Player

In diesem Thema erfahren Sie, wie Sie einen reaktionsschnellen Videoplayer erstellen, dessen Größe sich an die Bildschirmabmessungen anpasst.

Einleitung

Responsive Sizing bedeutet, die Größe des Players als Reaktion auf Änderungen in der Größe des Begrenzungsfensters zu ändern und dabei das Seitenverhältnis beizubehalten, damit das Video nicht mit einem Briefkasten versehen wird (siehe Abbildung unten).

Briefkastenbeispiel
Briefkastenbeispiel

Wenn Sie einen Videoplayer in eine Seite einbetten, werden Sie feststellen, dass die Größe nicht mit dem Browserfenster geändert wird. Dies liegt daran, dass dem Videoplayer standardmäßig eine feste Breite und Höhe zugewiesen wird, sodass er nicht auf Änderungen im Browser reagieren kann. Ein Aspekt des reaktionsschnellen Webdesigns besteht darin, sicherzustellen, dass sich die Elemente auf Ihrer Seite an unterschiedliche Bildschirmgrößen anpassen.

Der Spieler

Ändern Sie die Größe des Browsers, um zu sehen, wie sich die Größe des Video-Players ändert, während Sie das Video-Seitenverhältnis beibehalten. Sie sollten keine Briefkästen um das Video sehen. Beachten Sie, dass diese Dokumentseite eine maximale Breite für den Inhalt hat.

So funktioniert es

In den folgenden Abschnitten werden der Player und der im Beispiel verwendete HTML-Code erläutert.

Erstellen Sie einen reaktionsschnellen Spieler

Während Sie Ihrem Player-Einbettungscode manuell HTML hinzufügen können, um einen reaktionsfähigen Player zu erstellen, ist es am einfachsten, den zu verwenden Spieler Modul in Studio.

Befolgen Sie diese Schritte, um einen reaktionsfähigen Player zu erstellen:

  1. In dem Spieler Modul, erstellen Sie einen neuen Player oder verwenden Sie einen vorhandenen und klicken Sie auf den Spielernamen, um dessen Eigenschaften zu bearbeiten.
  2. Suchen Sie die Spielerinformationen Sektion.
  3. Stellen Sie die Dimensionierung Eigentum an Reaktionsschnell.
    Responsive Größeneinstellungen
    Responsive Größeneinstellungen

  4. Optional: Sie können eine hinzufügen Breite Eigentum in der Spielerabmessungen Rahmen. Bei einem reaktionsschnellen Spieler wird dadurch eine maximale Breite für den Spieler festgelegt.

  5. Klicken Sie auf Speichern.
  6. Um den Player zu veröffentlichen, klicken Sie auf Veröffentlichen & Einbetten > Änderungen veröffentlichen.
  7. Um das Dialogfeld „Öffnen“ zu schließen, klicken Sie auf Schließen.

  8. Wählen Sie im Medienmodul ein Video aus und veröffentlichen Sie es mit diesem Player.Weisen Sie dem Player Videoinhalte zu und veröffentlichen Sie ihn.

    Medienmodul veröffentlichen
    Medienmodul veröffentlichen
  9. Kopieren Sie entweder den Standard-Einbettungscode (iframe) oder den erweiterten Einbettungscode (In-Page) und fügen Sie ihn in eine neue HTML-Datei ein.

Der Player bettet Code ein

Beachten Sie beim Kopieren des Standard-Einbettungscodes (iframe) in Ihre HTML-Seite, dass der Player in zwei Teile eingeschlossen ist <div> Behälter. Ihr Code sollte wie folgt aussehen:

  • Zeilen 1-9: Ist der Einbettungscode, den Sie beim Veröffentlichen eines Videos mit dem Player kopiert haben.
  • Zeile 1: Definiert einen äußeren Container, der die maximale Breite für den Player festlegt. Der Standardwert ist 100%. Wenn Sie in Studio eine Breite festlegen, reagiert Ihr Player bis zur maximalen Breitengröße.
  • Zeile 2: Definiert einen inneren Container, der ein Eigenverhältnis verwendet, um die Höhe festzulegen und das richtige Seitenverhältnis beizubehalten. Weitere Informationen finden Sie unter Verstehen Sie das intrinsische Verhältnis Sektion.
  • Zeilen 3-7: Enthält den Player-Code für die Iframe-Implementierung. Beachten Sie, dass Zeile 3 a hat style Attribut, das den Spieler positioniert, um seinen übergeordneten Container zu füllen. Dadurch kann der Player die Größe ändern, wenn der Browser die Größe ändert.
<div style="position: relative; display: block; max-width: 960px;">
  <div style="padding-top: 56.25%;">
    <iframe src="https://players.brightcove.net/1752604059001/default_default/index.html?videoId=5802784116001"
      allowfullscreen=""
      allow="encrypted-media"
      style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;">
    </iframe>
  </div>
</div>

iframe Beispiel

Wenn Sie den Standard-Einbettungscode (iframe) in Ihre HTML-Seite kopieren, sollte Ihr Code folgendermaßen aussehen:

<div style="position: relative; display: block; max-width: 960px;">
  <div style="padding-top: 56.25%;">
    <iframe src="https://players.brightcove.net/1752604059001/default_default/index.html?videoId=5802784116001"
      allowfullscreen=""
      allow="encrypted-media"
      style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;">
    </iframe>
  </div>
</div>

In-Page-Einbettungsbeispiel

Wenn Sie den erweiterten Einbettungscode (In-Page) in Ihre HTML-Seite kopieren, sollte Ihr Code folgendermaßen aussehen:

<!DOCTYPE html>
<html>
<meta charset="utf-8">

<head>
<title>Responsive Brightcove Player</title>

</head>

<body>

  <div style="max-width: 960px;">
    <video-js data-account="1752604059001"
      data-player="default"
      data-embed="default"
      controls=""
      data-video-id="5802784116001"
      data-playlist-id=""
      data-application-id=""
      class="vjs-fluid"></video-js>
  </div>
  <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

</body>
</html>
<!DOCTYPE html>
<html>
<meta charset="utf-8">

<head>
<title>Responsive Brightcove Player</title>

</head>

<body>
<div style="position: relative; display: block; max-width: 640px;">
<div style="padding-top: 56.25%;">
  <video-js
    data-account="1752604059001"
    data-player="VyqgG8mql"
    data-embed="default"
     data-application-id=""
     controls=""
    style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;"></video-js>
  <script src="https://players.brightcove.net/1752604059001/VyqgG8mql_default/index.min.js"></script>
</div>
</div>

</body>
</html>

Das intrinsische Verhältnis verstehen

Bei dieser Lösung haben Sie ein intrinsisches Verhältnis verwendet, eine CSS-Technik, mit der ein untergeordnetes Element fließend an ein im übergeordneten Element festgelegtes Verhältnis gebunden wird. Dazu haben Sie einen <div> Container um den Videoplayer herum hinzugefügt und der padding-top Eigenschaft das gewünschte Seitenverhältnis für das Video zugewiesen.

Die Polsterungseigenschaft ist die Magie, die eine Box mit einem intrinsischen Verhältnis formatiert. Dies liegt daran, dass die Auffüllungseigenschaft als Prozentsatz der Breite des enthaltenen Blocks festgelegt wird. Es funktioniert gut, da Padding-Stile in allen gängigen Browsern unterstützt werden.

Das Seitenverhältnis wird durch eine einfache Berechnung bestimmt, um einen Prozentsatz zu bestimmen. Berechnen Sie beispielsweise den Prozentsatz für ein Video mit einem Seitenverhältnis von 16: 9, indem Sie 9 durch 16 teilen (dh 9/16 = .5625), um 56,25% zu erhalten. Für ein 16: 9-Video soll die Höhe 9/16 der Breite betragen.

Verwendung des Seitenverhältnisses

In dieser Lösung haben Sie das Seitenverhältnis verwendet, eine CSS-Eigenschaft, die ein bevorzugtes Seitenverhältnis für die Box festlegt und zur Berechnung der automatischen Größen und einiger anderer Layoutfunktionen verwendet wird.

Um das Seitenverhältnis zu berechnen, teilen Sie die Breite und Höhe des Videos. Diese Werte befinden sich im Abschnitt Videodateien unter den Abmessungen im Medienmodul.

Breite und Höhe des Videos
Breite und Höhe des Videos

Dazu fügen Sie die Eigenschaft style innerhalb von aspect-ratio hinzu <div> und dividieren die Werte, die der Breite und Höhe entsprechen.

<div style="position: relative; display: block; max-width: 100%;">
  <div style="aspect-ratio: 480/270;">
    <iframe src="https://players.brightcove.net/1752604059001/default_default/index.html?videoId=5802784116001"
      allowfullscreen=""
      allow="encrypted-media"
      style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;">
    </iframe>
  </div>
</div>

Für den erweiterten Einbettungscode sollte Ihr Code ähnlich wie dieser aussehen: 

<div style="max-width: 960px; aspect-ratio: 480/270 !important;">
  <video-js data-account="1752604059001"
    data-player="default"
    data-embed="default"
    controls=""
    data-video-id="4093643993001"
    data-playlist-id=""
    data-application-id=""
    class="vjs-fluid"></video-js>
  <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
</div>

Flüssigkeitsmodus verwenden

Die Video.js-Bibliothek v5.0.0 + wurde aktualisiert, um einfache reaktionsfähige Klassen zu unterstützen. Diese Klassen werden vom Brightcove Player unterstützt, wenn der erweiterte Einbettungscode (In-Page) verwendet wird.

Die Antwortklassen umfassen Folgendes:

Klasse Standardwert Seitenverhältnis
vjs-fluid Ja 2,4: 1
vjs-16-9 Nein 16:9
vjs-4-3 Nein 4:3

Die oben aufgeführten Flüssigkeitsklassen wenden die Reaktionsgröße auf den Spieler an. Sie erreichen dies, indem sie a anwenden padding-top Attribut auf die video Element.

Um einen reaktionsschnellen Player zu erstellen, der den Browser ausfüllt, fügen Sie Ihrem Player-Einbettungscode eine der Fluidklassen hinzu. Um beispielsweise ein Seitenverhältnis von 16: 9 zu verwenden, sollte Ihr Code folgendermaßen aussehen:

<video-js data-video-id="5802784116001"
  data-account="1752604059001"
  data-player="default"
  data-embed="default"
  data-application-id
  class="video-js vjs-16-9"
  controls></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

Wenn Sie eine maximale Größe für Ihren Player festlegen möchten, fügen Sie einfach eine hinzu div Container um Ihren Einbettungscode und setzen Sie die max-width oder max-height Attribut. Dieser Code begrenzt beispielsweise die Größe des Players auf 640 Pixel:

<div style="max-width: 640px;">
  <video-js data-video-id="5802784116001"
    data-account="1752604059001"
    data-player="default"
    data-embed="default"
    data-application-id=""
    class="video-js vjs-16-9"
    controls=""></video-js>
  <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
</div>