Comentario: El objeto de video es un nuevo objeto agregado en HTML5. Admite reproducción en línea de videos en varios formatos. Tiene funciones relativamente poderosas. El objeto de video puede informar el progreso de reproducción actual a través del evento OnTimeUpdate. A continuación se muestra una introducción al problema del evento OnTimeUpdate del objeto de video. Los amigos interesados pueden referirse a él.
La fecha está en una página de reproducción de video, que utiliza el objeto de video HTML5. Este es un nuevo objeto agregado en HTML5. Admite reproducción en línea de videos en varios formatos. Tiene funciones relativamente poderosas y ha ampliado muchos eventos. Puede controlar la reproducción de video a través de scripts de JavaScript. Consulte los siguientes dos enlaces:El objeto de video puede informar el progreso de reproducción actual a través del evento OnTimeUpdate. Al mismo tiempo, el evento también puede controlar otros elementos en la página de acuerdo con la situación de reproducción de video, como cambiar capítulos y mostrar información adicional a medida que avanza la reproducción de video. Aquí hay un ejemplo:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-oquiv = "x-ua-compatible" content = "ie = bord" />
<title> </title>
</ablo>
<Body>
<script type = "text/javaScript">
función timeUpdate () {
document.getElementById ('Time'). InnerHtml = Video.CurrentTime;
}
function durationchange () {
document.getElementById ('Duración'). InnerHtml = Video.Duration;
}
función Seekvideo () {
document.getElementById ('video'). CurrentTime = document.getElementById ('SeekText'). Value;
}
window.onload = function () {
var videoPlayer = document.getElementById ("video");
VideOplayer.onTimeUpdate = function () {TimeUpdate (); };
};
</script>
<div>
<Video Controls = "Controles"
Coster = "./ Images/VeoGround1.png"
src = "./ VideoSource/Video1.mp4"
officeChange = "DurationChange ()" />
</div>
<Div> Tiempo: <span> 0 </span> de <span> 0 </span> segundos. </div>
<div>
<input type = "text" />
<input type = "button" value = "buscar video" />
</div>
</body>
</html>
Por supuesto, también puede agregar dinámicamente atributos o colgar eventos al objeto de video como usar otros elementos en la página, como:
video.ontimeUpdate = function () {getCurrentVideOposition (); };
Sin embargo, la línea de código anterior parece no ser válida en Chrome, puede usar AddEventListener en su lugar:
VideOplayer.adDeventListener ("TimeUpdate", function () {getCurrentVideOposition ();}, falso);
No sé por qué OnChrome no puede colgar directamente el evento OnTimeUpdate en el elemento de video, pero debe agregar eventos a través del método AddEventListener. Sin embargo, AddEventListener también es compatible con los navegadores IE y Firefox, por lo que debe aprobarse.