ingenieradesistemas
499751083497328
Cargando...

Insertar video en HTML5



Con HTML5 es posible insertar contenido multimedia sin necesidad de recurrir a plugins externos como se lo realizaba antes. Por lo que nuestros contenidos serán mejor enriquecidos y en lo visual tendrá un aspecto diferente si colocamos videos con tan solo el uso de una etiqueta: "video" y manejando sus respectivas propiedades.

Insertar video en HTML5

El código a usar queda así:
<!DOCTYPE html>
<html>
      <head></head>
      <body>
       <video controls="controls" width="550" height="350">
       <source src="videos/archivo.ogg" type="video/ogg">
       <source src="videos/archivo.mp4" type="video/mp4">
       <source src="videos/archivo.webm" type="video/webm">
        Es increible que este navegador no soporte HTML5
       </video>
      </body>
</html>

Dentro de la etiqueta video podemos manipular los siguientes atributos.-

controls: para hacer visible los controles de reproducción del video.
width y height: manejamos el ancho y alto del video, se puede expresar en pixeles o porcentaje.

Además observamos las etiquetas "source".-

src: la localización en donde se encuentra el archivo de video para su posterior reproducción en linea.

Notarán que también un mismo video es invocado en sus diferentes formatos tanto .ogg, .mp4 y .webm debido a que es posible que algún navegador no sea capaz de leer alguno de ellos, aunque actualmente esto no debería suceder.

El resultado en pantalla es el siguiente:

Ejemplo insertar video en HTML5



HTML5 y CSS3 8442084564156313731

Publicar un comentario Default Comments

emo-but-icon

Página principal item

Los apuntes en tu correo

Síguenos en Facebook

Apuntes aleatorios