Fast HTML5: 16, Video
3001/12
La anterior entrega, datalist, en esta… hablaremos algo más sobre html5, y hoy toca: <video>.
Como sabéis, internet, además de crecer exponencialmente en contenido de vídeos, ha tenido un “representante” hasta la fecha… Sí, supongo que todos sabéis que Flash era (y en muchos casos aún sigue siendo) la mayor forma de reproducción de vídeos en internet.
Y digo “era”, porque html5 ha llegado para quitarle ese lugar a Flash.
Desde que html5 está presente en los navegadores modernos (y lo que le queda aún…) Flash ha perdido enteros en la lucha por reproductores de vídeo (y formatos de vídeo, evidentemente), ya que con html5 (si el navegador es moderno) no necesitas instalar nada más para poder visionar correctamente los vídeos, y con flash, debíais instalar su plugin de visionado.
Desde este blog, hace ya muchísimo tiempo (artículo posiblemente desfasado) se ha luchado en algunas ocasiones contra flash, ya que defendemos a ultranza todo lo libre y abierto, y flash, como sabéis… tiene poco de libre ;-) y ha sido gracias al tema del vídeo (y dispositivos móviles) que definitivamente ha recibido los golpes necesarios como para, como mínimo, knockeralo…
La descripción de video en la documentación:
A video element is used for playing videos or movies, and audio files with captions.
Content may be provided inside the video element. User agents should not show this content to the user; it is intended for older Web browsers which do not support video, so that legacy video plugins can be tried, or to show text to the users of these older browsers informing them of how to access the video contents.
Bueno, vamos a ello.
Como dice, es un elemento html5 para reproducir vídeos, y audios con capturas, con una serie de parámetros que el usuario no verá, pero que son útiles para los navegadores, tanto para el visionado como metadatos para búsquedas, etc…
Ejemplo completo (pertenece a esta página, pegadle un ojo también ;-)), y comentamos:
<body>
...
<video width="640" height="360" poster="poster.jpg" controls autoplay>
<!-- MP4 must be first for iPad! -->
<source src="video.mp4" type="video/mp4" /><!-- Safari / iOS, IE9 -->
<source src="video.webm" type="video/webm" /><!-- Chrome10+, Ffx4+, Opera10.6+ -->
<source src="video.ogv" type="video/ogg" /><!-- Firefox3.6+ / Opera 10.5+ -->
<object width="640" height="360" type="application/x-shockwave-flash" data="player.swf">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="video.swf" />
<param name="flashvars"
value="autostart=true&controlbar=over&image=poster.jpg&file=archivo.mp4" />
<!-- fallback image -->
<img src="poster.jpg" width="640" height="360" alt="alt" title="title" />
</object>
</video>
...
</body>
Parece complicado, ¿verdad?
Únicamente, lo que estamos haciendo es asegurándonos que en todos los navegadores actuales haya una solución de “lectura” (visionado, en este caso) que esté nativamente implantada en ellos, es decir, que no tengan que instalar nada para poder verlo correctamente… y en el caso de que el navegador sea antiguo o no pueda reproducirlo, se le da la opción del visionado con flash (si no lo tiene tampoco, entonces sí tendrá que instalarlo, como hasta ahora…).
Como veis, hay algunos detalles interesantes, como “autoplay” y “controls”, que son bastante evidentes, también hay otros interesantes, que no están puestos como “autobuffer”.
El atributo “poster”, muestra una imagen al empezar, hasta que no se le da al “play” (como veis también está dentro de <object>, como tag <img>).
En la página “Video For Everybody” Test Page, os informa muy bien sobre los diferentes navegadores y versiones, y sobre los formatos, os recomiendo que os paséis por ella, e investiguéis bien el código fuente y sus instrucciones, porque es verdaderamente útil.