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.
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 tiene tres opciones:
- 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.
Personalmente utilizo
preload="auto" ya que anticipa la carga del vídeo.
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
![-RUKIA,ICHIGO & HOLLOW- - [i]Bleach capitulo 1 Liinda foto amo esta parte *O*[/i] - Fotolog](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_s_h0k-jqt3VzDoAsphCeqlZTrjyJ2kUQRpmPLfNDUAV1_8BeqDMmcdhL_tEYcjgHR7tQLZS-hlJ5NvhHyP-UpY1AjcxFG1lYe2RDEgllm8LpMQwIgNP-o15dOPyMnmk-todWBk0g=s0-d)
