Tabla de contenido
1. Reproducir: se activa cuando los medios comienzan a reproducirse.
2. pausa: se activa cuando el medio pausa la reproducción.
3. finalizado: se activa cuando finaliza la reproducción multimedia.
7. Error: se activa cuando ocurre un error durante la carga o reproducción de medios.
JavaScript proporciona algunos eventos multimedia para manejar operaciones relacionadas e interacciones con elementos multimedia como audio y video. Estos eventos se pueden escuchar a través de código JavaScript y realizar las acciones correspondientes cuando se activa el evento.
1. Reproducir: se activa cuando los medios comienzan a reproducirse.
El evento de reproducción se activa cuando el medio comienza a reproducirse y se puede utilizar para realizar algunas operaciones relacionadas con la reproducción. Aquí hay un ejemplo sencillo.
<!DOCTYPE html>
<html>
<head>
<title>Play Event Example</title>
<script>
var video = document.getElementById('myVideo');
video.addEventListener('play', function() {
console.log('Video started playing');
// 在视频开始播放时执行其他操作，比如显示控制按钮、隐藏封面图等
});
</script>
</head>
<body>
<video id="myVideo" src="video.mp4" controls></video>
</body>
</html>
En el ejemplo anterior, creamos un elemento <video> y especificamos un archivo de video como su archivo fuente. A través del código JavaScript, utilizamos el método addEventListener para agregar un controlador de eventos para el evento de reproducción. En el controlador de eventos imprimimos un mensaje y podemos realizar otras acciones, como mostrar los botones de control u ocultar la imagen de portada, etc. Cuando el video comience a reproducirse, se activará el evento de reproducción y se realizarán las operaciones correspondientes.
2. pausa: se activa cuando el medio pausa la reproducción.
El evento de pausa se activa cuando el medio está en pausa y se puede utilizar para realizar algunas operaciones relacionadas con la reproducción en pausa. Aquí hay un ejemplo sencillo.
<!DOCTYPE html>
<html>
<head>
<title>Pause Event Example</title>
<script>
var video = document.getElementById('myVideo');
video.addEventListener('pause', function() {
console.log('Video paused');
// 在视频暂停播放时执行其他操作，比如显示暂停按钮、显示广告等
});
</script>
</head>
<body>
<video id="myVideo" src="video.mp4" controls></video>
</body>
</html>
En el ejemplo anterior, creamos un elemento <video> y especificamos un archivo de video como su archivo fuente. A través del código JavaScript, utilizamos el método addEventListener para agregar un controlador de eventos para el evento de pausa. En el controlador de eventos imprimimos un mensaje y podemos realizar otras acciones, como mostrar un botón de pausa o mostrar un anuncio, etc. Cuando el vídeo esté en pausa, se activará el evento de pausa y se realizará la operación correspondiente.
3. finalizado: se activa cuando finaliza la reproducción multimedia.
El evento finalizado se activa cuando finaliza la reproducción multimedia y se puede utilizar para realizar algunas operaciones relacionadas con el final de la reproducción. Aquí hay un ejemplo sencillo.
<!DOCTYPE html>
<html>
<head>
<title>Ended Event Example</title>
<script>
var video = document.getElementById('myVideo');
video.addEventListener('ended', function() {
console.log('Video ended');
// 在视频播放结束时执行其他操作，比如显示相关推荐视频、自动重新播放等
});
</script>
</head>
<body>
<video id="myVideo" src="video.mp4" controls></video>
</body>
</html>
En el ejemplo anterior, creamos un elemento <video> y especificamos un archivo de video como su archivo fuente. A través del código JavaScript, utilizamos el método addEventListener para agregar un controlador de eventos para el evento finalizado. En el controlador de eventos, imprimimos un mensaje y podemos realizar otras acciones, como mostrar videos recomendados relacionados o reproducirlos automáticamente. Cuando finalice la reproducción del vídeo, se activará el evento finalizado y se realizará la operación correspondiente.
4. timeupdate: se activa cuando cambia el tiempo de reproducción del medio y generalmente se usa junto con controles de reproducción, como barras de progreso.
El evento timeupdate se activa cuando cambia la posición de reproducción de los medios y generalmente se usa para actualizar la barra de progreso de la reproducción de medios en tiempo real o mostrar el tiempo de reproducción actual. Aquí hay un ejemplo sencillo.
<!DOCTYPE html>
<html>
<head>
<title>Timeupdate Event Example</title>
<style>
#progressBar {
width: 300px;
height: 10px;
background-color: #ccc;
}
#progress {
width: 0%;
height: 100%;
background-color: #00f;
}
</style>
<script>
var video = document.getElementById('myVideo');
var progressBar = document.getElementById('progress');
video.addEventListener('timeupdate', function() {
var currentTime = video.currentTime;
var duration = video.duration;
var progress = (currentTime / duration) * 100;
progressBar.style.width = progress + '%';
});
</script>
</head>
<body>
<video id="myVideo" src="video.mp4" controls></video>
<div id="progressBar">
<div id="progress"></div>
</div>
</body>
</html>
En el ejemplo anterior, creamos un elemento <video> y especificamos un archivo de video como su archivo fuente. A través del código JavaScript, utilizamos el método addEventListener para agregar un controlador de eventos para el evento timeupdate. En la función del controlador de eventos, calculamos la relación entre el tiempo de reproducción actual y el tiempo de reproducción total y lo convertimos en un porcentaje para actualizar el ancho de la barra de progreso. Mediante el estilo CSS, creamos un contenedor de barra de progreso y un elemento de barra de progreso, y usamos código JavaScript para actualizar el ancho de la barra de progreso para reflejar el progreso de la reproducción del video.
Siempre que cambie la posición de reproducción del video, se activará el evento de actualización de tiempo y se realizará la operación correspondiente. En este ejemplo, la barra de progreso se actualizará en tiempo real según la posición de reproducción del video para mostrar el progreso de reproducción actual.
5. canplay: se activa cuando el medio puede comenzar a reproducirse, lo que indica que el medio se ha cargado con suficientes datos para la reproducción.
El evento canplay se activa cuando se pueden reproducir los medios y generalmente se usa para detectar si los medios pueden comenzar a reproducirse. Aquí hay un ejemplo sencillo.
<!DOCTYPE html>
<html>
<head>
<title>Canplay Event Example</title>
<script>
var video = document.getElementById('myVideo');
video.addEventListener('canplay', function() {
console.log('Media can be played');
// 执行其他操作，如播放视频
});
</script>
</head>
<body>
<video id="myVideo" src="video.mp4"></video>
</body>
</html>
En el ejemplo anterior, creamos un elemento <video> y especificamos un archivo de video como su archivo fuente. A través del código JavaScript, utilizamos el método addEventListener para agregar un controlador de eventos para el evento canplay. En el controlador de eventos, simplemente enviamos un mensaje a la consola indicando que el medio está listo para reproducirse.
Cuando el medio haya terminado de cargarse y esté listo para reproducirse, se activará el evento canplay y se realizarán las acciones apropiadas. En este caso, simplemente enviamos un mensaje, pero puedes hacer otras cosas si lo deseas, como reproducir automáticamente el vídeo o mostrar un botón de reproducción.
6. metadatos cargados: se activa cuando se cargan los metadatos multimedia (como el tamaño, la duración, etc.).
El evento de metadatos cargados se activa cuando se cargan los metadatos del medio y generalmente se usa para realizar las operaciones correspondientes cuando los metadatos del medio están disponibles. Aquí hay un ejemplo sencillo.
<!DOCTYPE html>
<html>
<head>
<title>Loadedmetadata Event Example</title>
<script>
var video = document.getElementById('myVideo');
video.addEventListener('loadedmetadata', function() {
console.log('Metadata loaded');
console.log('Duration:', video.duration);
console.log('Video width:', video.videoWidth);
console.log('Video height:', video.videoHeight);
// 执行其他操作，如显示视频信息
});
</script>
</head>
<body>
<video id="myVideo" src="video.mp4"></video>
</body>
</html>
En el ejemplo anterior, creamos un elemento <video> y especificamos un archivo de video como su archivo fuente. A través del código JavaScript, utilizamos el método addEventListener para agregar un controlador de eventos para el evento de metadatos cargados. En la función del controlador de eventos, enviamos un mensaje que indica que los metadatos multimedia se han cargado e imprimimos información relacionada con los medios, como la duración, el ancho y el alto del video.
Cuando se cargan los metadatos del medio, se activará el evento de metadatos cargados y se realizarán las operaciones correspondientes. Puede realizar otras operaciones en el controlador de eventos según sea necesario, como mostrar información relacionada con el video, ajustar el tamaño del reproductor, etc.
7. Error: se activa cuando ocurre un error durante la carga o reproducción de medios.
El evento de error es útil cuando se manejan fallas al cargar elementos multimedia u otros recursos. Se puede utilizar para detectar errores de carga y tomar las medidas adecuadas.
<!DOCTYPE html>
<html>
<head>
<title>Error Event Example</title>
</head>
<body>
<img src="nonexistent_image.jpg" alt="Image">
<script>
const image = document.querySelector('img');
image.addEventListener('error', function() {
console.log('Image failed to load.');
// 执行其他处理操作，比如显示替代图像或显示错误消息
});
</script>
</body>
</html>
En el ejemplo anterior, intentamos cargar un archivo de imagen que no existe. Cuando la imagen no se carga, se activa el evento de error y el controlador de eventos imprime un mensaje de error en la consola. Dependiendo de sus necesidades, puede manejar aún más las condiciones de error, como mostrar imágenes alternativas o mostrar mensajes de error fáciles de usar.