HTML5 introdujo las 5 etiquetas de elementos multimedia más populares, es decir , <audio>, <video>, <source>, <embed>, <track>. Las etiquetas de este elemento multimedia cambiaron todo el desarrollo usando HTML.
En este artículo, conocerá brevemente estas cinco etiquetas de elementos multimedia.
Etiquetas de medios:
- <audio> : es un elemento en línea que se utiliza para incrustar archivos de sonido en una página web.
- <video> : se utiliza para incrustar archivos de video en una página web.
- <fuente> : se utiliza para adjuntar archivos multimedia como audio, video e imágenes.
- < incrustar >: se utiliza para incrustar aplicaciones externas que generalmente son contenido multimedia como audio o video en un documento HTML.
- <pista> : Especifica pistas de texto para componentes multimedia de audio y video.
Ventaja de la etiqueta de medios:
- Ya no se requieren complementos
- Velocidad: todo lo que se integre de forma natural en un navegador se renderizará y ejecutará de forma más rápida que los dispositivos de terceros importados.
- Los controles nativos (incorporados) los proporciona el navegador.
- Las accesibilidades (teclado, mouse) se integran automáticamente
Etiqueta <audio>: es una etiqueta útil si desea agregar audio, como canciones o cualquier archivo de sonido, a su página web.
Sintaxis:
<audio> <source src="sample.mp3" type="audio/mpeg"> </audio>
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<p>Audio Sample</p>
<!--- Autoplay ensure to run audio automatically
after running the program -->
<audio controls autoplay>
<source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190531165842/Recording1514.ogg"
type="audio/ogg">
<source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190531165842/Recording1514.mp3"
type="audio/mpeg">
</audio>
</center>
</body>
</html>
Producción:
<video>: es una forma estándar de incrustar un video en su página web.
Sintaxis:
<video src="" controls> </video>
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<p>Video Sample</p>
<video width="400" height="350" controls preload>
<source src="myvid.mp4" type="video/mp4">
<source src="myvid.ogg" type="video/ogg">
</video>
</center>
</body>
</html>
Producción:
<embed>: se utiliza como contenedor para incrustar complementos, como animaciones flash.
Sintaxis:
<embed attributes>
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<p>Embed Sample</p>
<embed
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210723103530/simplescreesdfdsrecorder2021071.gif"
width="300px" height="300px">
</center>
</body>
</html>
Producción:
<fuente>: Como puede observar que los elementos <audio>, <video> contienen el elemento <fuente>, la etiqueta <fuente> se utiliza para adjuntar archivos multimedia.
Sintaxis:
<source src="" type=""> ... </source>
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>Source Tag</h2>
<audio controls>
<source src="audio.mp3" type="audio/mp3">
</audio>
</center>
</body>
</html>
Producción:
<pista>: se utiliza para especificar subtítulos, archivos de subtítulos u otros archivos que contengan texto, que deben ser visibles una vez que los medios participan en ellos. Por lo tanto, es un sector simple para los elementos <audio> y <video> .
Sintaxis:
<track Attribute>
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>Track Tag: Both Audio and Video</h2>
<video width="300" height="300" controls>
<source src="myvid.mp4" type="video/mp4">
<track src=
"https://contribute.geeksforgeeks.org/wp-content/uploads/11.mp4"
kind="subtitle" srclang="en"
label="English">
</video>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA