<video>
<video> es una etiqueta que sirve para añadir videos :) Era obvio, ¿no? Vamos a ver de que va la cosa...
La etiqueta <video> es una etiqueta que bien dio mucho que hablar (y sigue) debido al dilema que tenían muchas empresas sobre el uso de los codec de video en diferentes navegadores. Por ahora los principales formatos son MP4 y Webm, los cuales se pueden reproducir en casi todos los navegadores, Safari en Windows no es capaz de reproducir ninguno de los dos :S
Empezaremos por lo básico añadiendo solo un formato de video:
<video width="640" height="360" src="video/video.mp4" autoplay controls preload></video>
Voy a ir explicandolo poco a poco lo que aquí vemos:
-Iniciamos la etiqueta video, la cual se cierra, vereis después por qué.
-Indicamos las dimensiones del reproductor de video.
-Mediante src="" ponemos la ruta del video.
-Autoplay sirve para que el video se inicie al instante que se cargue la página.
-Controls sirve para que aparezcan los controles, como los de Youtube.
-Preload sirve para que se cargue una parte antes de darle a play, para así evitar los parones mientras se ve el video.
Pero claaaaro, ahora tenemos el problema de que en algún navegador no se viera solo con mp4, sino que necesitara mp4, entonces lo haríamos de la siguiente manera:
Puede darse el hipotético caso en el que el navegador no soporte MP4, pero esto es poco común ya que en las ultimas versiones de los principales navegadores, Chrome, Firefox, Internet Explorer y Opera funciona perfectamente solo con MP4 (Safari en Windows no funciona ni con varios formatos)
<video width="640" height="360" autoplay controls preload>
<source src="video/video.mp4" type="video/mp4">
<source src="video/video.webm" type="video/webm">
<source src="video/video.ogg" type="video/ogg">
</video>
Pero claaaaro, ahora tenemos el problema de que en algún navegador no se viera solo con mp4, sino que necesitara mp4, entonces lo haríamos de la siguiente manera:
Vamos a ir viendo poco a poco como funciona lo que acabo de escribir:
-Iniciamos la etiqueta video, la cual se cierra, ya sabeis por qué ;)
-Indicamos las dimensiones del reproductor de video.
-Ponemos las propiedades que tendrá el video, que se reproduzca automaticamente, etc.
-Entre <video> y </video> ponemos la magia que hará funcionar la etiqueta video.
-Mediante la etiqueta source con los parametros src (para indicar donde se encuentra el archivo) y type (para indicar el tipo de formato) se utilizan para agregar cada formato de un mismo video.
-En este caso por ejemplo podeis ver que he añadido tres formatos, mp4, webm y ogg, y al final he cerrado la etiqueta video.
Pero que fácil ;)
Sigamos con más etiquetas avanzadas de HTML5!