Blanes Costa Brava. Abril del 2009 Sa Palomera

Video en HTML5
Nuevos estandares Web y video en Web Pages.
Insertar (Incrustar) videos en una pagina Web con HTML5.



 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

Juegos Gratuitos.

Tu pagina de inicio P.Inicio  En tus favoritos Favoritos   Recomiendanos a tus amigos   Que dia es
 

Video en HTML5Video en HTML5. Los tiempos cambian y los métodos también, para aquellos que quieren mostrar sus contenidos propios en sus Websites (Paginas) como videos se esta llegando a una nueva forma de ver e interpretar los mismos dentro del código puro y duro de nuestras Webs. Un nuevo estándar y parámetros para hacer los sitios mas accesibles y que puedan ser vistos e interpretados para cualquier navegador, como es el caso de la inserción de video en paginas Web. Llega el HTML5, este nuevo estándar no necesita de plugins adicionales, ni otros elementos para mostrar y reproducir contenido en nuestra Web, si no que se dan las ordenes para que los propios exploradores (Explorer, Chrome, Firefox,,,) sean los encargados de interpretar y decidir como mostrarlos según la versión que se tenga del mismo. Quizás algo temprano todavía para su implementación total en la Web ya que la gran mayoría de usuarios del PC no se encuentran totalmente actualizados para soportar esta nueva forma de interpretar las cosas, navegadores antiguos, obsoletos, versiones anticuadas,,,, Por todo esto aun así utilizando las nuevas formas, nos vemos obligados también a recurrir a formatos antiguos y echar mano del flash como alternativa para los usuarios que no se encuentran a la orden del día, llenando de mas código las paginas y sitios para no perder espectadores por llamarlo de alguna forma y satisfacer a todos.

Métodos para la inserción de video en html5. Fácil, sencillo y claro.
Nuevas etiquetas en nuestro código, quizás no tan nuevas, simplemente mas claras y entendibles: video, controls, width, height, poster,,, te suenan? Vamos a verlo con mas detalle, la etiqueta video le dice al navegador que el contenido aquí expuesto es precisamente eso un video, controls, que muestre los controles del video, play, pausa, volume,,, (Por defecto como ya comente anteriormente, nuestro navegador tiene que reconocer esto y mostrara un reproductor estándar para reproducir el video, sea cual sea nuestro navegador, siempre y cuando lo tengamos actualizado) Poster, mostrara una imagen fija como fondo del reproductor. Podemos utilizar muchas mas etiquetas como Autoplay, loop, preload,,,,. Pero vamos a centrarnos en lo mas básico.
Ejemplo sencillo:

<video src="tuvideo.mp4" controls width="360" height="240" poster="imagen.jpg"></video>

Multiformato. Que todos puedan verlo.
Como comentaba anteriormente no todo el mundo tiene su PC a la ultima así que vamos a utilizar otros formatos de video para en caso de no reconocer alguno su navegador, pues reproduzca otro. (mp4, Webm, Ogv) Este sea quizás el inconveniente mas pesado y engorroso de este estándar, el tener que utilizar no solo un video sino 3, el mismo video pero en formatos de archivo diferentes, para no dejar de lado a nadie según que exploradores utilice y que tu video pueda ser visto por cualquiera.
Ventajas y desventajas pero soportado por todos incluidos móviles. Navegadores Web, video html5

El código quedaría así:

<video controls width="360" height="240" poster="imagen.jpg">
<source src="tuvideo.ogv" type="video/ogg" />
<source src="tuvideo.mp4" type="video/mp4" />
<source src="tuvideo.webm" type="video/webm" />

</video>

Como podéis ver hemos insertado el mismo video en 3 formatos diferentes, de esta forma nos aseguramos que si el explorador (navegador Web) no es capaz de representarlo de una forma lo mostrara de otra. No seria necesario utilizar la etiqueta type, pero se recomienda.

Convertidor de videos gratuito. Miro Converter. (Código Libre).

¿Y para los que tienen navegadores obsoletos, pasados de moda como Explorer 8, etc,,, ?

Tenemos 2 opciones disponibles, tirar de flash (Añadiendo un Flash Player, Por lo que será necesario introducir el plugin de flash) o forzar, informar del archivo que no es compatible con su versión de navegador y mostrarle un link (Enlace) para su descarga.

Aclaremos como hacer para abrir tu reproductor en Flash. Como vimos en Como insertar videos flv en tu Web. Tenemos que hacer la llamada al propio Player Flash y a su archivo JavaScript que tendremos que tener alojado en nuestro servidor si no utilizamos los recursos de terceros.
Utilizando el player de JW FLV Mediaplayer (Necesitaremos el Reproductor y el JavaScript)
Entre <head> y </head>: La llamada al reproductor Flash

 <script type="text/javascript" src="swfobject.js"></script>

mediaplayer.swf que es el reproductor Flash en el código del video a reproducir en caso de que fallen los otros.
Código:

<video controls width="360" height="240" poster="imagen.jpg">
<source src="tuvideo.ogv" type="video/ogg" />
<source src="tuvideo.mp4" type="video/mp4" />
<source src="tuvideo.webm" type="video/webm" />

<object type="application/x-shockwave-flash" width="360" height="240" data="
mediaplayer.swf?file=tuvideo.mp4">
<param name="movie" value="mediaplayer.swf
?file=tuvideo.mp4" />  Insertando nuestro Player Flash
<a href="tuvideo.mp4">Su navegador no soporta html5 Descarga el video</a> Enlace para descarga
</object>
</video>

Bueno pues aquí os dejo un video que prepare para un tutorial de como realizar un video con imágenes. Stop Motion.
(Time Lapse).

Ejemplo video HTML5.

 

 

 

Resides en Blanes y tienes un negocio , empresa , tienda ,,,, ?  , quieres estar aqui ?  carpeta directorio web 

 Recomendamos una resolucion de 1024x768
Tener Java habilitado e instalados los plugins de Macromedia Flash .
Si algun contenido aqui expuesto gozara de derechos personales , de autor etc , etc ruego me lo indiquen
para poder tomar las medidas oportunas y modificarlo .

  Creative Commons License
Aquesta obra està subjecta a una Llicència de Creative Commons.

©www.publiblanes.net  2004-2012