3

En Google Chrome existe una gran variedad de extensiones para descargar vídeos de fondo o a la vez utilizar las herramientas de desarrollador y sources se puede visualizar las vinculaciones con el sitio web.

Pero por alguna razón existe una cadena una codificación con javascript que no permite poder encontrar el video, es una muy buena técnica.

En este enlace se puede visualizar mejor el código, y en esté enlace se puede visualizar el vídeo de fondo.

Me pueden explicar como se puede leer una codificación o cadena de javascript

!function(a,b){"function"==typeof define&&define.amd?define(["jquery"],b):b("object"==typeof exports?require("jquery"):a.jQuery)}(this,function(a){"use strict";function b(a){var b,c,d,e,f,g,h,i={};for(f=a.replace(/\s*:\s*/g,":").replace(/\s*,\s*/g,",").split(","),h=0,g=f.length;g>h&&(c=f[h],-1===c.search(/^(http|https|ftp):\/\//)&&-1!==c.search(":"));h++)b=c.indexOf(":"),d=c.substring(0,b),e=c.substring(b+1),e||(e=void 0),"string"==typeof e&&(e="true"===e||("false"===e?!1:e)),"string"==typeof e&&(e=isNaN(e)?e:+e),i[d]=e;return null==d&&null==e?a:i}function c(a){a=""+a;var b,c,d,e=a.split(/\s+/),f="50%",g="50%";for(d=0,b=e.length;b>d;d++)c=e[d],"left"===c?f="0%":"right"===c?f="100%":"top"===c?g="0%":"bottom"===c?g="100%":"center"===c?0===d?f="50%":g="50%":0===d?f=c:g=c;return{x:f,y:g}}function d(b,c){var d=function(){c(this.src)};a('<img src="'+b+'.gif">').load(d),a('<img src="'+b+'.jpg">').load(d),a('<img src="'+b+'.jpeg">').load(d),a('<img src="'+b+'.png">').load(d)}function e(c,d,e){if(this.$element=a(c),"string"==typeof d&&(d=b(d)),e?"string"==typeof e&&(e=b(e)):e={},"string"==typeof d)d=d.replace(/\.\w*$/,"");else if("object"==typeof d)for(var f in d)d.hasOwnProperty(f)&&(d[f]=d[f].replace(/\.\w*$/,""));this.settings=a.extend({},g,e),this.path=d,this.init()}var f="vide",g={volume:1,playbackRate:1,muted:!0,loop:!0,autoplay:!0,position:"50% 50%",posterType:"detect",resizing:!0};e.prototype.init=function(){var b,e=this,g=c(e.settings.position),h="";e.$wrapper=a("<div>").css({position:"absolute","z-index":-1,top:0,left:0,bottom:0,right:0,overflow:"hidden","-webkit-background-size":"cover","-moz-background-size":"cover","-o-background-size":"cover","background-size":"cover","background-repeat":"no-repeat","background-position":g.x+" "+g.y}),b=e.path,"object"==typeof e.path&&(e.path.poster?b=e.path.poster:e.path.mp4?b=e.path.mp4:e.path.webm?b=e.path.webm:e.path.ogv&&(b=e.path.ogv)),"detect"===e.settings.posterType?d(b,function(a){e.$wrapper.css("background-image","url("+a+")")}):"none"!==e.settings.posterType&&e.$wrapper.css("background-image","url("+b+"."+e.settings.posterType+")"),"static"===e.$element.css("position")&&e.$element.css("position","relative"),e.$element.prepend(e.$wrapper),"object"==typeof e.path?(e.path.mp4&&(h+='<source src="'+e.path.mp4+'.mp4" type="video/mp4">'),e.path.webm&&(h+='<source src="'+e.path.webm+'.webm" type="video/webm">'),e.path.ogv&&(h+='<source src="'+e.path.ogv+'.ogv" type="video/ogv">'),e.$video=a("<video>"+h+"</video>")):e.$video=a('<video><source src="'+e.path+'.mp4" type="video/mp4"><source src="'+e.path+'.webm" type="video/webm"><source src="'+e.path+'.ogv" type="video/ogg"></video>'),e.$video.prop({autoplay:e.settings.autoplay,loop:e.settings.loop,volume:e.settings.volume,muted:e.settings.muted,defaultMuted:e.settings.muted,playbackRate:e.settings.playbackRate,defaultPlaybackRate:e.settings.playbackRate}).css({margin:"auto",position:"absolute","z-index":-1,top:g.y,left:g.x,"-webkit-transform":"translate(-"+g.x+", -"+g.y+")","-ms-transform":"translate(-"+g.x+", -"+g.y+")","-moz-transform":"translate(-"+g.x+", -"+g.y+")",transform:"translate(-"+g.x+", -"+g.y+")",visibility:"hidden"}).one("canplaythrough."+f,function(){e.resize()}).one("playing."+f,function(){e.$video.css("visibility","visible"),e.$wrapper.css("background-image","none")}),e.$element.on("resize."+f,function(){e.settings.resizing&&e.resize()}),e.$wrapper.append(e.$video)},e.prototype.getVideoObject=function(){return this.$video[0]},e.prototype.resize=function(){if(this.$video){var a=this.$video[0].videoHeight,b=this.$video[0].videoWidth,c=this.$wrapper.height(),d=this.$wrapper.width();this.$video.css(d/b>c/a?{width:d+2,height:"auto"}:{width:"auto",height:c+2})}},e.prototype.destroy=function(){this.$element.off(f),this.$video&&this.$video.off(f),delete a[f].lookup[this.index],this.$element.removeData(f),this.$wrapper.remove()},a[f]={lookup:[]},a.fn[f]=function(b,c){var d;return this.each(function(){d=a.data(this,f),d&&d.destroy(),d=new e(this,b,c),d.index=a[f].lookup.push(d)-1,a.data(this,f,d)}),this},a(document).ready(function(){var b=a(window);b.on("resize."+f,function(){for(var b,c=a[f].lookup.length,d=0;c>d;d++)b=a[f].lookup[d],b&&b.settings.resizing&&b.resize()}),b.on("unload."+f,function(){return!1}),a(document).find("[data-"+f+"-bg]").each(function(b,c){var d=a(c),e=d.data(f+"-options"),g=d.data(f+"-bg");d[f](g,e)})})});
2
  • 1
    No se entiende muy bien tu pregunta, donde no encuentras el video, viendo el source de la pagina o usando las herramientas de desarrollador de google?. Si solo quieres obtener el video, usa las herramientas de desarrolladores de chrome ubícate en la pestaña elements, y luego busca la extension mp4 o algun texto video, facilmente encontrarás el video. El link al mismo es: p.w3layouts.com/demos_new/30-01-2017/… Commented el 28 jun. 2017 a las 5:11
  • Eso no esta codificado, simplemente esta minificado (y probablemente ofuscado) para ocupar menos. Usa un editor de JS que permita formatear el codigo y podras leerlo mejor.
    – Lithorell
    Commented el 28 jun. 2017 a las 5:57

1 respuesta 1

2

Anduve mirando tu pregunta y lo que debo decirte es lo siguiente.
Funciona asi...
1º Pones por ejemplo....

<script src="js/jquery.vide.min.js"></script>

2º Colocas el div por ejemplo...

<div data-vide-bg="video/Ipad"></div>

3º Listo ya saldria el video.
Ahora la magia que te explico.
En la etiqueta... data-vide-bg="video/Ipad" ahi colocas lo que seria la url relativa del video... en este caso el que hay en esa web es video/Ipad.mp4 video/Ipad.webm video/Ipad.ogv ese seria el ejemplo de como queda...

https://p.w3layouts.com/demos_new/30-01-2017/classic_login_form-demo_Free/395814285/web/video/Ipad.mp4

Asi que si pones ejemplo...

<div data-vide-bg="video/Control"></div>

el resultado seria Control.mp4
Control.webm Control.ogv
aunque no es necesario poner los 3 formatos... al igual que la page que vos pasaste...
tambien puedes cambiar la url relativa ejemplo...

<div data-vide-bg="ocultados/Control"></div>

entonces la url relativa del video seria Urltuweb/ocultados/Control.mp4

<div data-vide-bg="ocultados/Control" style="position: relative;">
<div style="position: absolute; z-index: -1; top: 0px; left: 0px; bottom: 0px; right: 0px; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; background-image: none;">
<video autoplay="" loop="" muted="" style="margin: auto; position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: visible; width: auto; height: 777px;">
<source src="ocultados/Control.mp4" type="video/mp4">
<source src="ocultados/Control.webm" type="video/webm">
<source src="ocultados/Control.ogv" type="video/ogg">
</video>
</div>
</div>
2
  • Hay que tener cuidado con las etiquetas HTML ya que se pueden usar para dar formato a las respuestas. Revisar la ayuda del editor para que conozcas las opciones de edición e insersión de código.
    – Rubén
    Commented el 28 jun. 2017 a las 12:36
  • 2
    Okey la proxima vez miro con mas atencion gracias por la edicion de mi respuesta y hacerla mas entendible y ordenada.
    – t8kcontrol
    Commented el 28 jun. 2017 a las 15:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.