HTML5 IMG, videos y audio.pptx

HTML
Lenguaje de etiquetas de hipertexto
INF-3911
Integrantes: Bautista Mújica Juan Pedro
Leandro Reynaga Samuel
Geronimo Copa Wilder

Imágenes
Contenido
01
Videos
02
Sonidos
03

01
Imágenes
Manejo de Imágenes en Html

• Para insertar imágenes en una página web HTML5, debemos usar el
elemento `<img>`. Resumen y ejemplo:
• Utiliza el elemento `<img>` para insertar imágenes.
• Utiliza el atributo `src` (especifica el nombre de ruta de acceso de
un archivo multimedia)para especificar la ruta de la imagen.
• Utiliza el atributo `alt` (texto alternativo) para proporcionar un texto
alternativo para la imagen (importante para accesibilidad).
• Puedes ajustar el tamaño de la imagen utilizando los atributos
`width` y `height`.
• Asegúrate de que las imágenes estén en un formato web común,
como JPEG o PNG.

Html 5
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de Inserción de Imágenes</title>
</head>
<body>
<h1>Mi Página Web</h1>
<p>Esta es una imagen de un gato:</p>
<img src="gato.jpg" alt="Imagen de un gato">

</body>
</html>

Vídeo en HTML5
Atributos del vídeo
Introducción al vídeo en HTML5
Formatos de Vídeo
Con los aumentos de los anchos de banda el uso del
vídeo en la web cada vez se extiende más y hoy en día
es el contenido más consumido en las páginas web.
Atrás quedaron los días en los que no existían
estándares para poder reproducir vídeos tecnologías
como Flash o Silverlight A partir de HTML5 se
estandariza el uso del vídeo mediante el
elemento video del lenguaje. De igual manera aparecen
un conjunto de APIs.
Para poder manipular el vídeo, la forma en la que se
muestra el elemento video de HTML5 nos ofrece
diferentes atributos.
Cada uno de los navegadores es capaz de rederizar
un formato de vídeo diferente.
Formatos como mp3, mp4 o WebM son conocidos
como contenedores de formato, ya que contienen
diferentes partes que permiten que se componga un
vídeo o canción.
<video src="video.mp4" controls>
<p>reproducir mis vídeos en HTML5.</p>
</video>

Vídeo en HTML5
Formatos de Vídeo
Introducción al vídeo
en HTML5
Cada uno de los navegadores es capaz de renderizar un
formato de vídeo diferente.
Formatos como mp3, mp4 o WebM son
conocidos como contenedores de formato, ya que
contienen diferentes partes que permiten que se
componga un vídeo o canción.
Para poder manipular el vídeo, la forma en la que se
muestra el elemento video de HTML5 nos ofrece
diferentes atributos.
Con los aumentos de los anchos de banda el uso del vídeo
en la web cada vez se extiende más y hoy en día es el
contenido más consumido en las páginas web.
Atrás quedaron los días en los que no existían estándares
para poder reproducir vídeos
tecnologías como Flash o Silverlight A partir
de HTML5 se estandariza el uso del vídeo mediante
el elemento video del lenguaje. De igual manera
aparecen un conjunto de APIs.
WebM
El contenedor WebM utiliza formatos Ogg Vorbis para el audio y VP8/VP9 para el video.
MPEG 4
El contenedor MP4 utiliza Formato de audio mp3 o aac y un formato de vídeo H.264.
Ogg
El contenedor Ogg utiliza formatos Ogg Vorbis para el audio y Ogg Theora para el vídeo.

Vídeo en HTML5
Formatos de Vídeo
Introducción al vídeo
en HTML5
Para poder manipular el vídeo, la forma en la que
se muestra el elemento video de HTML5 nos
ofrece diferentes atributos.
Cada uno de los navegadores es capaz
de renderizar un formato de vídeo diferente.
Formatos como mp3, mp4
o WebM son conocidos como contenedores de
formato, ya que contienen diferentes partes que
permiten que se componga un vídeo o canción.
Con los aumentos de los anchos de banda el uso del vídeo
en la web cada vez se extiende más y hoy en día es el
contenido más consumido en las páginas web.
Atrás quedaron los días en los que no existían estándares
para poder reproducir vídeos
tecnologías como Flash o Silverlight A partir
de HTML5 se estandariza el uso del vídeo mediante
el elemento video del lenguaje. De igual manera
aparecen un conjunto de APIs.

Vídeo en HTML5
Fichero del vídeo
Ancho y alto del vídeo
Para poder indicar dónde está el fichero que
contiene el vídeo deberemos de utilizar el
atributo src. Este atributo recibirá como valor el
nombre del fichero.
Aunque como todo elemento HTML podemos modificar la
apariencia mediante el lenguaje CSS, el elemento vídeo
nos ofrece los atributos widht y height para poder definir
el ancho y alto del vídeo respetivamente.
<video src="video.mp4" controls>
</video>

Vídeo en HTML5
Ancho y alto del vídeo
Inicio automático del
vídeo
Aunque como todo elemento HTML podemos
modificar la apariencia mediante el lenguaje CSS, el
elemento vídeo nos ofrece los
atributos widht y height para poder definir el
ancho y alto del vídeo respetivamente.
Si queremos que el vídeo se inicie de forma automática
una vez que se carge el documento HTML5 deberemos de
utilizar el atributo autoplay.
<video src="video.mp4" width="600"
height="400" controls>
</video>

Vídeo en HTML5
Inicio automático del vídeo
Vídeo en bucle
Si queremos que el vídeo se inicie de forma
automática una vez que se carge el
documento HTML5 deberemos de utilizar el
atributo autoplay.
En el caso de que queramos que el vídeo se reproduzca en
bucle una y otra vez usaremos el atributo loop.
<video src="video.mp4" autoplay controls>
</video>

Vídeo en HTML5
Vídeo en bucle
Vídeo sin sonido
En el caso de que queramos que el vídeo se
reproduzca en bucle una y otra vez usaremos el
atributo loop.
Otra opción es que el vídeo se ejecute sin sonido. Esto lo
conseguimos apoyándonos en el atributo muted.
<video src="video.mp4" autoplay loop>
</video>

Vídeo en HTML5
Vídeo sin sonido
Cartel del vídeo
Otra opción es que el vídeo se ejecute sin sonido.
Esto lo conseguimos apoyándonos en el
atributo muted.
Antes de que se inicie el vídeo podemos poner una imagen
de muestra (o cartel). Para ello vamos a utilizar el
atributo poster. El atributo poster recibirá una URL con el
nombre del fichero que queremos utilizar como cartel del
vídeo.
<video src="video.mp4" autoplay muted>
</video>

Vídeo en HTML5
Cartel del vídeo
Fichero del vídeo
Antes de que se inicie el vídeo podemos poner una
imagen de muestra (o cartel). Para ello vamos a
utilizar el atributo poster. El
atributo poster recibirá una URL con el nombre del
fichero que queremos utilizar como cartel del vídeo.
Para poder indicar dónde está el fichero que contiene
el vídeo deberemos de utilizar el atributo src. Este
atributo recibirá como valor el nombre del fichero.
<video src="video.mp4" controls
poster="video.png">
</video>

03
Audio
Manejo de audio en
Html

• Date cuenta de que utilizamos el atributo autoplay para que el fichero se reproduzca
automáticamente. Dicho esto, se debe evitar reproducir sonidos automáticamente
en una página web, ya que es extremadamente molesto para los visitantes, ya que
no tendrán forma de detener la reproducción del audio.

• Multiples tipos de formato

CREDITS: This presentation template was created by Slidesgo,
including icons by Flaticon, and infographics & images by Freepik
preguntas?
wil.gero.2020@gmail.com
+591 7106063
yourcompany.com
Gracias!

HTML5 IMG, videos y audio.pptx

Recomendados

Recomendados

Más contenido relacionado

Similar a HTML5 IMG, videos y audio.pptx

Similar a HTML5 IMG, videos y audio.pptx (20)

Último

Último (7)

HTML5 IMG, videos y audio.pptx