Introducción al HTML

Etiquetas de imagen, video y audio

Jesús David Navarro

jEsuSdA 8)

Índice

Imagen
Audio
Vídeo
Iframes - Inserción de multimedia externo

HTML · IMG

Inserción de imágenes:


<img 
	src="imagen.png"
	alt="Texto alternativo"
	height="42"
	width="42"
	longdesc="https://www.web.com/descripcion-imagen.html"
>

HTML · AUDIO

Inserción de audio:


<audio
	autoplay
	controls
	loop
	preload
>
	<source src="sound.ogg" type="audio/ogg">
	<source src="sound.mp3" type="audio/mpeg">
	Tu navegador no soporta la etiqueta audio.
</audio>

HTML · AUDIO

AUTOPLAY → el audio se reproduce automáticamente al cargar la página.
CONTROLS → el reproductor muestra los controles (play, stop, etc.).
LOOP → el audio se reproduce de nuevo al finalizar de forma indefinida.
PRELOAD → el audio se descarga al cargar la página, en lugar de al darle al play.

HTML · AUDIO

Formato	MIME-type
MP3	audio/mpeg
OGG	audio/ogg
WAV	audio/wav

HTML · AUDIO

Navegador	MP3	WAV	OGG
Edge/IE	SI	SI (Edge >= 79)	SI (Edge >= 79)
Chrome	SI	SI	SI
Firefox	SI	SI	SI
Safari	SI	SI	NO
Opera	SI	SI	SI

HTML · VIDEO

Inserción de vídeos:


<video
	width="320" 
	height="240"
	autoplay
	controls
	loop
	preload
	poster="imagen.jpg"
>
	<source src="movie.mp4" type="video/mp4">
	<source src="movie.ogg" type="video/ogg">
	Tu navegador no soporta la etiqueta video.
</video>

HTML · VIDEO

WIDTH y HEIGHT → el tamaño del vídeo.
AUTOPLAY → el vídeo se reproduce automáticamente al cargar la página.
CONTROLS → el reproductor muestra los controles (play, stop, etc.).
LOOP → el vídeo se reproduce de nuevo al finalizar de forma indefinida.
PRELOAD → el vídeo se descarga al cargar la página, en lugar de al darle al play.
POSTER → imagen a mostrar mientras no se reproduce el vídeo.

HTML · VIDEO

Formato	MIME-type
MP4	video/mp4
WebM	video/webm
OGV	video/ogg

HTML · VIDEO

Navegador	MP4	WebM	OGV
Edge/IE	SI	SI (Edge >= 79)	SI (Edge >= 79)
Chrome	SI	SI	SI
Firefox	SI	SI	SI
Safari	SI	SI	NO
Opera	SI	SI	SI

HTML · Iframe

Para EMBEBER un documento HTML dentro de otro

		
		 <iframe src="https://www.web.com/documento.html"></iframe>

Son muy populares y usados para incrustar contenido de Youtube, Vimeo, Twitter...

HTML · Youtube

Pasos a seguir para incrustar un vídeo de Youtube:

Vamos a youtube y localizamos el vídeo
Hacemos clic en COMPARTIR
Hacemos clic en INSERTAR
Copiamos el código
Lo pegamos
Lo modificamos si nos interesa

HTML · Youtube

Ejemplo:


   <iframe
     width="560" height="315"
     src="https://www.youtube.com/embed/KazbK9EqowA"
     frameborder="0"
     allowfullscreen
   >
   </iframe>

Seguro que los atributos de este código sabéis para qué sirven, aunque sea la primera vez que los véis. ;)

HTML · Youtube

Ejemplo: