miércoles, 23 de marzo de 2022

INSERTAR IMAGEN, SONIDO Y VIDEO EN HTML

INSERTAR IMÁGENES

Para poner una imagen simple en una página web, utilizamos el elemento <img>.

Por ejemplo, si tu imagen se llama dinosaur.jpg, y está en el mismo directorio que tu página HTML, deberás incrustar la imagen de la siguiente manera:

<img src="dinosaur.jpg">

Si la imagen estaba en el subdirectorio, images o imagenes, que estaba en el mismo directorio que la página HTML (lo que Google recomienda con fines de indización y posicionamiento en buscadores SEO), entonces deberías incrustar la imagen así:

<img src="images/dinosaur.jpg">
<img src="imagenes/dinosaur.jpg">

y así sucesivamente.


INSERTAR SONIDO

  1. Coloca la propiedad control a la etiqueta de audio para mostrar los controles de reproducir, pausar, volumen, etc.
  2. En la etiqueta source debes colocar el audio a reproducir, y tipo de formato.
  3. Debes de agregar un mensaje para indicar los casos en el que el navegar no soporte audio de html.
ejemplo:

Entre las etiquetas body coloca el código siguiente para agregar el reproductor de audio.

1
2
3
4
<audio controls>
    <source src="forelisa.mp3" type="audio/mp3">
        Tu navegador no soporta audio HTML5.
</audio>


Ejecuta tu archivo html (con o sin ejecutar en un servidor) y podrás observar un reproductor como el siguiente.


Insertar audio en HTML

El diseño es por defecto del explorador.





INSERTAR VIDEO


Un primer ejemplo muy básico para colocar un video en nuestra página web:
<video src="video.mp4" width="640" height="480"></video>

Sin embargo, esto mostrará el primer fotograma del video, con un tamaño de 640x480, pero se verá como una imagen, ya que no muestra los controles del video y tampoco tiene la autoreproducción activada. Podríamos solucionarlo indicando los atributos controls o autoplay.

Otro ejemplos básicos para colocar videos en nuestra página:

<!-- Ejemplo 1 -->
<video src="video.webm" poster="presentacion.jpg" controls></video>
<!-- Ejemplo 2 -->
<video src="video.mp4" autoplay muted loop></video>

En este caso cargamos un video, pero que no se mostrará porque se ha indicado que se utilice una imagen de presentación que se mostrará hasta que el usuario pulse en el botón de reproducir de los controles. En el segundo ejemplo, tenemos un video que se reproduce automáticamente al cargar la página, en silencio y en bucle, iniciándose una y otra vez.


Utilizando los fragmentos multimedia se pueden conseguir algunas acciones interesantes, como por ejemplo especificar el momento concreto del video (o audio) en el que se quiere empezar a reproducir o terminar de reproducir. Veamos unos ejemplos:

<!-- Ejemplo 1 -->
<video autoplay controls src="video.mp4#t=15"></video>

<!-- Ejemplo 2 -->
<video autoplay controls src="video.mp4#t=25,45"></video>

En el primer caso, reproducimos el video a partir del segundo 15 del mismo, mientras que en el segundo caso, reproducimos el video a partir del segundo 25 y terminará de reproducirse en el segundo 45.



No hay comentarios:

Publicar un comentario

Entradas populares