En este articulo veremos como insertar un video y los componentes a tener en cuenta.
Es necesario tener conocimientos básicos en HTML
Video
Insertar videos es importante para una pagina web, para mostrar con mas detalle y con mayor facilidad para los usuarios. Lo que haremos sera lo siguiente.
1. Archivo
Idealmente, descargaremos el video, ya que al usarlo por url, puede saltar advertencias MIME, y hacer que el video no se pueda ver.
2. Código HTML
Para usar el video podemos hacer:
usar directamente la etiqueta 'video' con la propiedad src, o:
usar la etiqueta 'source', este forma somos mas específicos al etiquetar los recursos y su tipo, ademas podemos agregar opciones, ejemplo:
Estas opciones, harán que al momento de mostrar nuestra web, si el navegador u otro motivo no permite cargar un tipo de formato, tendremos opciones para que el video se muestre pase lo que pase.
3. Atributos etiqueta HTML
Ahora tendremos que personalizar para lograr un buen diseño. Para ello tenemos en la etiqueta 'video':
- src: como ya vimos, es donde esta la ubicación del archivo, pero eso si, lo mejor es usarlo en 'source'.
- controls: es para activar los botones de pausa, volumen, etc.
- width y heigth: definir el tamaño del video.
- autoplay: esta opción es para que el video empiece automáticamente. Pero eso si, no es recomendable, ademas de que algunos navegadores lo bloquean.
- loop: permite que, al momento de terminar el video, vuelva a empezar.
- poster: esta propiedad, nos permite definir la "miniatura" o la imagen antes de iniciar el video.
- preload: nos ayuda a especificar el precargado, tenemos:
- none: no se precarga nada.
- metadata: se precarga la información mas básica.
- auto: se precarga todo, es la opción por default.
- muted: si deseamos, el video no tendrá sonido por default.
Un ejemplo:
4. Mensaje
Algo para las facilidades de usuario es dar a entender si un video no se puede ver, para ello solo agregamos una etiqueta que de a conocer esta advertencia.