- Mensajes
- 2
- Puntuación de reacción
- 0
Antes que nada quiero recalcar que estoy totalmente abierto a cualquier mejora que puedan sugerir y a tratar de solventar cualquier problema, asi que chicos, no se corten.
Que es videoEx
VideoEx es primer medida(v1.0) un conjuto de extensiones multiplataforma, que permite de forma simple, sin apenas configuracion y sin necesidad de subir nada a tus servidores, agregar un reproductor(html5) en tu web, mediante el cual es posible ver videos alojados en multiples hosts, ocultando informacion sensible de los mismos.
Pueden ver como funciona todo en la pagina videoEx
Caracteristicas
- Extensiones para chrome(pc) y firefox(android).
- Aun cuando los videos se vean en sus webs/blogs todo sucede en la pc del usuario, incluso las reproducciones.
- En su configuracion basica no necesita que se agregue nada en tu web/blog, simplemente se copia los codigos y listo.
- Permite encodear toda la configuracion incluyendo claro las urls.
- Si se encodea la informacion del video, solo podra ser visto en el dominio donde se encodeo.
- Esconde en la medida de lo posible las conexiones importantes.
- Permite visualizar mas de un subtitulo a la vez.
- Los subtitulos pueden estar hosteados en cualquier dominio.
- Las actualizaciones son automaticas y no requiere de sus intervenciones, si algo se rompe, a lo sumo, pueden informar y hare lo posible por repararlo.
- Permite ser informado mediante eventos si un video no reproduce(pudiendo estar caido), ademas de informar si se termino de ver un video (util si quieres crear listas de reproduccion).
- En la version movil si el formato no es soportado o si asi se indica los videos se pueden reproducir en cualquier aplicacion instalada en el telefono que permita ver videos(la gente chevere tiene vlc o bitx o algo..).
- Permite personalizar el poster del reproductor.
- El reproductor es responsive (data-width="100%).
- Incluye flags que permiten tanto esconder como hacer visibles bloques html en sus webs/blogs dependiendo de si la extension esta instalada o no.
Servidores agregados:
Son pocos(pero son los importantes) pues me estoy concentrando en el sistema, ya ira creciendo, programarlos siempre que sea factible es realmente simple.
-Enlaces directos.
-Youtube(web y api).
-Picasa
-Google drive
-Vimeo
-Jkanime(la verdad le programe para analizar factibilidad tecnica pero ahi quedo xD).
Me quede con ganas de hacer uno de amazon drive pero nunca me encontre con la posibilidad ni se como son sus url...
Diferencias entre las versiones gratuita y paga:
* La version gratuita tiene un limite de 10 videos vistos por dominio para cada usuario al dia.
* La version gratuita agrega una marca de agua con el nombre de la extension
* La version gratuita agrega publicidad sobre el reproductor.
(Un banner al empezar el video, o al darle pausa).
* La version gratuita en telefonos no abrira ninguna aplicacion si el video no es soportado.
Version 2.0(pc)
Posibles agregados version 2.0 serian los siguientes:
Compatible con todos los navegador.
DASH - stream dinamico.
Reproduccion de videos de Mega.
Lanzar un reproductor como vlc.
Stream de torrents.
Guia de uso:
parametros:
En el tag videoex se pueden agregar diversos parametros como los siguientes
data-go='true' el video que tenga este parametro sera procesado automaticamente.
data-encode='informacion-encodeada'
data-open='true' los videos son reproducidos en alguna aplicacion como vlc en telefonos.
data-poster='url-de-poster' agregara un poster al reproductor.
data-autoplay='true' el video empezara automaticamente.
data-width='anchopx' asigna ancho del reproductor si lo dejas como '100%' sera dinamico.
data-height='altopx' asigna el alto del reproductor.
data-dlink='url-del-video' hotlink de video a reproducir.
data-serv='yt|jk|gv|vi|pi|etc' asigna el nombre del servidor.
data-url='id' id o fragmento de url.
data-id='id' id o fragmento de url.
data-user='id' id o fragmento de url.
servidores:
Youtube = yt|ytapi ejemplo: data-serv='yt' data-url='idvideo'
Picasa = pi ejemplo: data-serv='pi' data-user='iduser' data-id='{photoid|albumid}/idQueCorresponda'
Google drive = gv ejemplo: data-serv='gv' data-url='idvideo'
Jkanime = jk ejemplo: data-serv='jk' data-url='nombre-anime/episodio'
Vimeo = vi ejemplo: data-serv='vi' data-id='idvideo'
Ejemplos de uso:
*Vamos a reproducir un video alojado en vimeo
*Igual al anteior pero esta vez reproduciremos un video de google drive
*Esta vez usaremos un hotlink, le agragaremos un poster y le diremos que reprodusca de inmediato (autoplay)
configurando y encodeando:
Para esta tarea y por practicidad les facilitare un pequeño codigo que automatizara un poco el proceso, este codigo debe de ser usado en la misma web donde se va a ver los videos encodeados, pueden usar la consola del navegador(copy&paste en consola) si no desean agregar el codigo a sus webs.
Ahora deben de ir a la consola del navegador en esta vamos a escribir basicamente los mismos parametros que estavamos escribiendo en html pero quitandoles la particula "data-" y en formato json
Ejemplos:
El siendo codigo es el equivalente al primer ejemplo en formato html
Con esto obtendrás el codigo html que incluira la informacion encodeada, copialo...(es el que aparece en la ultima linea de tu consola)
Equivalente al segundo ejemplo con servidor google drive
Equivalente al tercer ejemplo
Que es videoEx
VideoEx es primer medida(v1.0) un conjuto de extensiones multiplataforma, que permite de forma simple, sin apenas configuracion y sin necesidad de subir nada a tus servidores, agregar un reproductor(html5) en tu web, mediante el cual es posible ver videos alojados en multiples hosts, ocultando informacion sensible de los mismos.
Pueden ver como funciona todo en la pagina videoEx
Caracteristicas
- Extensiones para chrome(pc) y firefox(android).
- Aun cuando los videos se vean en sus webs/blogs todo sucede en la pc del usuario, incluso las reproducciones.
- En su configuracion basica no necesita que se agregue nada en tu web/blog, simplemente se copia los codigos y listo.
- Permite encodear toda la configuracion incluyendo claro las urls.
- Si se encodea la informacion del video, solo podra ser visto en el dominio donde se encodeo.
- Esconde en la medida de lo posible las conexiones importantes.
- Permite visualizar mas de un subtitulo a la vez.
- Los subtitulos pueden estar hosteados en cualquier dominio.
- Las actualizaciones son automaticas y no requiere de sus intervenciones, si algo se rompe, a lo sumo, pueden informar y hare lo posible por repararlo.
- Permite ser informado mediante eventos si un video no reproduce(pudiendo estar caido), ademas de informar si se termino de ver un video (util si quieres crear listas de reproduccion).
- En la version movil si el formato no es soportado o si asi se indica los videos se pueden reproducir en cualquier aplicacion instalada en el telefono que permita ver videos(la gente chevere tiene vlc o bitx o algo..).
- Permite personalizar el poster del reproductor.
- El reproductor es responsive (data-width="100%).
- Incluye flags que permiten tanto esconder como hacer visibles bloques html en sus webs/blogs dependiendo de si la extension esta instalada o no.
Servidores agregados:
Son pocos(pero son los importantes) pues me estoy concentrando en el sistema, ya ira creciendo, programarlos siempre que sea factible es realmente simple.
-Enlaces directos.
-Youtube(web y api).
-Picasa
-Google drive
-Vimeo
-Jkanime(la verdad le programe para analizar factibilidad tecnica pero ahi quedo xD).
Me quede con ganas de hacer uno de amazon drive pero nunca me encontre con la posibilidad ni se como son sus url...
Diferencias entre las versiones gratuita y paga:
* La version gratuita tiene un limite de 10 videos vistos por dominio para cada usuario al dia.
* La version gratuita agrega una marca de agua con el nombre de la extension
* La version gratuita agrega publicidad sobre el reproductor.
(Un banner al empezar el video, o al darle pausa).
* La version gratuita en telefonos no abrira ninguna aplicacion si el video no es soportado.
Version 2.0(pc)
Posibles agregados version 2.0 serian los siguientes:
Compatible con todos los navegador.
DASH - stream dinamico.
Reproduccion de videos de Mega.
Lanzar un reproductor como vlc.
Stream de torrents.
Guia de uso:
parametros:
En el tag videoex se pueden agregar diversos parametros como los siguientes
data-go='true' el video que tenga este parametro sera procesado automaticamente.
data-encode='informacion-encodeada'
data-open='true' los videos son reproducidos en alguna aplicacion como vlc en telefonos.
data-poster='url-de-poster' agregara un poster al reproductor.
data-autoplay='true' el video empezara automaticamente.
data-width='anchopx' asigna ancho del reproductor si lo dejas como '100%' sera dinamico.
data-height='altopx' asigna el alto del reproductor.
data-dlink='url-del-video' hotlink de video a reproducir.
data-serv='yt|jk|gv|vi|pi|etc' asigna el nombre del servidor.
data-url='id' id o fragmento de url.
data-id='id' id o fragmento de url.
data-user='id' id o fragmento de url.
servidores:
Youtube = yt|ytapi ejemplo: data-serv='yt' data-url='idvideo'
Picasa = pi ejemplo: data-serv='pi' data-user='iduser' data-id='{photoid|albumid}/idQueCorresponda'
Google drive = gv ejemplo: data-serv='gv' data-url='idvideo'
Jkanime = jk ejemplo: data-serv='jk' data-url='nombre-anime/episodio'
Vimeo = vi ejemplo: data-serv='vi' data-id='idvideo'
Ejemplos de uso:
*Vamos a reproducir un video alojado en vimeo
Código:
<iframe src="http://cdn.video-ex.com/install/" width="100%" height=400 scrolling="no" frameborder=0 class='videoexInstall'></iframe>
<videoex data-id="146876921" data-serv="vi" data-go=true data-width="100%" data-height="500" ></videoex>*Igual al anteior pero esta vez reproduciremos un video de google drive
Código:
<iframe src="http://cdn.video-ex.com/install/" width="100%" height=400 scrolling="no" frameborder=0 class='videoexInstall'></iframe>
<videoex data-url="0BwJAMF0eJWOkTVdwLXlONlI5UGs" data-serv="gv" data-go=true data-width="100%" data-height="500" ></videoex>*Esta vez usaremos un hotlink, le agragaremos un poster y le diremos que reprodusca de inmediato (autoplay)
Código:
<iframe src="http://cdn.video-ex.com/install/" width="100%" height=400 scrolling="no" frameborder=0 class='videoexInstall'></iframe>
<videoex data-dlink="http://sitio.com/video.mp4" data-go=true data-width="100%" data-height="500" data-poster="http://hdwallpapersfit.com/wp-content/uploads/2015/04/city-street-wallpaper.jpg" data-autoplay="true"></videoex>configurando y encodeando:
Para esta tarea y por practicidad les facilitare un pequeño codigo que automatizara un poco el proceso, este codigo debe de ser usado en la misma web donde se va a ver los videos encodeados, pueden usar la consola del navegador(copy&paste en consola) si no desean agregar el codigo a sus webs.
Código:
var encode;
(function(c){var b;c.config=function(a){b?b.setData=a:b=new d(a);b.send()};var d=function(){function a(a){this.data=a;this.events()}Object.defineProperty(a.prototype,"setData",{set:function(a){this.data=a},enumerable:!0,configurable:!0});a.prototype.send=function(){window.postMessage(this.data,"*")};a.prototype.events=function(){var a=this;top.window.addEventListener("message",function(b){b.data.encode&&!b.data.encode.url&&(console.log(b.data.encode),a.build(b.data.encode))})};a.prototype.dimension=function(){"undefined"==
typeof this.data.dimension?this.data.dimension={width:"100%",height:600}:(this.data.dimension.width||(this.data.dimension.width="100%"),this.data.dimension.height||(this.data.dimension.height=600))};a.prototype.build=function(a){this.dimension();console.log('<videoex data-encode="'+a+'" data-go=true '+(this.data.autoplay?"data-autoplay=true":"")+' data-width="'+this.data.dimension.width+'" data-height="'+this.data.dimension.height+'" ></videoex>')};return a}()})(encode||(encode={}));Ahora deben de ir a la consola del navegador en esta vamos a escribir basicamente los mismos parametros que estavamos escribiendo en html pero quitandoles la particula "data-" y en formato json
Ejemplos:
El siendo codigo es el equivalente al primer ejemplo en formato html
Código:
var datos = {
encode:{
id:"146876921",
serv:"vi"
}
}
encode.config(datos)Con esto obtendrás el codigo html que incluira la informacion encodeada, copialo...(es el que aparece en la ultima linea de tu consola)
Equivalente al segundo ejemplo con servidor google drive
Código:
var datos = {
encode:{
url:"0BwJAMF0eJWOkTVdwLXlONlI5UGs",
serv:"gv"
}
}
encode.config(datos)Equivalente al tercer ejemplo
Código:
var datos = {
encode:{
dlink:'http://sitio.com/video.mp4',
autoplay:true,
poster: "http://hdwallpapersfit.com/wp-content/uploads/2015/04/city-street-wallpaper.jpg"
}
}
encode.config(datos)
