DataCue

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die DataCue-Schnittstelle repräsentiert ein Cue, das willkürlich getimte Daten mit einer Audio- oder Videomediendatei verknüpft oder getimte Daten von einer Medienressource auf Webseiten zugänglich macht. Sie erweitert die TextTrackCue-Schnittstelle um eine value-Eigenschaft, die jeden Datentyp enthalten kann, und eine type-Eigenschaft, die die Art der Daten identifiziert.

Im Gegensatz zu VTTCue, das für die Anzeige von Untertiteln und Bildbeschriftungen entwickelt wurde, ist DataCue für nicht angezeigte, getimte Metadaten vorgesehen. Anwendungsfälle umfassen dynamischen Inhaltsersatz, Werbeeinblendungen, Präsentationen von ergänzendem Inhalt neben Audio oder Video oder allgemein das Auslösen von Applikationslogik an bestimmten Punkten in der Medien-Zeitleiste.

Einige Benutzeragenten können auch automatisch DataCue-Objekte für eingebettete, getimte Metadaten generieren, die innerhalb von Medienströmen übertragen werden, wie ID3-Tags in HTTP Live Streaming (HLS).

Konstruktor

DataCue() Experimentell: Erstellt ein neues DataCue-Objekt.

Instanz-Eigenschaften

Diese Schnittstelle erbt auch Eigenschaften von TextTrackCue.

DataCue.type Schreibgeschützt Experimentell: Ein Zeichenfolgenwert, der den Typ des value des Cues identifiziert, typischerweise mit der Notation im umgekehrten Domänen-Format (z.B. "org.mp4ra", "org.id3").
DataCue.value Experimentell: Die mit dem Cue verbundene Datenlast. Kann jeden Typ haben.

Instanz-Methoden

Diese Schnittstelle hat keine eigenen Methoden, erbt jedoch Methoden von TextTrackCue.

Beispiele

Assoziieren von zeitlich abgestimmten Metadaten mit einem Video

Das folgende Beispiel erstellt ein Metadaten-TextTrack in einem Videoelement und fügt DataCue-Objekte mit Geolokationskoordinaten hinzu. Wenn jedes Cue während der Wiedergabe aktiv wird, wird dessen enter-Ereignis ausgelöst, sodass die Seite reagieren kann — zum Beispiel durch das Aktualisieren einer Kartenansicht.

html

<video controls src="video.mp4"></video>

const video = document.querySelector("video");
const track = video.addTextTrack("metadata", "Geo Track");
track.mode = "hidden";

const points = [
  { start: 0, end: 10, data: { latitude: 51.5043, longitude: -0.0762 } },
  { start: 10, end: 20, data: { latitude: 48.8566, longitude: 2.3522 } },
  { start: 20, end: 30, data: { latitude: 40.4168, longitude: -3.7038 } },
];

for (const point of points) {
  const cue = new DataCue(
    point.start,
    point.end,
    point.data,
    "org.example.geo",
  );
  cue.addEventListener("enter", (e) => {
    const { latitude, longitude } = e.target.value;
    console.log(`Map pan to: ${latitude}, ${longitude}`);
  });
  track.addCue(cue);
}

// At 0s: "Map pan to: 51.5043, -0.0762"
// At 10s: "Map pan to: 48.8566, 2.3522"
// At 20s: "Map pan to: 40.4168, -3.7038"

Spezifikationen

Specification
DataCue API # datacue-interface

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden