Para insertar un vídeo o un audio en un documento HTML5, puedes utilizar las etiquetas <video> y <audio>, respectivamente. Veamos algunos ejemplos de cómo hacerlo.
Insertar un vídeo
La etiqueta <video> permite incrustar un vídeo en la página. Aquí tienes un ejemplo básico:
<video width="640" height="360" controls>
<source src="ruta/del/video.mp4">
<source src="ruta/del/video.ogg">
Tu navegador no soporta la etiqueta de vídeo.
</video>
Explicación:
width y height: Definen las dimensiones del vídeo.
controls: Agrega controles de reproducción (play, pause, volumen).
: Especifica la ruta del archivo de vídeo y su tipo. Puedes incluir múltiples fuentes para mayor compatibilidad.
El texto dentro de la etiqueta <video> se mostrará si el navegador no soporta la etiqueta.
Insertar un audio
La etiqueta <audio> se utiliza para incrustar audio en la página. Aquí tienes un ejemplo:
<audio controls>
<source src="ruta/del/audio.mp3">
<source src="ruta/del/audio.ogg">
Tu navegador no soporta la etiqueta de audio.
</audio>
Explicación:
controls: Agrega controles de reproducción para el audio.
: Especifica la ruta del archivo de audio y su tipo. Al igual que con el vídeo, puedes incluir múltiples fuentes.
El texto dentro de la etiqueta <audio> se mostrará si el navegador no soporta la etiqueta.
Personalización de controles
Si quieres personalizar los controles, puedes hacerlo utilizando JavaScript y CSS. Por ejemplo, puedes ocultar los controles predeterminados y crear tus propios botones:
<video id="miVideo" width="640" height="360" controls style="display: none;">
<source src="ruta/del/video.mp4" type="video/mp4">
Tu navegador no soporta la etiqueta de vídeo.
</video>
<button id="reproducir">Reproducir</button>
<button id="pausar">Pausar</button>
CSS
button {
margin: 5px;
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
}
JavaScript
const video = document.getElementById('miVideo');
const btnReproducir = document.getElementById('reproducir');
const btnPausar = document.getElementById('pausar');
btnReproducir.addEventListener('click', () => {
video.play();
});
btnPausar.addEventListener('click', () => {
video.pause();
});
Explicación
- HTML: Se define un elemento
<video>con el atributocontrolsoculto mediantestyle="display: none;". Esto evita que se muestren los controles predeterminados. - CSS: Se aplica un estilo básico a los botones para mejorar su apariencia.
- JavaScript: Se añaden eventos a los botones para controlar la reproducción del video. Al hacer clic en "Reproducir", se llama a
video.play(), y al hacer clic en "Pausar", se llama avideo.pause().
En este caso, los botones de "Reproducir" y "Pausar" controlan el vídeo a través de JavaScript.