Kommentar: Das Videoobjekt ist ein neues Objekt, das in HTML5 hinzugefügt wurde. Es unterstützt die Online -Wiedergabe von Videos in verschiedenen Formaten. Es hat relativ starke Funktionen. Videoobjekt kann den aktuellen Wiedergabefortschritt über das OntimeUpdate -Ereignis melden. Im Folgenden finden Sie eine Einführung in das Problem des OntimeUpdate -Ereignisses des Videoobjekts. Interessierte Freunde können sich darauf beziehen.
Das Datum befindet sich auf einer Video -Wiedergabeseite, auf der HTML5 -Videoobjekt verwendet wird. Dies ist ein neues Objekt, das in HTML5 hinzugefügt wurde. Es unterstützt die Online -Wiedergabe von Videos in verschiedenen Formaten. Es hat relativ starke Funktionen und hat viele Ereignisse erweitert. Es kann die Video -Wiedergabe durch JavaScript -Skripte steuern. Siehe folgende zwei Links:Das Videoobjekt kann den aktuellen Wiedergabefortschritt über das OntimeUpdate -Ereignis melden. Gleichzeitig kann das Ereignis auch andere Elemente auf der Seite entsprechend der Video -Wiedergabesituation steuern, z. B. das Schalten von Kapiteln und das Anzeigen zusätzlicher Informationen als Fortschritt des Video -Wiedergabe. Hier ist ein Beispiel:
<! DocType html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "x-ua-kompatible" content = "ie = edge" />
<title> </title>
</head>
<body>
<script type = "text/javaScript">
Funktion TimeUpdate () {
document.getElementById ('time'). innerHtml = Video.CurrentTime;
}
Funktion DurationChange () {
document.getElementById ('Dauer'). Innerhtml = Video.Duration;
}
Funktion seeearsvideo () {
document.getElementById ('Video'). currentime = document.getElementById ('suchText'). Wert;
}
window.onload = function () {
var videoplayer = document.getElementById ("Video");
videoplayer.ontimeupdate = function () {timeUpdate (); };
};
</script>
<div>
<Video Controls = "Controls"
poster = "./ Images/videoground1.png"
Src = "./ Videosource/Video1.mp4"
officechange = "durationChange ()" />
</div>
<div> Zeit: <span> 0 </span> von <span> 0 </span> Sekunden. </div>
<div>
<Eingabe type = "text" />
<input type = "button" value = "suche Video" />
</div>
</body>
</html>
Natürlich können Sie dem Videoobjekt auch dynamisch Attribute oder Hängenereignisse hinzufügen, z. B. die Verwendung anderer Elemente auf der Seite, z. B.:
Video.ontimeupdate = function () {getCurrentVideoposition (); };
Die obige Codezeile scheint jedoch für Chrome ungültig zu sein. Sie können stattdessen AddEventListener verwenden:
videoplayer.adDeVentListener ("TimeUpdate", function () {getCurrentVideoposition ();}, false);
Ich weiß nicht, warum Onchrome das OntimeUpdate -Ereignis nicht direkt auf das Videoelement hängen kann, sondern über die AddEventListener -Methode Ereignisse hinzufügen muss. AddEventListener ist jedoch auch mit IE und Firefox -Browsern kompatibel, sodass es übergeben werden sollte.