Es un reproductor de videos HTML5.
Este proyecto se llama Video.js y es de código abierto (Open Source), lo que nos dice que puede ser desarrollado y distribuido libremente.
Video.js esta construido en HTML / CSS; corrige las inconsistencias entre navegadores, incorpora pantalla completa y subtítulos, gestiona el retorno a Flash u otras tecnologías de reproducción de vídeo cuando el HTML5 no es compatible, y también proporciona una consistente API de JavaScript para interactuar con el vídeo.
El HTML5 mejora el rendimiento del vídeo al no requerir una segunda aplicación (un plugin) que se ejecute y se abra la puerta a la creación de interacciones entre el vídeo y otros elementos de la página que no ha sido posible antes.
Este es el reproductor que instalaremos en nuestro blog
Vamos a instalar este funcional reproductor en nuestro blog.
El anterior código es el que debes poner en cada entrada que quieras agregar un vídeo, pero ten en cuenta algunas caracteristicas de este codigo:
Por ultimo lo que esta en rojo es el link del vídeo, que debe estar en MP4 preferiblemente.
Ademas, si quiere que la reproduccion comience automáticamente, agrega después de <video, autoplay
Con esto ya tendrás un reproductor de vídeos en tu sitio web. Se pueden agregar otras características si tu lo deseas. Por ejemplo subtitulos, agregar varios vídeos, o personalizar el tema mediante CSS; en fin ve a Video.js y obtén información adicional en cuanto a este reproductor.
Para hacer las cosas mas fáciles Video.js tiene una herramienta donde podrás sencillamente construir tu reproductor de videos: Video.js Builder
Cualquier inquietud comentala
Este proyecto se llama Video.js y es de código abierto (Open Source), lo que nos dice que puede ser desarrollado y distribuido libremente.
Video.js esta construido en HTML / CSS; corrige las inconsistencias entre navegadores, incorpora pantalla completa y subtítulos, gestiona el retorno a Flash u otras tecnologías de reproducción de vídeo cuando el HTML5 no es compatible, y también proporciona una consistente API de JavaScript para interactuar con el vídeo.
El HTML5 mejora el rendimiento del vídeo al no requerir una segunda aplicación (un plugin) que se ejecute y se abra la puerta a la creación de interacciones entre el vídeo y otros elementos de la página que no ha sido posible antes.
Este es el reproductor que instalaremos en nuestro blog
Vamos a instalar este funcional reproductor en nuestro blog.
1. Agregar el JavasScript y CSS en la plantilla
Lo primero que haremos será ir a Plantilla - Editar HTML, presiona F3, busca </head> y justo antes pega el siguiente código:<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"></link> <script src="http://vjs.zencdn.net/c/video.js"></script>
2. Agregar el Reproductor
Cada vez que desees poner un video en tu blog utulizando este repoductor HTML5 debes tener en cuenta algunos aspectos.- El vídeo debe estar en formato MP4, WebM, u Ogg.
- Es importante, pero no indispensable que tengas una imagen de fondo para el vídeo esta es la imagen que se muestra cuando aun no comienza la reproducción.
Ahora el codigo del reproductor
<video id="video_1" class="video-js vjs-default-skin" controls width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.jpg" preload="auto" data-setup="{}"> <source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4"> </video>
El anterior código es el que debes poner en cada entrada que quieras agregar un vídeo, pero ten en cuenta algunas caracteristicas de este codigo:
- Modifica el ancho y la altura del vídeo en width y height.
- En poster va la imagen de fondo del video
- preload="auto": Indica que el archivo se cargara automaticamente durante el tiempo de carga de la pagina, es decir se cargara anticipadamente antes de presionar Play.
- preload="none": Indica que no se realizara ninguna acción de carga anticipada del video
- preload "metadata": se utiliza para que el navegador cargue por anticipado sólo los elementos de información adicional asociada con el archivo, que no incluyen el sonido.
Por ultimo lo que esta en rojo es el link del vídeo, que debe estar en MP4 preferiblemente.
Ademas, si quiere que la reproduccion comience automáticamente, agrega después de <video, autoplay
Con esto ya tendrás un reproductor de vídeos en tu sitio web. Se pueden agregar otras características si tu lo deseas. Por ejemplo subtitulos, agregar varios vídeos, o personalizar el tema mediante CSS; en fin ve a Video.js y obtén información adicional en cuanto a este reproductor.
Para hacer las cosas mas fáciles Video.js tiene una herramienta donde podrás sencillamente construir tu reproductor de videos: Video.js Builder
Cualquier inquietud comentala
Publicar un comentario