Ejercicio html para practicar con las etiquetas audio y vídeo

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.

carpetas web
estructura carpetas web solución presentada para el audio / video

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!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media / 5. Votos:

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.