Video HTML 5

Video HTML5 - Charkleons.com


El video para HTML5 es muy útil ya que con la etiqueta <video></video> se genera un reproductor al cual solo hay que agregarle el video (url del video) sin necesidad de agregar algún código a la plantilla.

Con el HTML5 se usan tres formatos de video:

Ogg= Codec de video Theora y Codec de Audio Vorbis
     » Firefox-Opera-Chrome 

MPEG 4= Codec de video H.264 y Codec de Audio AAC
        » IE-Chrome-Safari

WebM= Codec de video VP8 y Codec de Audio Vorbis
      » Firefox-Opera-Chrome
Para mostrar un video en HTML5 solo se necesita:
______________

<video src="URL del video.webm" controls></video>

______________

El atributo controls se encarga de agregar
el botón de Play, Pausa y volumen.

**********************************
Se puede insertar un mensaje entre <video> y </video> 
para que se muestre en los navegadores que no puedan 
reproducir el video.
_______________

<video src="URL del video.webm" controls>
Tu navegador no puede reproducir video en HTML5.
Por favor usa CHROME.</video>
_______________

*********************************
Con el atributo <source> podremos agregar varios formatos de 
video y el navegador solo usará el que pueda reproducir.
_______________

<video controls>
  <source src="URL del Video.mp4" type="video/mp4" />
  <source src="URL del Video.webm" type="video/webm" />
Tu navegador no puede reproducir video en HTML5.
Por favor usa CHROME.
</video>

_______________
*********************************
Otros atributos que se pueden usar:
_______________

autoplay  » Hace que el video comience automáticamente al abrir la página. 

loop  » Hace que el video se reproduzca continuamente.

poster="URL de tu imagen.jpg"   » Permite que se vea una imagen en el cuadro del video cuando éste no se está reproduciendo.

preload="auto"  » Permite que el video se cargue (sin reproducir) al momento de abrir la página. Muy útil en Chrome, en lo demás la carga se hace lenta.

width="320"   » Define el ancho del cuadro donde se reproducirá el video.

height="240"   » Define la altura del cuadro donde se reproducirá el video.
_______________
********************************
Ejemplo con algunos atributos:
_______________

<video controls autoplay poster="URL de tu imagen.jpg"
 preload="auto" width="320" height="240">
  <source src="URL del Video.mp4" type="video/mp4" />
  <source src="URL del Video.webm" type="video/webm" />
  <source src="URL del Video.ogg" type="video/ogg" />
Tu navegador no puede reproducir video en HTML5.
Por favor usa CHROME.
</video>

_______________

En las pruebas que realicé, el formato mp4 funciona en Chrome y Safari, y el formato .WebM funciona con Chrome, Opera y Mozilla. De tal forma que se pueden usar únicamente estos dos formatos, además, el .WebM pesa menos que el ogg.

********************************
Para usar este código en Blogger, solo debes agregar un 
gadget HTML Javascript en el Diseño de tu plantilla, y dentro
de este, colocar el código. O también lo puedes usar en una entrada colocando el código en el modo de HTML.

Para una página web, lo debes incluir dentro de las etiquetas:
_______________

<html>
<body>

<video src="URL del video.mp4" controls>
Tu navegador no puede reproducir video en HTML5.
Por favor usa CHROME.</video>

</body>
</html>
_______________

********************************
Programas Recomendados:





El Format Factory es solo para hacer un mp4 con un tamaño y medidas definidas por nosotros, luego hay que volver a hacer un mp4 con el MIRO Video Converter para que el video trabaje bien con los codecs de Apple, y se visualice bien en Safari.

El Miro Video Converter es para crear los videos .mp4 y .webm.

El VLC Mediaplayer es para crear los videos .ogg.

DRIVE (leer en el tema la parte del enlace público) es un disco duro virtual  donde podremos guardar nuestros videos en la nube, y obtener su dirección URL. Dropbox no está permitiendo crear enlaces públicos de forma gratuita en las cuentas nuevas.

Espero que esta información les sea de mucha utilidad.

Gracias.

Ejemplo video .WebM. El mp4 se demora mucho en cargar. 
Recomienden Chrome, Opera y Mozilla ;)




cómo agregar video html5 en blogger, html5 para blogger, tutorial html5 para blogger, qué video sirve para el html5, cómo consigo los videos para el html5, formatos que funcionan con el html5,