Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL y htaccess


Etiqueta HTML5 video: Embeber vídeos con su propio player

Post de introducción a la etiqueta de HTML5 video, esta nueva etiqueta tiene como funcionalidad crear  un player y/o reproductor para visualizar vídeos en una página web. Establece un estandar para embeber vídeos.

Hasta la llegada de HTML5 no había ningún estandar para la reproducción de vídeos ni audios en la web, por lo que la mayoría de webs optaban por usar el plugin de flash, QuicTime, Windows Media…

Con la etiqueta video es muy sencillo crear el player para reproducir vídeo, os muestro una imagen en la que podemos apreciar un vídeo con su player con tan solo 3 líneas de código.

HTML5 video

Otras etiquetas multimedia interesantes son:

  • SVG para realizar gráficos vectoriales.
  • audio que es similar que video pero para reproducir audios.

¿Qué navegadores soportan el tag de HTML5 video?

La compatibilidad de los principales navegadores con el vídeo en HTML5 es la siguiente:

  • Internet Explorer: Desde la versión 9.0 y posteriores.
  • Mozilla Firefox: Desde la versión 3.5 y posteriores.
  • Google Chrome: Desde la versión 4.0 y posteriores.
  • Safari: Desde la versión 4.0 y posteriores.

Formatos de vídeo compatibles

Tenemos 3 formatos compatibles siendo el MP4 el más soportado por los navegadores:

  • MP4: Compatible con Google Chrome, Mozilla Firefox, Safari e Internet Explorer.
  • Ogg: Compatible con Google Chrome y Mozilla Firefox.
  • WebM: Compatible con Google Chrome y Mozilla Firefox.

Los media type para referenciar cada uno de estos 3 formatos son:

  • MP4: video/mp4
  • Ogg: video/ogg
  • WebM: video/webm

Os aconsejo usar este programa ‘MIRO‘ conversor de formatos de vídeo.

Sintaxis básica de la etiqueta de HTML5 video

Veamos la sintaxis básica extraída de su web oficial:

Tal y como se aprecia en el código superior con tan solo 2 etiquetas podemos crear el player:

  • Con <video> indicamos que vamos que se va a embeber un vídeo, podemos asignar un alto y ancho al reproductor.
  • Con <source> especificamos la ruta del vídeo a reproducir.

Ejemplo básico de la etiqueta HTML5 video

Vamos con un primer ejemplo básico para verla en funcionamiento:

Os explico el ejemplo superior:

  • Tenemos la etiqueta con los atributos height y width para dar las dimesiones del vídeo.
  • Con el atributo controls mostramos los controles del player (play, pause, volumen…).
  • En la etiqueta source establecemos la ruta (src) del vídeo a reproducir y definimos el tipo (video/mp4).
  • En caso de que el navegador no soporte esta etiqueta mostramos un mensaje por pantalla.

Atributos de la etiqueta de HTML5 video

Os listo los atributos disponibles, clickando en cada uno de ellos se va al pos correspondiente con ejemplos prácticos:

  • autoplay: Con este atributo se especifica que el vídeo comience automáticamente a reproducirse. Se puede especificar de estas 2 maneras autoplay=”autoplay” o autoplay.
  • preload: En caso de omisión su valor es “auto”. Sirve para especificar si queremos que el vídeo se vaya cargando independientemente si se da al play o no. Aumentaría el consumo de ancho de banda pero el usuario tendría menos cortes en la reproducción. Tenemos 3 posibles valores para este atributo:
    preload = “none”: El vídeo no comienza a descargarse hasta que el usuario haga play.
    preload = “metadata”: Solo se cargan los metadatos del vídeo (dimensiones, primer frame, duración…).
    preload = “auto”: El vídeo se descarga independientemente de la ejecución del play.
  • controls: Con este atributo especificamos si se muestran los típicos controles del vídeo (play, stop, volumen…). Tiene 2 posibles sintaxis: controls=”controls” o controls.
  • loop: Especifica la reproducción continua del vídeo, es decir, una vez acabada la reproducción comienza de nuevo a reproducirse. Tiene 2 posibles sintaxis: loop=”loop” o loop.
  • poster: URL de la imagen a mostrar cuando el vídeo no está disponible, está cargando y no ha comenzado su reproducción. Por defecto es el primer frame del vídeo.
  • height y width: El alto y ancho del vídeo para mostrarse en la web.
  • muted: Funcionalidad para quitar el volumen al vídeo.
  • mediagroup: Establece un grupo de reproducción al que pertenece el vídeo.
  • ‘src’ de la etiqueta source: URL/path del vídeo a reproducir.
comments powered by Disqus

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies