banner
hace 4 años
749 Views

Vídeo en Html5

Autor:
banner

 
 
Hola amigos, siguiendo un poco con la nuevas funcionalidades de Html5, hoy os traigo una etiqueta que a revolucionado completamente Html ya que la etiqueta que os traigo es la etiqueta <video>.
 

Este elemento ha sido en los últimos años un verdadero quebradero de cabeza, ya que los antiguos estándares Html, así como los distintos navegadores no soportaban este elemento, o se creaban muchas dificultades a la hora de programarlo, con este elemento ya tenemos vídeo en Html5.

html5 video

Con Html5 esas complicaciones desaparecen, como veremos en el ejemplo de mas adelante, nos es que desaparezcan, sino que la simplicidad del código para insertar un vídeo es verdaderamente asombrosa.

 

Otro ejemplo mas de las grandes novedades que ha introducido este nuevo estándar de Html, como es Html5.Que aparte de introducir mejoras sustanciales, ha hecho un gran trabajo simplificando el código y creando valor semántico a las nuevas etiquetas, ya que solo con mirar la etiqueta sabemos el valor semántico de los contenidos.

 

Pasando al tema que nos concierne, empezaremos con la etiqueta <video>.

Ha día de hoy todavía tenemos ciertos problemas de compatibilidad entre navegadores, puesto que unos reproducen vídeos en formatos .mp4, otros .ogg y otros .webm

 

Los navegadores mas modernos(sus ultimas versiones), tales como: Internet Explorer, Chrome, Safari, Firefox; reproducen vídeos en formato .mp4

 

No obstante ese formato no es valido para navegadores como: Opera

Aquí os dejo mas información sobre los formatos de vídeo aceptados por los navegadores.

 

Web W3Schools 

Así que si queremos subir un vídeo a una web, y queremos que sea compatible con todos los navegadores tendremos que tener el vídeo mínimo en tres formatos:
.mp4, .ogg, .WebM

 

Existen diferentes webs Online que realizan ese proceso de modificar el formato a los vídeos, os las recomiendo ya que son bastante intuitivas y rápidas.

Yo os recomiendo esta web ya que engloba muchos tipos de conversiones, no solo de vídeo, también de audioimágenes, archivos video html5

 

Web Online Convert

 

Una vez explicado el tema de las compatibilidades nos vamos a adentra en ejercicio en si; vamos al código Html:

 

En el encontramos un contenedor <div> video, que agrupa en su interior un h2, que es utilizado para el titulo del vídeo, así como unas etiquetas <hr> separadoras y la etiqueta <video>.

 

Esta etiqueta <video> necesita unos parámetros para funcionar y para darle cierto diseño;

Dentro de la etiqueta <video> podemos dar dimensiones al vídeo, como se aprecia en el ejemplo, o poner una imagen como caratula, mediante póster, también aparece la función controls, para que aparezcan los botones del reproductor, así como la función preload que en este caso esta desactivada, pero serviría para hacer que se cargasen los vídeos junto con la web, es decir nada mas entrar, lo que implicaría que la web tardaría mucho en cargar ya que tiene que cargar estos vídeos también.

 


<video width="400px" height="300" controls preload="none" poster="sandy.jpg">
Medio
</video>

 

Una vez configurado el diseño del vídeo mediante la etiqueta <video>, procederemos a cargar el vídeo, para ello utilizaremos la etiqueta <source> que va dentro de <video>.

En esta etiqueta definiremos 2 parámetros; la ubicación del vídeo, y el tipo de formato que tiene el vídeo. Utilizaremos las funciones src y type.

 

Haciendo mención a lo anteriormente dicho sobre las compatibilidades, insertaremos la etiqueta <source> para cada uno de los formatos de vídeo.

 


<source src="sandy.mp4" type="video/mp4"/>
<source src="sandy.ogv" type="video/ogv"/>
<source src="sandy.webm" type="video/webm"/>



<div id="video">

<h2 class="titu_video">Video HTML 5</h5>


<hr>

 <video width="400px" height="300" controls preload="none" poster="sandy.jpg">
 <source src="sandy.mp4" type="video/mp4"/>
 <source src="sandy.ogv" type="video/ogv"/>
 <source src="sandy.webm" type="video/webm"/>
 </video>

<hr>

 
</div>


 

Con esto ya tendríamos el vídeo compatible para todos los navegadores modernos

 

Faltaría darle el diseño que mas nos guste mediante Css y listo, tenemos un vídeo insertado en nuestra web sin tener que subirlo a youtube, vimeo, etc… en nuestro propio servidor y sin ningún tipo de problemas de tiempo de carga, de peso, ni nada.

 

Cada vez tenemos mas herramientas que nos permiten diseñar proyectos mas profesionales

 

Cualquier duda o problema no dudes en preguntar

Sendoa

Sendoa

¡Aúpa! Me llamo Sendoa y soy un apasionado del Diseño y Desarrollo Web.

Fundador de WebSdcStudio.es; mi blog personal, donde expongo diferentes contenidos de ayuda, consejos, trucos, recursos... sobre el mundo del Diseño y Desarrollo Web.
Sendoa

Latest posts by Sendoa (see all)

Articulos Relacionados

Tags Artículos:
Artículos Categorías:
Desarrollo Web · Html5
banner

Deja un Comentario

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

Left Menu Icon
Web Sdc Studio
Right Menu Icon