HTML5 Video

Posteado el 09. Oct, 2012 por tuto in HTML y CSS, HTML5

Hasta ahora, no hay un estándar para mostrar un vídeo / película en una página web.

Hoy en día, la mayoría de los vídeos se muestra a través de un plug-in (como Flash). Sin embargo, los diferentes navegadores pueden tener diferentes plug-ins.

HTML5 define un nuevo elemento que especifica un método estándar para incrustar un vídeo / película en una página web: el elemento <video>.

Para mostrar un vídeo en HTML5, esto es todo lo que necesita:

Code block

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

El atributo de control añade controles de vídeo, como reproducción, pausa y volumen.

Por tanto, es una buena idea incluir siempre los atributos de anchura y altura. Si la altura y la anchura se establece, el espacio requerido para el vídeo está reservada cuando la página está cargada. Sin embargo, sin estos atributos, el navegador no sabe el tamaño del vídeo, y no puede reservar el espacio adecuado para ello. El efecto será que el diseño de la página cambiará durante la carga (mientras se carga el vídeo).

Usted debe por lo tanto insertar texto entre las etiquetas <video> y </ script> para los navegadores que soportan el elemento <video>.

Formatos de vídeo

Actualmente, hay 3 formatos de vídeo con soporte para el elemento <video>: MP4, WebM y Ogg.

MP4 = MPEG 4 archivos con códec de vídeo H.264 y audio AAC codec
WebM WebM = archivos con códec de vídeo VP8 y el audio codec Vorbis
Ogg = Ogg Theora archivos con códec de vídeo y audio codec Vorbis

HTML5 <video> - Métodos y propiedades DOM

HTML5 tiene métodos DOM, propiedades y eventos para la <video> y elementos <audio>.

Estos métodos, propiedades y eventos le permiten manipular y <video> elementos <audio> utilizando JavaScript.

Hay métodos para reproducir, una pausay la carga, por ejemplo, y hay propiedades (como la duración y el volumen). Hay eventos DOM para que se le notifique cuando el elemento <video> comienza a reproducir, está en pausa, se acabó, etc

El ejemplo a continuación ilustran, de una manera sencilla, la forma de abordar un elemento <video>.

Code block

<!DOCTYPE html> 
<html> 
<body> 
 
<div style="text-align:center"> 
  <button onclick="playPause()">Play/Pausa</button> 
  <button onclick="makeBig()">Grande</button>
  <button onclick="makeSmall()">Pequeño</button>
  <button onclick="makeNormal()">Normal</button>
  <br> 
  <video id="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4"><source src="mov_bbb.ogg" type="video/ogg">Tu navegador no soporta video HTML5.
  </video>
</div> 
 
<script> 
var myVideo=document.getElementById("video1"); 
 
function playPause()
{ 
if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 
} 
 
function makeBig()
{ 
myVideo.width=560; 
} 
 
function makeSmall()
{ 
myVideo.width=320; 
} 
 
function makeNormal()
{ 
myVideo.width=420; 
} 
</script> 
 
<p>Coloca el nombre del video.</p>
</body> 
</html>

Así se verá nuestro código del video una vez terminado.

Video HTML5

Articulos relacionados:

Tags: css3, html5

Una respuesta para “HTML5 Video”

Bitacoras.com

09. Oct, 2012

Información Bitacoras.com…

Valora en Bitacoras.com: Hasta ahora, no hay un estándar para mostrar un vídeo / película en una página web. Hoy en día, la mayoría de los vídeos se muestra a través de un plug-in (como Flash). Sin embargo, los diferentes navegadores pueden t……

Tutoriales en la Web

HTML5 Video

Formatos de vídeo

HTML5 <video> - Métodos y propiedades DOM

Articulos relacionados:

Una respuesta para “HTML5 Video”

Deja tu Comentario

Categorias

Acerca de