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:
Ejercicios html sobre listas ordenadas y listas no ordenadas y el uso de los atributos que pueden acompañar una lista. Inlcuye solución.
Ejercicio sobre creación y estructuración de un documento web mediante capas html. Este ejercicio es preparatorio al salto a html5. Incluye solución y anotaciones de clase.
Una lista html es una relación de datos agrupados y que tienen una temática en común. Las listas pueden ser ordenadas, no ordenadas y de definiciones. Veamos en este escrito como es su sintaxis, que a...
Lo más importante que debéis aprender en este curso es como tabular correctamente vuestro código. Incluye imágenes de casos bien tabulados y mal tabulados.
Cuando nos iniciamos todos solemos cometer errores parecidos. En esta entrada encontrarás un buen repositorio de casos reales en alumnos.
Una duda frecuente cuando nos iniciamos en el mundo del html es saber cuando debemos usar un h1, un h2, un h3 o hasta un h4. En esta entrada miramos de dar un criterio lógico que pueda servir de ayuda...
Carlos M Reynafé
Posted at 10:33h, 18 marzoEstudiante desarrollo web
Francesc Ricart
Posted at 22:50h, 23 mayoNo lo soy. No entendí tu comentario.
Saludos,