Manual de referencia de HTML

大全 de etiquetas HTML

Audio HTML/Evento timeupdate del Video DOM

El evento timeupdate se activa cuando se actualiza currentTime La frecuencia de activación de este evento está determinada por el sistema, pero se garantiza que se active cada segundo4-66vez (suponiendo que cada manejo de eventos no supere250ms). Alentar a los usuarios代理根据 el costo promedio de carga del sistema y el procesamiento de eventos para cambiar la frecuencia de los eventos, garantizando que las actualizaciones de la IU no afecten la decodificación del video.

Audio HTML/Manual de Referencia DOM de Video

Ejemplo en línea

Después de cambiar la posición de reproducción del video, muestra la posición actual del video en segundos:

Ejemplo

!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Audio HTML/Uso del evento ontimeupdate-Tutoriales básicos(oldtoolbag.com)</title>
</head>
<body>
<p>En este ejemplo, hemos utilizado HTML DOM para agregar el evento "ontimeupdate" al elemento video.
Se desencadena la función cuando el usuario comienza a reproducir el video o cambia la posición de reproducción del video, mostrando la posición de reproducción del video.</p>
<video id="myVideo" width="320" height="176" controls>
　　<source src="movie.mp4" type="video/mp4">
　　<source src="movie.ogg" type="video/ogg">
　　Su navegador no admite HTML5　etiqueta video.
</video>
<p>Posición de reproducción: <span id="demo"></span></p>
<script>
//　Obtener el elemento video con id="myVideo"
var　vid　=　document.getElementById("myVideo");
//　Añadir el evento ontimeupdate al elemento video, ejecutar la función si cambia la posición de reproducción actual.　　
vid.ontimeupdate = function() {myFunction()};
function myFunction()　
{
　　　　//　Mostrar la posición de reproducción del video en el elemento p con id="demo"　
　　　　document.getElementById("demo").innerHTML = vid.currentTime;
}
</script>
</body>
</html>

Prueba y mira ‹/›

Definición y uso

El evento timeupdate en el audio/Video (audio/al cambiar la posición de reproducción del video).

Este evento se puede llamar en las siguientes situaciones:

Reproducir audio/Video (audio/video)
Mover el audio/Video (audio/la posición de reproducción del video)

Consejo: 　El evento timeupdate del Audio/del objeto VideocurrentTime usados junto con la propiedad que devuelve el tiempo de reproducción del audio/Video (audio/la posición de reproducción del video (en segundos).

Compatibilidad con navegadores

IEFirefoxOperaChromeSafari

Sintaxis

En HTML:

<audio|video ontimeupdate="myScript">Pruebe

En JavaScript:

audio|video.ontimeupdate=function(){myScript};Pruebe

En JavaScript, utilice el método addEventListener():

audio|video.addEventListener("timeupdate", myScript);Pruebe

Nota: Internet Explorer 8 y versiones anteriores de IE no son compatibles addEventListener() Métodos.

Detalles técnicos

Etiquetas HTML compatibles:	<audio> y <video>
Objetos JavaScript compatibles:	Audio, Video

Ejemplo en línea

Cuando cambia la posición de reproducción del audio, muestra la posición actual de reproducción del audio (en segundos):

Ejemplo

!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Audio HTML/Uso del evento ontimeupdate-Tutoriales básicos(oldtoolbag.com)</title>
</head>
<body>
<p>En este ejemplo, usamos HTML DOM para agregar el evento "ontimeupdate" al elemento audio.
Llamar a la función cuando el usuario comienza a reproducir el video o cambia la posición de reproducción del audio y mostrar la posición de reproducción./p>
<audio id="myAudio" controls>
　　<source src="horse.ogg" type="audio/ogg">
　　<source src="horse.mp3" type="audio/mpeg">
　　　Su navegador no admite el elemento audio.
</audio>
<p>Posición de reproducción: <span id="demo"></span></p>
<script>
//　Obtener el elemento audio con id="myAudio"
var aud = document.getElementById("myAudio");
//　Agregar evento ontimeupdate al elemento audio y ejecutar la función cuando cambia la posición de reproducción　
aud.ontimeupdate = function()　
{
　　　　myFunction();
};
function myFunction()　
{
　　　　//　Mostrar posición de reproducción en el elemento <p> con id="demo"
　　　　document.getElementById("demo").innerHTML = aud.currentTime;
}
</script>
</body>
</html>

Prueba y mira ‹/›

Ejemplo en línea

Establecer posición de reproducción usando la propiedad currentTime 5 segundo:

Ejemplo

!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Audio HTML/Uso del evento ontimeupdate-Tutoriales básicos(oldtoolbag.com)</title>
</head>
<body>
<video id="myVideo" width="320" height="240" controls>
　　<source src="movie.mp4" type="video/mp4">
　　<source src="movie.ogg" type="video/ogg">
　　Su navegador no admite la etiqueta de video.
</video><br>
<button onclick="setCurTime()" type="button">Establecer posición de reproducción　5　segundo</button>
<p id="demo"></p>
<script>
//　Obtener el elemento video con id="myVideo"
var　vid　=　document.getElementById("myVideo");
//　Agregar el evento "timeupdate" al video
vid.addEventListener("timeupdate",　getCurTime);
//　Mostrar la posición de reproducción del video en el elemento p con id="demo"　
function　getCurTime()　
{　
　　　　document.getElementById("demo").innerHTML　=　"La posición de reproducción actual es　"　+　vid.currentTime　+　"　segundo。";
}　
//　Establecer la posición de reproducción a　5　segundo
function　setCurTime()　
{　
　　　　vid.currentTime　=　5;
}　
</script>　
</body>
</html>

Prueba y mira ‹/›

Audio HTML/Manual de Referencia DOM de Video

HTML: <template> etiqueta