¿Necesitas Maquetar o Diseñar una web? ... Consulta nuestra sección Maquetación Freelance o solicita presupuesto a elmaquetadorweb@gmail.com

11.10.18

Etiqueta Vídeo HTML5 Responsive y cómo poner un vídeo de fondo a pantalla completa - ACTUALIZADO

Desde que se publicó esta noticia ha habido cambios importantes con respecto al parámetro autoplay que os pasamos a detallar.

NOTA: Actualmente Google Chrome no reproduce vídeos en autoplay a no se que se active la opción muted en la etiqueta <video>. Se recomienda ponerlo antes del atributo autoplay.

NOTA: Actualmente los navegadores móviles no permiten la opción autoplay para evitar el uso innecesario de datos.

Para insertar vídeo en HTML5 vamos a usar la etiqueta <video>, que es válida para todos los navegadores execepto IE8 y Opera mini.

Para que se vea correctamente vamos a necesitar de los siguientes formatos de vídeo.

.mp4 > para navegadores Internet Explorer, Chrome y Safari.
.WebM > para Firefox.
.ogv > para Opera.

Para convertir nuestro archivo de vídeo a estos formatos vamos a utilizar:

HandBrake para convertir vídeos a .mp4.

A continuación explicaremos como tenemos que codificar el vídeo para su correcto funcionamiento en la web.

Lo primero que hacemos es configurar la resolución del vídeo en la pestaña Picture.


Pestaña Picture:



Height > 720 (no se necesita más resolución para un vídeo destinado a la web).


Pestaña Vídeo:



Container > MP4
Video Codec > H.264 (X264)
Avg Bitrate > 2900 (ponemos Variable Framerate ya que es mejor para la web).
2 Pass Encoding (para una mejor codificación).
H.264 Profile > High


Pestaña Audio:


Codec > AAC
Bitrate > 64
Mixdown > Mono


Miro Video Converter para convertir vídeos a .WebM y .OGV. Este programa no permite mucha configuración, a si que simplemente cargamos el vídeo que hemos pasado a MP4  y en el botón Format, lo pasamos a .WebM y OGV.

Una vez tenemos los vídeos pasamos a usar la etiqueta HTML5 <video> de la siguiente manera:

<video controls muted autoplay preload="auto" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
    Tu navegador no soporta HTML5 Video
</video>

Los párametros que soporta <video> son:
- Controls > Añade una barra con controles (es diferente por cada navegador).
- Muted > Para quitar el audio al vídeo. Si queremos que se reproduzca  un vídeo en autoplay  en Chrome, tenemos que activar esta opción.
- Autoplay > Para que el vídeo empiece sin necesidad de darle al play.
Loop > Para que se vuelva a reproducir cuando se acabe el vídeo.
- Preload > Puede tomar los valores auto (carga el vídeo cuando carga la web), none (viene bién cuando tenemos una videogalería) y metadata (carga sólamente los metadatas)
- Poster > Para añadir una imagen personalizada al inicio del vídeo.
- Width - Height > Para especificar el ancho y el alto del vídeo.



Para hacerlo compatible con la mayoría de los navegadores usamos la etiqueta <source> con el parámetro de type.

Para hacer el vídeo responsive podemos utilizar Fitvids.js o bien aplicar las soluciones que nos proponen CSS-Tricks en su artículo Fluid Width Video.

Nosotros hemos utilizado esta solución que contiene un vídeo que proviene de Youtube con muy buenos resultados.

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Para poner un vídeo a pantalla completa  de fondo de nuestra web hay que utilizar el siguiente código CSS:

video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

Os hemos dejado un ejemplo en nuestro codepen.

See the Pen Vídeo de fondo a pantalla completa by Pedro Marín (@pedromarin) on CodePen.
https://codepen.io/dudleystorey/pen/PZyMrd


Por último para poner un vídeo de YouTube a pantalla completa podemos utilizar esta solución de Dudley Storey https://codepen.io/dudleystorey/pen/PZyMrd


15 comentarios:

  1. Hola! y este vídeo se puede ver desde el móvil?
    He subido un vídeo a mi web y se ve perfectamente en ordenador pero desde el móvil nada. Existe algún formato? Gracias
    Saludos

    ResponderEliminar
  2. Hola Mariela, este método te garantiza que se vea en dispositivo móviles, siempre que conviertas el vídeo a los formatos .mp4 .WebM .ogv.

    Como puedes ver en CanIUse http://caniuse.com/#feat=video la etiqueta VIDEO la soportan los navegadores para móvil.

    ResponderEliminar
  3. Muy bien explicado. Estoy comenzando con html5, css etc. y me gustaría saber si el vídeo debe estar guardado en una carpeta del proyecto o es para enlazar a un vídeo externo, porque por ahora todo los enlaces que he visto para poner en una web un vídeo externo son mediante un iframe. Supongo que la etiqueta es sólo para vídeos que tenemos guardados. Muchas gracias

    ResponderEliminar
  4. Es para un vídeo que tengamos alojado, no para un vídeo que esté por ejemplo en Youtube.

    ResponderEliminar
  5. Y si quiero colocar un video que tengo en mi local, que tendría que hacer ?

    ResponderEliminar
  6. Simplemente añade la dirección local en la etiqueta source.

    ResponderEliminar
  7. http://www.johnnyweb.pe/films/

    Me puedes ayudar no se reproduce el video en el celular , tu ayuda por fa

    ResponderEliminar
    Respuestas
    1. Hola Johnny, como resolviste tu problema? vi tu pagina y esta muy bien hecha...

      Eliminar
    2. Actualmente en navegadores móviles, no se permite reproducir vídeos en autoplay

      Eliminar
  8. Hola Johnny a ver si este par de post te pueden ayudar:

    http://blog.zencoder.com/2013/09/13/what-formats-do-i-need-for-html5-video/

    http://stackoverflow.com/questions/22016320/html5-video-background-in-android-showing-black

    He probado tu web desde mi dispositivo android y desde el navegador nativo se veía, pero desde chrome se quedaba en negro, por si te sirve de ayuda.

    ResponderEliminar
  9. Hola... el problema que tengo es que con "cover" el video no se ajusta a distintas resoluciones.... puede ser? cuando lo abro en un movil se ver cortado... solucion?

    ResponderEliminar
    Respuestas
    1. Hola Lau, al utilizar la propiedad background-size: cover;
      no mantiene la relación-aspecto del vídeo.

      Esa técnica se suele utilizar para poner vídeos decorativos en los que el contenido no sea importante.

      Si lo que quieres es hacer el vídeo responsive y que guarde la relación-aspecto usa esta técnica.

      https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php


      Eliminar
  10. Buenas tardes, como podría utilizar el servidor de vídeo para no utilizar el mismo en mi código.
    Gracias.

    ResponderEliminar
    Respuestas
    1. Hola Martín, en este codepen https://codepen.io/dudleystorey/pen/PZyMrd tienes la solución de como poner un vídeo embebido de Youtube a pantalla completa.

      Eliminar