DataCue: DataCue() Konstruktor
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Der DataCue() Konstruktor erstellt und gibt ein neues DataCue-Objekt zurück, das eine zeitgesteuerte Metadaten-Markierung über einen bestimmten Zeitraum darstellt. Die resultierende Markierung kann mit TextTrack.addCue() zu einem Metadaten-TextTrack hinzugefügt werden, wodurch beliebige Daten mit der Audio- oder Video-Wiedergabe synchronisiert werden können.
Syntax
new DataCue(startTime, endTime, value)
new DataCue(startTime, endTime, value, type)
Parameter
startTime-
Eine Zahl, die die Startzeit der Zeitspanne der Markierung in Sekunden darstellt. Dies entspricht dem Punkt auf der Medientimeline, an dem die Markierung aktiv wird und ihr
enterEreignis ausgelöst wird. endTime-
Eine Zahl, die die Endzeit der Zeitspanne der Markierung in Sekunden darstellt. Wenn die Medienwiedergabe diese Zeit erreicht, wird das
exitEreignis der Markierung ausgelöst. Verwenden SieInfinityfür eine Markierung, die bis zum Ende des Mediums aktiv bleibt. value-
Die mit der Markierung verknüpften Nutzdaten. Diese können jede Art von Daten sein, wie ein String, ein JavaScript-Objekt oder ein
ArrayBuffer. Der Wert wird in dervalueEigenschaft der Markierung gespeichert. typeOptional-
Ein String, der den Typ oder das Schema der Daten in
valueidentifiziert. Üblicherweise handelt es sich dabei um einen umgekehrten Domain-Notation-String (z.B."org.id3","org.mp4ra"). Der Wert wird in dertypeEigenschaft der Markierung gespeichert und ist standardmäßig ein leerer String, wenn nicht angegeben.
Rückgabewert
Ein neues DataCue-Objekt.
Beispiele
Erstellen eines DataCue mit Geolokationsdaten
Dieses Beispiel erstellt ein DataCue, das Geolokationskoordinaten trägt, wobei ein umgekehrter Domain-String als type verwendet wird, um das Datenformat zu identifizieren.
<video controls src="video.mp4"></video>
const video = document.querySelector("video");
const track = video.addTextTrack("metadata", "Geo Track");
track.mode = "hidden";
// Create a cue from 5 seconds to the end of the media
const data = { latitude: 51.5043, longitude: -0.0762 };
const cue = new DataCue(5.0, Infinity, data, "org.example.geo");
cue.addEventListener("enter", (e) => {
const { latitude, longitude } = e.target.value;
console.log(`Pan map to: ${latitude}, ${longitude}`);
});
track.addCue(cue);
Spezifikationen
| Specification |
|---|
| DataCue API # dom-datacue-datacue |
Browser-Kompatibilität
Siehe auch
DataCueTextTrackTextTrack.addCue()enterEreignisexitEreignis