Logotipo de Xitrus.
sígueme en facebook

Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Twitter

Hosting

Xitrus está alojado en:

Xitrus está alojado en Cyberneticos.

Vídeo y Audio con HTML5

Con esta documentación veras como incrustar vídeo y audio de forma fácil en tu pagina

Las etiquetas <video> y <audio> sirven para incrustar audio y vídeo, de la forma estandar de HTML5, pudiendo reproducirlo la mayoría de los navegadores actuales (incluso Internet Explorer 9).

Audio

Esta función se implementa con la etiqueta <audio> de HTML5 y se usa de forma bastante parecida a una imagen, simplemente estableciendo el atributo src ya tenemos nuestro reproductor de audio.

Como usarlo

Esta etiqueta tiene varios atributos, con los que podemos hacer visible los controles del audio, que se auto reproduzca o que entre en bucle.

  1. <audio src="audio/All.mp3" controls autoplay loop></audio>


Se puede especificar varios parámetros, pero los más básicos y útiles son los siguientes:
  • Controls: Al especificar este atributo aparecen los controles del audio, al no establecerlo es invisible.
  • Autoplay: Este atributo consigue que empiece el audio con la página.
  • Loop: Estableciendo este atributo hacemos que entre en un bucle continuo el audio.


  • Vídeo

    Esta etiqueta es menos estándar, ya que los distintos navegadores no implementan todos los codecs, existen 3 para esta etiqueta: el H.264, el Ogg Theora y el VP8 (WebM).
    Por suerte se puede introducir el video en distintos formatos para que el propio navegador elija el adecuado.
    Ejemplo de un video (De origen externo en varios formatos):



    Como usarlo

    Esta etiqueta incorpora los mismos atributos que la etiqueta <audio>, estableciendo la ruta del vídeo con el atributo src y pudiendo establecer si se autoinicia, se muestran los botones o entra en bucle.
    Además también se puede establecer el ancho y/o alto, siendo posible dejarlos en blanco y se auto ajustará el video libremente.

    1. <video src="video/h264.mov" width="1280px" height="720px" controls autoplay loop></video>


    En la etiqueta <video> podemos establecer varios atributos:
  • Controls: Al especificar este atributo aparecen los controles del audio, al no establecerlo es invisible.
  • Autoplay: Este atributo consigue que empiece el audio con la página.
  • Loop: Estableciendo este atributo hacemos que entre en un bucle continuo el audio.
  • Height: Con este atributo se establece el alto del vídeo.
  • Width: Con este atributo se establece el ancho del vídeo.


  • Usarlo de forma adecuada

    Dado que todos los navegadores no soportan todos los codecs de video se puede establecer varios videos en distintos formatos, usando el adecuado cada navegador.
    Para hacerlo de esta forma, primero tenemos que convertir el video en los distintos formatos que soportan los navegadores (existen herramientas que transforman el vídeo a los 3 formatos adecuados a la vez como easyhtml5video.com) y depuás establecer las distintas fuentes del video con los distintos formatos.


    1. <video width="1280px" controls>
    2. <source src="/utilidades/video.mov" /> <!-- Codec H.264 -->
    3. <source src="/utilidades/video.ogv" /> <!-- Codec Ogg Theora -->
    4. <source src="/utilidades/video.webm" /> <!-- Codec VP8 (WebM) -->
    5. </video>


    Procedimiento paso a paso para implementar vídeo

    Primero: convertir nuestro vídeo con un conversor (por ejemplo easyhtml5video.com).
    Segundo: copiamos los videos a la carpeta adecuada de nuestra página.
    Tercero: crear la etiqueta <video>, establecer sus atributos y poner su fuente con el atributo src o varias fuentes, añadiendo en el interior de la etiqueta otras etiquetas <source> como en el código de arriba.
    Cuarto: establecer la ruta de cada video en una etiqueta <source> distinta.


    Comentarios

    Sígueme

    R L E F G I

    Buscar

    Cargando

    Lo último del blog

    Twitter

    Hosting

    Xitrus está alojado en:

    Xitrus está alojado en Cyberneticos.
    Cerrar sesión
    Usuario: Contraseña: