HTML5 Etiqueta de vídeo I

html5-logo-pequeno  Aprendiendo HTML5     html5-logo-pequeno

Bueno amigos, siguiendo con el desarrollo de este curso, en esta ocasión vamos a trabajar con la etiqueta de vídeo en html5, la implementación de esta etiqueta es sencilla así como la etiqueta de audio que vimos en el post anterior.

Inicialmente vamos a crear un nuevo archivo desde netbeans como lo hemos venido haciendo en post anteriores, cabe resaltar que ese archivo puede ser de tipo html o de tipo php, en mi caso lo he venido trabajando con extensión .php, pero las dos formas son validas, puesto que aun no se ha trabajado con fragmentos de código php.

Luego de haber creado el nuevo archivo, deben tener algo similar al siguiente.

video html5

Listo, ahora vamos a escribir el fragmento de código que permite insertar nuestro reproductor de vídeo como se muestra a continuación:

1
<video width="510px" height="330px" controls="controls" preload="preload"><source src="../video/potencias.webm" type="video/webm"/>Su navegador no soporta video en Html5</video>

Bien, ahora veamos que significa cada cosa   🙂

controls: Permite implementar los controles del reproductor por defecto como botón play-pause, volumen

src: Indica la ruta donde se encuentra el archivo  que queremos reproducir.

preload: Permite que el archivo multimedia cargue en el buffer de forma automática.

type: Define el formato del contenido a reproducir, en este caso  es de tipo .webm.

Los atributos width (ancho) y height (alto), permiten definir el tamaño que deseamos que tenga nuestro reproductor, estos valores los definimos en pixeles y establecemos el valor que mas nos convenga.

Si observamos nuestro proyecto, desde el navegador se nos mostrará lo siguiente.

Video en html5

Ahora bien, si deseamos que nuestro contenido multimedia se reproduzca de forma automática una vez el buffer este listo, lo hacemos agregando la propiedad autoplay, tal cual como se hizo con la etiqueta de audio.  Existe también una propiedad llamada loop la cual permite repetir la reproducción una vez ésta haya finalizado.

Si este post fue de ayuda para ti, no olvides dejar un comentario, también puedes contar tu experiencia o lo que estés haciendo. Nos ayuda a seguir creciendo. ¡Vamos!, solo te llevará 1 minuto.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *