Video-Metadaten von mediainfo

In diesem Thema erfahren Sie, wie Sie Informationen zum Video (Metadaten) aus dem abrufen mediainfo Objekt. Die Eigenschaft wird nach dem ausgefüllt loadstart Ereignis wird ausgelöst.

mediainfo Eigentum

Die mediainfo Eigenschaft ist ein Objekt, das Informationen (Metadaten) über das aktuelle Video im Player enthält.

Die mediainfo Eigenschaft ist ein Objekt, das Informationen (Metadaten) über das aktuelle Video im Player enthält. Sie füllen das Objekt mit Videoinformationen aus Ihrem CMS (Content Management System) oder Ihrer Datenbank.

Nach dem mediainfo Wenn das Objekt gefüllt ist, können Sie es zum bequemen Abrufen von Daten verwenden, wenn Sie Videoinformationen wie den Videonamen oder die Beschreibung anzeigen möchten. Das Objekt wird auch in der Analytics-Sammlung verwendet.

Felder in mediainfo

Die Felder in der mediainfo Eigentum sind wie folgt:

Feldname Beschreibung Datentyp
accountId Brightcove-Konto String
adKeys Für zukünftige Unterstützung N/A
createdAt Erstellungsdatum und -zeit UTC (2011-09-28T 20:06:37 .879Z)
cuePoints Liste der Cue-Points als Array von Objekten Array von Objekten
customFields Schlüssel-Wert-Paare von benutzerdefinierten Feldnamen und zugehörigen Werten Objekt
description Kurzbeschreibung, maximal 250 Zeichen String
duration Länge des Videos in Sekunden numerisch
economics Enthält entweder AD_SUPPORTED oder FREE. Wenn das Medium markiert ist FREE Es werden weder IMA3- noch FreeWheel-Anzeigen abgespielt. String
id Video IDEindeutige Kennung, die dem Video zugeordnet ist String
link Objekt, das einen Link enthält text und url Eigenschaften Objekt
longDescription Beschreibung, maximal 5000 Zeichen String
name Video-Titel String
poster URL zum Posterbild String
posterSources Array mit Posterquellen Array
publishedAt Datum und Uhrzeit der Veröffentlichung UTC (2011-09-28T 20:06:37 .879Z)
rawSources Informationen zur Wiedergabe Array
referenceId Video-Referenz-IDSchlüssel oder Kennung aus externer Datenbank oder CMS String
sources Liste der Wiedergaben als Array von Objekten; Jedes Objekt enthält mindestens zwei Elemente: type und src Array von Objekten
tags Tags (Metadaten), die mit dem Video verknüpft sind Array von Zeichenfolgen
textTracks Array, das Textspuren für Beschriftungen, Cue-Points usw. enthält. Array
thumbnail URL zum Miniaturbild String
thumbnailSources Datenstruktur mit Poster-Miniaturansichten String
variants Ein Array von Objekten, die mehrsprachige Metadaten für die Videos enthalten. die Objekteigenschaften: language , name , description , long_description , und custom_fields Array

Befüllen Sie mediainfo

Verwendung der on() Methode warten Sie auf die loadstart Wenn das Ereignis ausgelöst werden soll, greifen Sie im entsprechenden Ereignishandler auf die in gespeicherten Werte zu mediainfo Objekt. Beachten Sie aus dem folgenden Code die Verwendung von console.log das zeigt die mediainfo Objekt (Zeilen 111-113).

<video-js id="myPlayerID"
  data-video-id="4093643993001"
  data-account="1752604059001"
  data-player="VJvZIueYx"
  data-embed="default"
  controls=""></video-js>
<script src="https://players.brightcove.net/1752604059001/VJvZIueYx_default/index.min.js"></script>

<script type="text/javascript">
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this;
    myPlayer.on('loadstart',function(){
      console.log('mediainfo', myPlayer.mediainfo);
    })
  });
</script>

Eine Beispielanzeige von der Konsole wird hier gezeigt:

Konsolenanzeige

Füllen Sie das Objekt

Sie können die manuell ausfüllen mediainfo Eigenschaft mit Metadaten aus Ihrem CMS oder Ihrer Datenbank. Sie können dann die verwenden mediainfo Objekt sources Eigenschaft, um den Player mit einer Videowiedergabe zu füllen.

  • Zeilen 32-37: In-Page-Embed-Player-Implementierung
  • Zeilen 40-52: Erstellt das Videoobjekt manuell. Tatsächlich stammen die Daten aus CMS oder einer Datenbank, und das Objekt wird dynamisch erstellt
  • Zeile 54-55: Stellt sicher, dass der Player einsatzbereit ist, und weist die Player-Instanz einer Variablen zu
  • Zeile 56: Weist das manuell erstellte Videoobjekt dem des Players zu mediainfo Objekt
  • Zeile 57: Verwendet die des Spielers src Methode zum Zuweisen einer oder mehrerer Videowiedergaben, die in der gespeichert sind mediainfo Objekt sources Eigentum an den Spieler
  <video-js id="myPlayerID"
    data-account="3676484086001"
    data-player="2433352b-a2e2-4b7e-9a15-2d9ec7f07e9d"
    data-embed="default"
    controls=""></video-js>
  <script src="https://players.brightcove.net/3676484086001/2433352b-a2e2-4b7e-9a15-2d9ec7f07e9d_default/index.min.js"></script>

  <script type="text/javascript">
    //Populate video object (normally from database or CMS)
    var videoObject = new Object();
    videoObject.name = "Hand made video object test";
    videoObject.id = "1234msb";
    videoObject.description = "short description for hand made video object";
    videoObject.accountId = "1507807800001";
    videoObject.sources = [{
        "src": "http://solutions.brightcove.com/bcls/assets/videos/Tiger.m3u8",
        "type": "application/x-mpegURL"
      }, {
        "src": "http://solutions.brightcove.com/bcls/assets/videos/Tiger.mp4",
        "type": "video/mp4"
      }];

    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      myPlayer.mediainfo = videoObject;
      myPlayer.src(myPlayer.mediainfo.sources);
    });
  </script>

Tags und benutzerdefinierte Felder anzeigen

Sowohl die Tags als auch die benutzerdefinierten Felder werden in komplexen Datenstrukturen gespeichert. Das customFields in einem Objekt und tags in einem Array. Der folgende Screenshot zeigt die benutzerdefinierten Felder und Tags, die in der Liste hervorgehoben sind mediainfo Objekt.

Tags und benutzerdefinierte Felder in der Konsolenanzeige

Um die Daten aus diesen komplexen Datenstrukturen anzuzeigen, benötigen Sie zwei Arten von Schleifen. EIN for Schleife wird verwendet, um über das Tags-Array (Zeilen 16-20) zu iterieren und die dynamisch erstellte ungeordnete HTML-Liste in eine einzufügen <div> (definiert in Zeile 9). EIN for-in Die Schleife wird verwendet, um das benutzerdefinierte Feldobjekt (Zeilen 24-27) zu durchlaufen und die dynamisch erstellte ungeordnete HTML-Liste in das Objekt einzufügen <div>.

<video-js id="myPlayerID"
  data-video-id="4093643993001"
  data-account="1752604059001"
  data-player="VJvZIueYx"
  data-embed="default"
  controls=""></video-js>
<script src="https://players.brightcove.net/1752604059001/VJvZIueYx_default/index.min.js"></script>

<div id="displayInfo"></div>

<script type="text/javascript">
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this;
    myPlayer.on('loadstart',function(){
      //Use JavaScript to display the tags
      var numTags = myPlayer.mediainfo.tags.length;
      displayInfo.innerHTML += "<h1>Tags:</h1><ul>";
      for (var i = 0; i < numTags; i++) {
        displayInfo.innerHTML += "<li>" + myPlayer.mediainfo.tags[i] + "</li>";
      };
      displayInfo.innerHTML += "</ul><br />";

      //Use JavaScript to display custom fields
      displayInfo.innerHTML += "<h1>Custom Fields:</h1><ul>";
      for (var key in myPlayer.mediainfo.customFields) {
       displayInfo.innerHTML += "<li><strong>" + key + "</strong>: " + myPlayer.mediainfo.customFields[key] + "</li>";
      }
      displayInfo.innerHTML += "</ul>";
    })
  });
</script>

Der gerenderte HTML-Code wird wie in diesem Screenshot gezeigt angezeigt.

Tags und benutzerdefinierte Anzeige in HTML