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

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

Posted at 14:14h in Tutorial HTML gratuito. Aprende a estructurar tus páginas web., Ejercicios HTML by Francesc Ricart 2 Comments

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.

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!

Entradas relacionadas:

Respuesta a dudas típicas cuando aprendemos html por primera vez
Cuando aprendes HTML por primera vez se presentan dudas lógicas fruto de nuestra inseguridad. Desafortunadamente en la red, en muchas ocasiones no encontramos las respuestas que necesitamos. En esta ...

LibrosWeb ahora es UniWebSidad
LibrosWeb, una de las mejores referencias en Internet para aprender web, se ha reciclado tras 12 años de existencia. ¡Mi enhorabuena!

Etiquetas html para escribir tablas. Olvídate de atributos obsoletos.
El uso de tablas html es un clásico dentro del mundo web. Se usan como recurso para introducir datos en un documento web y nunca para maquetar. ¡O así debería ser! Veamos thead, tbody, tfoot, caption...

Ejercicio html sobre como usar las etiquetas h1, h2, h3
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

Ejercicio estructura web mediante capas con div e id
¿Como crear y organizar capas html en un documento web? En este ejercicio lo harás de 0. Se incluye propuesta de solución. Es un paso previo a html5.

Ejercicio html sobre códigos HTML y caracteres especiales
Ejercicio html para prácticar los nombres HTML y los códigos HTML de los caracteres más útiles de recordar. Incluye solución.

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

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

Enunciado

Solución del ejercicio

Entradas relacionadas:

Francesc Ricart

2 Comments

Carlos M Reynafé

Francesc Ricart

Post A Comment