<video>
que nos permite incrustar un vídeo en nuestra web sin tener que depender de recursos externos.
La cosa es bien sencilla, en base a nuestra etiqueta vamos añadiendo distintas opciones dependiendo de lo que nosotros necesitemos. Lo más básico sería algo así:
1 2 3 4 5 6 7 |
<video id="medio" width="720" height="400" controls> <source src="http://codictados.com/wp-content/uploads/2014/11/trailer.mp4"> <source src="http://codictados.com/wp-content/uploads/2014/11/trailer.ogv"> Tu navegador no soporta este tipo de reproductor </video> |
src
estamos asignando dos tipos de archivos a nuestro vídeo (esto es recomendable para evitar incompatibilidades entre navegadores, en caso de error mostrará el mensaje “Tu navegador no soporta este tipo de videos”). Con controls
establecemos los típicos botones de play, pause, volumen…y por ultimo asignamos unos valores de alto height="400"
y ancho width="720"
.
Atributos
Seguramente esta pequeña configuración de la etiqueta
<video>
te haya sabido a poco pero tranquio, que hay más:
– autoplay inicia el vídeo al cargar la pagina.
– loog crea un loop infinito de modo que una vez finalice, el vídeo vuelve a comenzar.
– poster establece una imagen como previsualización del vídeo, que es reemplazada por el multimedia una vez lo inicies.
– preload admite tres tipos de parámetros none
, metadata
o auto
. El primero indica que el vídeo no debería de ser cacheado, de esta forma ahorramos tráfico innecesario. El segundo valor, indica al navegador que solo deberá de tratar información acerca de la fuente (dimensiones, duración, extensión…). El tercer valor, el utilizado por defecto por el navegador indica que el vídeo será cargado lo antes posible.
– muted mutea por defecto el video.
Toques finales
Una vez hayamos configurado nuestro vídeo añadiendole las opciones que más nos convengan podríamos tener un codigo tal que así (el resultado es el expuesto al inicio del artículo):
1 2 3 4 5 6 7 |
<video id="medio" poster="http://codictados.com/wp-content/uploads/2014/11/logotipo.png" preload loop controls width="720" height="400"> <source src="http://codictados.com/wp-content/uploads/2014/11/trailer.mp4" /> <source src="http://codictados.com/wp-content/uploads/2014/11/trailer.ogv" /> Tu navegador no soporta este tipo de reproductor </video> |
<video>
por la etiqueta <audio>
, editar los enlaces para poner una extensión de audio y establecer un ancho y un alto que se ajuste bien. Modificando el código anterior obtendríamos este resultado:
1 2 3 4 5 6 7 |
<audio id="audio" preload loop controls width="100%"> <source src="http://codictados.com/wp-content/uploads/2014/11/Carefree.mp3" /> <source src="http://codictados.com/wp-content/uploads/2014/11/Carefree.ogg" /> Tu navegador no soporta este tipo de reproductor </audio> |
poster
ya no es necesario e incluso podríamos prescindir también del height
ya que el alto será el acorde a los controles.
Como veis es algo muy sencillo, bien es cierto que limita mucho la personalización y que dependes del diseño de cada navegador pero, en los siguientes tutoriales abordaremos este tema para que podáis personalizar vuestro vídeo añadiéndole CSS y Javascript.