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
como le hago para subir mis propios videos
ResponderEliminarUtiliza un servicio como por ejemplo: Dropbox.com y aloja allí tus videos. Luego utiliza el reproductor que te dejo en este articulo para ponerlo en tu blog.
Eliminaroh ok, y para darle la extencion como le puedo hacer
EliminarTe recomiendo utilizar "Format Factory" para convertir tus videos a mp4. Es un excelente conversor gratuito-
EliminarGracias por el aporte, lo probare en cuanto pueda y te platico como me quedo... :D
ResponderEliminarEn cuanto lo instales me avisas para ver como te ha quedado.
EliminarNo me queda, subo el video al dropbox en mp4 y no mas no lo jala... que puede ser???
EliminarFijate muy bien que la enxtension de la url del video termine en .mp4
EliminarSi... terminan en .mp4, pero no aun así no los jala el reproductor... ¬¬???
Eliminarestoy pensando que es la cuenta de DropBox ... XD
Si Pablo, utiliza archive.org para subir el video.
Eliminarhola a mi no me ha funcionado en mp4 solo se queda cargando y no reproduce nada no tienes otro tutorial para crear un reproductor de video que no sea este de antemano gracias
ResponderEliminarSube tu video a archive.org y obtén el enlace con terminación en .mp4
Eliminarhola yo quiero subir capitulos de anime que duran 23:15 minutos para mi blog como lo hago.
ResponderEliminarsubelos a archive.org
Eliminarpero tengo una cuenta de mediafire se puede utilizar.??????
EliminarNo andres, debes subirlo a archive.org u otro servicio que te permita descargas directas.
Eliminarya ingrese ala pagina archive.org ya cree una cuenta, subi un capitulo. "y ahora como en cuentro el link del video" o que hay que hacer.
EliminarTe recomiendo que busques un tutorial en la web. Seguro lo econtraras.
EliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarGracias brother justo lo que buscaba
ResponderEliminarBuenas Tardes Intale este reproductor y me dice NO SE HA ENCONTRADO ningun video que tenga un formato y tipo MIME compatibles que puedo hacer
ResponderEliminarEL video debe estar en formato mp4 Jesus
Eliminargracias por tu respuesta el video esta .mp4 pero no carga el video es decir hace como estuviera cargando el video en el reproductor pero se queda alli es una peli que dura mas de una hora gracias y feliz dia
ResponderEliminarDame el link del blog para poder ayudarte Jesus
EliminarBuenas Tardes Este es mi link http://ventadomicilio.blogspot.com/ tambien la subi archive.org y nada gracias y feliz dia
EliminarEnviame el link del post donde intentaste poner el reproductor
Eliminareste es el link http://ventadomicilio.blogspot.com/2013/08/trans-formers-la-pelicula.html
ResponderEliminarNo funciona porque estas alojando tu pelicula en dropbox, debes hacerlo con archive.org
Eliminaren donde se pone este codigo
ResponderEliminarse pone en las entradas en html o donde
bueno el codigo no aparecio pero era el codigo del video que quiero publicar
Eliminarno carga el video es en .mp4 desde mediafire
EliminarHola todo bien gracias, pero quisiera saber un comando para cuando abran la pagina el video automaticamente se comienze a reproducir, por favor si me lo dejas en la respuesta gracias de antemano me gusto el reproductor y me lo quedo para mi web.
ResponderEliminarDespues de <video agrega autoplay
ResponderEliminarOla como hago para subir videos de naruto shippuden, pero q lo evean con ese reproductor
ResponderEliminarSubelos a archive.org
EliminarPero que tengo que hacer en esa pagina, tengo q subir capitulo x capitulo o q?
EliminarHola, me podrías dar sitios para subir el videos. Gracias.!
ResponderEliminarSe peude hacer una lista de reproduccion, que hay que modificar en el codigo? Gracias
ResponderEliminaresta vaina no sirve
ResponderEliminarHola amigo, este es el problema, yo tengo una pagina de series en wordpress y cuando intento colocar la url del vídeo el cual quiero que aparezca en el reproductor, que esta alojado en openload, no se reproduce y llevo tiempo buscando en internet una solución para esto
ResponderEliminarEsta es la colección de algunos de los mejores pagina web html que viene con increíbles funciones.
ResponderEliminareres la mamada mijo
ResponderEliminarGracias al blog por mostrarnos la forma de descargar vídeos, ahora podré descargar los capítulos de www.verhentai.top y verlos en mi celular sin ningún problema.
ResponderEliminarHola amigo, este es el problema, yo tengo una pagina de series en wordpress y cuando intento colocar la url del vídeo el cual quiero que aparezca en el reproductor, que esta alojado en openload, no se reproduce y llevo tiempo buscando en internet una solución para esto https://queverenz.com/europa/espana/el-molar/
ResponderEliminarHola una pregunta este reproductor sirve para los vídeos que tengo en Google Drive por qué lo hice con mi blog y cuando le doy a reproducir se queda cargando y de hay no hace nada.
ResponderEliminar