<object width="425" height="344">
<param name="movie" value="https://www.youtube.com/watch?v=qVuZyRmp7Qk" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed src="https://www.youtube.com/watch?v=qVuZyRmp7Qk" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344">
</embed>
</object>Vídeo en HTML5 126j24
Incluir un vídeo en una página web con HTML5 es tan sencillo como:
<video src=tutorialesenlinea.ogv></video> Se puede complicar un poco más para dar soporte a los navegadores que no soportan esta etiqueta, ya que todo lo que se incluya entre la etiqueta de inicio <video> y la etiqueta de fin </video> se mostrará en aquellos navegadores que no soporten esta etiqueta: 6l2d27
<video src=tutorialesenlinea.ogv> <p> Tu navegador no puede visualizar este vídeo. Descarga el vídeo <a href=tutorialesenlinea.ogv>How to leverage a synergy video</a> y reprodúcelo directamente en tu ordenador. </p> </video>
Algunos ejemplos reales de uso (los sitios web de distribución de vídeos más populares ofrecen reproductores de vídeo basados en HTML5):
- YouTube
- Vimeo
- Dailymotion
Atributos de la etiqueta <video> pmk
autoplay: Especifica si el vídeo comenzará a ejecutarse tan pronto como esté listo. controls: Especifica si los controles (inicio/paro) se deben mostrar. height: Especifica la altura del reproductor de vídeo. loop: Especifica si el vídeo debe comenzar de nuevo una vez haya terminado. muted: Especifica si el audio del vídeo debe estar apagado. poster: Especifica una imagen para ser mostrada mientras el vídeo se carga y hasta que el pulse el botón de inicio. preload: Especifica cómo se debe cargar el vídeo cuando se cargue la página. src: Especifica la URL del origen del vídeo. width: Especifica la anchura del reproductor de vídeo.
El problema de los códecs 6ux22
Desgraciadamente, aunque la etiqueta <video> es muy fácil de usar, en la actualidad existe un problema muy importante en su empleo: existe una guerra de códecs (Ogg Theora, H.264/MPEG-4, VP8/WebM), ya que el soporte de los codecs más populares en los navegadores actuales no es uniforme.
En la página HTML5 Video de la Wikipedia se proporciona una tabla de compatibilidad de los códecs y los navegadores actuales:
El siguiente fragmento de código muestra cómo se puede emplear la etiqueta <source> para incluir un mismo vídeo con diferentes formatos (códecs) para lograr la máxima compatibilidad con diferentes navegadores:
<video controls>
<source src="tutorialesenlinea.ogv" type=’video/ogg; codecs="theora, vorbis"'>
<source src="tutorialesenlinea.mp4" type=’video/mp4; codecs="avc1.42E01E, mp4a.40">
<p>
Tu navegador no puede visualizar este vídeo.
Descarga el vídeo <a href=tutorialesenlinea.ogv>How to leverage a synergy video</a> y reprodúcelo directamente en tu ordenador.
</p>
</video> Compatibilidad con navegadores antiguos 3y4j21
Para lograr la compatibilidad con navegadores antiguos que no soporten la nueva etiqueta <video> se puede incluir un reproductor de vídeo tradicional con las etiquetas <object> y <embed>:
<video controls>
<source src="tutorialesenlinea.ogv" type=’video/ogg; codecs="theora, vorbis"’>
<source src="tutorialesenlinea.mp4" type=’video/mp4; codecs="avc1.42E01E, mp4a.40.2"’>
<embed src="https://www.youtube.com/watch?v=qVuZyRmp7Qk" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344">
</video>Audio r6v1k
La nueva etiqueta <audio> que permite reproducir un fichero de audio presenta los mismos problemas que la etiqueta<video>:
<audio controls>
<source src="tutorialesenlinea.ogg" type="audio/ogg" />
<source src="tutorialesenlinea.mp3" type="audio/mpeg" />
</audio>Atributos de la etiqueta <video> pmk
autoplay: Especifica si el audio comenzará a ejecutarse tan pronto como esté listo.
controls: Especifica si los controles (inicio/paro) se deben mostrar.
loop: Especifica si el audio debe comenzar de nuevo una vez haya terminado.
preload: Especifica cómo se debe cargar el audio cuando se cargue la página.
src: Especifica la URL del origen del audio.