Elementos de Media en HTML5 by Alex Garcia Aguilar https://padlet.com/alexgarciaaguilar05/do45vvdh5f6vb1s5 en-us 2022-09-28 02:29:11 UTC 2022-09-28 04:44:25 UTC hello@padlet.com VIDEO alexgarciaaguilar05 https://padlet.com/alexgarciaaguilar05/do45vvdh5f6vb1s5/wish/2316721266 INTRODUCCION
A partir de HTML5 se estándariza el uso del vídeo mediante el elemento video del lenguaje. De igual manera aparecen un conjunto de APIs que nos permiten interactuar con el contenido que muestra el vídeo.

Si queremos incluir un vídeo en nuestra página HTML5 simplemente tendremos que escribir lo siguiente:

<video src="mivideo.webm" controls>
  <p>Su navegador no soporta vídeos HTML5.</p>
</video>
Dentro del código tenemos que conocer el significado de sus dos atributos. Por un lado el atributo src nos sirve para indicar el nombre del fichero que contiene el vídeo que queremos reproducir.

Mientras que por el otro el atributo controls permite que se muestre un panel de control de reprodución del vídeo, para que se pueda iniciar, parar, adelantar, cambiar el sonido

]]> 2022-09-28 03:11:06 UTC https://padlet.com/alexgarciaaguilar05/do45vvdh5f6vb1s5/wish/2316721266 Atributos del vídeo alexgarciaaguilar05 https://padlet.com/alexgarciaaguilar05/do45vvdh5f6vb1s5/wish/2316758460 Para poder manipular el vídeo, la forma en la que se muestra,… el elemento video de HTML5 nos ofrece diferentes atributos. Revisemos para que sirven.

Fichero 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="mivideo.webm" controls>
  <p>Su navegador no soporta vídeos HTML5.</p>
</video>
Ancho y alto 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.

<video src="mivideo.webm" width="600" height="400" controls>
  <p>Su navegador no soporta vídeos HTML5.</p>
</video>
Inicio automático del vídeo
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="mivideo.webm" autoplay controls>
  <p>Su navegador no soporta vídeos HTML5.</p>
</video>
Vídeo en bucle
En el caso de que queramos que el vídeo se reproduzca en bulce una y otra vez usaremos el atributo loop.

<video src="mivideo.webm" autoplay loop>
  <p>Su navegador no soporta vídeos HTML5.</p>
</video>
Vídeo sin sonido
Otra opción es que el vídeo se ejecute sin sonido. Esto lo conseguimos apoyándonos en el atributo muted.

<video src="mivideo.webm" autoplay muted>
  <p>Su navegador no soporta vídeos HTML5.</p>
</video>
Cartel 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.

<video src="mivideo.webm" controls poster="mivideo.png">
  <p>Su navegador no soporta vídeos HTML5.</p>
</video>
Si hemos utilizado el atributo autoplay no se verá el cartel del vídeo.

Precargar el vídeo
Los vídeos suelen ser ficheros que tienen un tamño considerable y es por ello que el tiempo de descarga en la web suele ser superior que al contenido textual o gráfico. Es por ello que se puede dar el caso de que se haya cargado el contenido de un documento, pero no el vídeo que incluye.

Para paliar este tema del tamaño podemos precargar el vídeo. En este caso vamos a utilizar el atributo preload, el cual puede tener tres valores:

‘none’, no hace buffering del vídeo.
‘auto’, hace buffering del vídeo.
‘metadata’, hace buffering, pero solo de la metainformación del vídeo.
<video src="mivideo.webm" controls preload="auto">
  <p>Su navegador no soporta vídeos HTML5.</p>
</video>]]> 2022-09-28 03:45:31 UTC https://padlet.com/alexgarciaaguilar05/do45vvdh5f6vb1s5/wish/2316758460 AUDIO alexgarciaaguilar05 https://padlet.com/alexgarciaaguilar05/do45vvdh5f6vb1s5/wish/2316766483 la etiqueta <audio> en HTML5, un fantástico elemento que nos permite insertar audio en nuestra página HTML, además conoceremos los atributos para controlar este maravilloso elemento. Estoy seguro de que terminarás esta lección con ganas de poner música de fondo a tu página web.
Etiqueta audio en HTML5

La etiqueta <audio> sirve para inserta un reproductor de sonido en html5, ahora es posible insertar un audio, una canción o cualquier música para dar vida y alegría a nuestra página web.

No olvides, entre la etiqueta de apertura y cierre es recomendable colocar un aviso en texto, este texto se mostrará en caso el navegador del usuario no sea compatible o no reconozca dicho elemento de audio. Te muestro un ejemplo de código:

HTML
1
<audio>Este es un elemento de audio no soportado por tu navegador, prueba con otro... </audio>
Por si solo la etiqueta <audio> no aparece el navegador, pues es necesario indicar cuál es el archivo para reproducir, para ello emplearemos la propiedad src y en su valor indicaremos el nombre del archivo con su respectiva extensión en caso el archivo se encuentre en la misma carpeta que el documento HTML y si se encuentra fuera, colocaremos en su lugar la dirección URL donde este alojado el audio.

Ejemplo de código para insertar audios en HTML5:

HTML
1
<audio src="miaudio.mp3" > este es un elemento de audio no soportado por tu navegador, prueba con otro </audio>
Para que el reproductor de sonido aparezca en el navegador será necesario agregar el atributo controls en la etiqueta de apertura, sus valores por defecto harán que aparezca un reproductor con sus iconos para reproducir el sonido, controlar el avance y volumen. A continuación veamos un ejemplo que funciona.

Te recomendamos leer:  Introducción a curso HTML5
Ejemplo de código para insertar audio en HTML5 con controles:

HTML
1
<audio src="miaudio.mp3" controls> este es un elemento de audio no soportado por tu navegador, prueba con otro </audio>
El resultado aparecerá con un estilo por defecto, definido por cada navegador, veamos los obtenidos en Google Chrome y Mozilla Firefox.

Resumen de todo lo anterior respecto a la etiqueta <audio> de HTML5

  • Con la etiqueta <audio> ya podemos insertar audios en nuestra página.
  • Utilizaremos el atributo src y en su valor indicaremos la ubicación de nuestro archivo de audio.
  • Utilizaremos el atributo controls para proporcionar controles a nuestro reproductor de sonido en la página.
  • Entre la etiqueta de apertura y cierre, antes del cierre colocaremos el texto que se mostrará en caso de que el navegador del usuario no soporte el audio.
Formatos de audio soportados

No todos los formatos de audio que existen se pueden utilizar para insertar en una página web, en esta ocasión conoceremos los formatos más recomendables.

  • MP3
  • OGG
  • WAV
  • AAC
  • OPUS
Etiqueta <source> para insertar audio

Otra manera de insertar elementos de audio es utilizando la etiqueta <source> dentro de <audio>, dentro de ella se especifica cual es el archivo mediante el atributo src y además se puede especificar el tipo de archivo utilizando el atributo type. Veamos un ejemplo a continuación.

Ejemplo:

HTML
1
<audio controls>
2
3
   <source src="miaudio.mp3"  type="audio/mp3">
4
Este es un elemento de audio no soportado por tu navegador, prueba con otro
5
6
</audio>
Formatos de audio alternativos en HTML5

Es muy recomendable poner más de un archivo de audio con diferentes formatos para que el navegador pueda reproducir el primer formato que reconozca, para ello nos serviremos de la etiqueta <source>.

Ejemplo:

HTML
1
<audio controls>
2
3
       <source src="miaudio.mp3"  type="audio/mp3">
4
5
       <source src="miaudio.ogg"  type="audio/ogg">
6
​
7
       <source src="miaudio.wav"  type="audio/wav">
8
​
9
Este es un elemento de audio no soportado por tu navegador, prueba con otro
10
​
11
</audio>
Resumen de los atributo HTML para <audio>

  • Controls: hará que el audio tenga los controles para que el usuario interactúe.
  • Autoplay: hará que el audio se reproduzca automáticamente al cargarse la página, sin consultar al usuario.
  • Loop: hará que el audio se reproduzca indefinidamente una vez que se inicia, es decir al finalizar, empezara a reproducirse automáticamente de nuevo.
Te recomendamos leer:  Etiqueta de vídeo HTML5 - Atributos y propiedades
Basta con colocarlos y harán su función por defecto.

Ejemplo:

HTML


1
<audio controls  autoplay  loop>
2
3
         <source src="miaudio.mp3"  type="audio/mp3">
4
​
5
</audio>
]]> 2022-09-28 03:54:04 UTC https://padlet.com/alexgarciaaguilar05/do45vvdh5f6vb1s5/wish/2316766483 Plug-ins alexgarciaaguilar05 https://padlet.com/alexgarciaaguilar05/do45vvdh5f6vb1s5/wish/2316806832 Los plugins están programados en PHP, y usan HTML, hojas de estilo CSS y JavaScript para la parte de interfaz del usuario. Cuando se implementan en la página que se está creando aportan múltiples funcionalidades. Por ejemplo: mejorar el posicionamiento como el plugin para WordPress SEO Yoast.

Los plugin pueden ser gratuitos en su inmensa mayoría o de pago. Suelen cubrir todas las necesidades que se requieren en una web, pero si hay alguna concreta o determinada que no existe, también se pueden crear plugin a medida.

Ventajas y desventajas de utilizar plugin

Son componentes esenciales en WordPress ya que añaden funcionalidades específicas que pueden mejorar la experiencia de navegación del usuario. Presentan numerosas ventajas, pero también pueden aparecer desventajas.

Ventajas:
  • Añaden funcionalidades adicionales de manera rápida y sencilla.
  • Se evita la ardua tarea de trabajar con líneas de código.
  • Se puede configurar y perfeccionar su funcionamiento.
  • Los administradores básicos pueden desarrollar esta tarea porque son sencillos de utilizar y configurar.
  • Tienen su propio panel de control para poder acceder a ellos y personalizar el funcionamiento.
Desventajas:

  • El uso excesivo de plugin cuando no se utilizan puede ralentizar el Internet.
  • La inseguridad, pues existe un amplio número de plugin y se recomienda investigar a su programador, opiniones y experiencias para saber que no habrá incidencias en esta área.

]]> 2022-09-28 04:37:38 UTC https://padlet.com/alexgarciaaguilar05/do45vvdh5f6vb1s5/wish/2316806832 YouTube alexgarciaaguilar05 https://padlet.com/alexgarciaaguilar05/do45vvdh5f6vb1s5/wish/2316811052
Insertar un vídeo o una lista de reproducción

  1. En un ordenador, ve al vídeo o a la lista de reproducción de YouTube que quieras insertar.
  2. Haz clic en COMPARTIR .
  3. En la lista de opciones que se muestra, haz clic en Insertar.
  4. Copia el código HTML del cuadro que aparece.
  5. Pégalo en el código HTML de tu sitio web.
  6. Si eres administrador de red, debes añadir "youtube.com" a la lista de permitidos del cortafuegos.
  7. Importante: Si tu sitio web o aplicación están dirigidos a niños e insertas contenido de YouTube en ellos, debes clasificar el sitio o la aplicación mediante estas herramientas. Cuando lo hagas, Google dejará de publicar anuncios personalizados en el sitio o la aplicación y se inhabilitarán algunas funciones del reproductor insertado.
]]> 2022-09-28 04:41:48 UTC https://padlet.com/alexgarciaaguilar05/do45vvdh5f6vb1s5/wish/2316811052