13 Nov Ejercicio html para practicar con las etiquetas audio y vídeo
En este ejercicio vamos a practicar las etiquetas<audio> y <video>
Es importante que tengas en cuenta que actualmente algunos navegadores bloquean el atributo autoplay.
Una etiqueta audio sin el atributo controls no funcionará.
Dicha modificación aplica desde abril de 2018.
Encontrarás información que te resultará de utilidad en esta publicación.
Enunciado
Escribe un código html que muestre por pantalla dos reproductores de audio.
En el primero debes reproducir un audio alojado en tu ordenador/hosting.
En el segundo debes reproducir el audio directamente desde la fuente original.
Puedes encontrar archivos de audio mp3 en este enlace.
A continuación reproduce exactamente el mismo ejercicio pero en este caso reproductores de vídeo.
Puedes encontrar archivos de vídeo mp4 en este enlace.
Solución del ejercicio
Dada la estructura de carpetas de la imagen a continuación y suponiendo que se han descargado un mp3 y un mp4 en las carpetas audio y video respectivamente.
El documento web queda de la siguiente forma:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="francesc ricart">
<title>Solución</title>
</head>
<body>
<!-- Etiqueta audio -->
<audio src="audio/billystrings2019-11-10set1t01.mp3" controls></audio>
<audio src="https://ia801405.us.archive.org/25/items/TheMightyManatees2019-11-11/01.mp3" controls></audio>
<!-- Etiqueta video -->
<video src="video/Plan_9_from_Outer_Space_1959/Plan_9_from_Outer_Space_1959.mp4" controls></video>
<video src="https://ia800206.us.archive.org/12/items/Plan_9_from_Outer_Space_1959/Plan_9_from_Outer_Space_1959.mp4" controls></video>
</body>
</html>¡Hola!
Querido lector,
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
Entradas relacionadas:
Ejercicio html dónde practicarás primero con el word de Office y después mediante html el estructurado correcto de los encabezados de un documento web mediante h1, h2 y h3
Cuando escribes contenidos en Internet es inevitable cometer errores. ¿Sabes como corregirlos semánticamente para que los navegadores se enteren de que has escrito una corrección o actualización?
LibrosWeb, una de las mejores referencias en Internet para aprender web, se ha reciclado tras 12 años de existencia. ¡Mi enhorabuena!
Los mapas de imágenes son una funcionalidad HTML para las imágenes muy curiosa que permiten definir diferentes enlaces asociados a distintas zonas de una misma imagen. A pesar de haber caído en desuso...
Cansado de encontrar recursos online que no satisfacían mis necesidades he decidido compartir uno de mis examenes html. ¿Te animas a hacerlo?
Ejercicio html para prácticar los nombres HTML y los códigos HTML de los caracteres más útiles de recordar. Incluye solución.
No Comments