HTML significa lenguaje de marcado de hipertexto. Se utiliza para diseñar páginas web utilizando un lenguaje de marcado. Es una combinación de hipertexto y lenguaje de marcado. HTML utiliza etiquetas y elementos predefinidos que le indican al navegador cómo mostrar correctamente el contenido en la pantalla. Entonces, en este artículo, aprenderemos cómo incrustar audio y video en HTML. Para insertar archivos multimedia en páginas web, ya sabemos cómo insertar imágenes en HTML.
¿Cómo incrustar audio en HTML?
Para incrustar audio en HTML, usamos la etiqueta <audio>. Antes de HTML5, no se podía agregar audio a las páginas web en la era de Internet Explorer. Para reproducir audio, usamos complementos web como Flash. Después del lanzamiento de HTML5, es posible. Esta etiqueta es compatible con Chrome, Firefox, Safari, Opera y Edge en tres formatos de audio: MP3, WAV, OGG. Solo el navegador Safari no es compatible con el formato de audio OGG.
Sintaxis:
<audio>
<source src="file_name" type="audio_file_type">
</audio>
Atributos de la etiqueta <audio>
| Atributo | Valor | Descripción |
|---|---|---|
| auto-reproducción | auto-reproducción | Cuando se carga la página. Especifica reproducir audio lo antes posible. |
| control S | control S | Muestra el control de audio. |
| círculo | círculo | Comenzará el audio nuevamente cuando haya terminado. |
| apagado | apagado | Cuando se cargue la página, el audio se silenciará automáticamente. |
| precarga |
metadatos automáticos ninguna |
Especifica cómo cree el autor que se cargará el audio cuando la página esté lista. |
| origen | URL | Especifica la URL del archivo de audio. |
Ejemplo:
En este ejemplo, agregaremos un archivo de audio a una página web. Para agregar archivos de audio en la página web, necesitamos un bloc de notas u otro editor de texto.
Paso 1: abra su bloc de notas buscando bloc de notas en su lista de aplicaciones.
Paso 2: guarde un archivo nuevo con un nombre válido que siga con la extensión .html.
Paso 3: Una vez que se guarda el archivo HTML, puede escribir código HTML dentro de este archivo. En este ejemplo, tenemos que incrustar un archivo de audio, así que primero tenga listo un archivo de audio y guárdelo en el mismo directorio donde se guarda su HTML. Luego, escribimos el código HTML como se muestra a continuación, siguiendo el fragmento de código del formato de código HTML.
HTML
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h2>Click play button to play audio</h2> <audio src="./test.mp3" controls></audio> </body> </html>
Producción:
Nota: Antes de agregar una fuente de audio, debe asegurarse de que el archivo de audio esté en el mismo directorio y nombre especificado.
¿Cómo incrustar video en HTML?
Para incrustar video en HTML, usamos la etiqueta <video>. Contiene una o más fuentes de video a la vez usando la etiqueta <source>. Es compatible con MP4, WebM y Ogg en todos los navegadores modernos. Solo el formato de video Ogg no es compatible con el navegador Safari.
Sintaxis
<video>
<source src="file_name" type="video_file_type">
</video>
Atributos de la etiqueta <video>
| Atributo | Valor | Descripción |
|---|---|---|
| auto-reproducción | auto-reproducción | Cuando se carga la página. Especifica reproducir el video lo antes posible. |
| control S | control S | Muestra el control de video, como reproducir, pausar y detener. |
| círculo | círculo | Comenzará el video nuevamente cuando haya terminado. |
| apagado | apagado | Cuando se cargue la página, el video se silenciará automáticamente. |
| póster | URL | Especifica que se mostrará una imagen hasta que se reproduzca el video. |
| precarga | metadatos automáticos ninguno |
Especifica cómo cree el autor que se cargará el video cuando la página esté lista. |
| origen | URL | Especifica la URL del archivo de audio. |
| ancho | píxeles | Especifica el ancho del área de video. El valor predeterminado de ancho es ‘auto’. |
| altura | píxeles | Especifica la altura del área de video. El valor predeterminado de altura es ‘auto’. |
Ejemplo:
En este ejemplo, agregaremos un video a nuestra página web. Para agregar video, usaremos la etiqueta <video> que define la fuente usando la etiqueta <source>. Cree un archivo HTML como un ejemplo de archivo de audio y guarde el archivo de video en el mismo directorio. Supongamos que un archivo de video con el nombre test.mp4 se guarda en el mismo directorio donde se guardó el archivo HTML.
HTML
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h2>Click play button to play video</h2> <video src="./test.mp4" controls></video> </body> </html>
o puedes usar el siguiente código:
HTML
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h2>Click play button to play video</h2> <video controls> <source src="./test.mp4"> </video> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por vikashgautam11 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA