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:
CSS
<code class="language-css">button { margin: 5px; padding: 10px 15px; font-size: 16px; cursor: pointer; } code>
JavaScript
<code class="language-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(); }); code>
Explicación
- HTML: Se define un elemento <code class="qlv4I7skMF6Meluz0u8c wZ4JdaHxSAhGy1HoNVja _dJ357tkKXSh_Sup5xdW"><video>code> con el atributo <code class="qlv4I7skMF6Meluz0u8c wZ4JdaHxSAhGy1HoNVja _dJ357tkKXSh_Sup5xdW">controlscode> oculto mediante <code class="qlv4I7skMF6Meluz0u8c wZ4JdaHxSAhGy1HoNVja _dJ357tkKXSh_Sup5xdW">style="display: none;"code>. 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 <code class="qlv4I7skMF6Meluz0u8c wZ4JdaHxSAhGy1HoNVja _dJ357tkKXSh_Sup5xdW">video.play()code>, y al hacer clic en "Pausar", se llama a <code class="qlv4I7skMF6Meluz0u8c wZ4JdaHxSAhGy1HoNVja _dJ357tkKXSh_Sup5xdW">video.pause()code>.
En este caso, los botones de "Reproducir" y "Pausar" controlan el vídeo a través de JavaScript.