Buenas días/tardes/noches amigos, hoy les traigo este nuevo tutorial, es un poco diferente a los demás, no será un tutorial en especial para los que usamos Blogger, si no para cualquiera que lo necesite.

Esta entrada se tratará la solución al problema que muchos hemos tenido estos últimos días, y eso es el baneo de dominios de vk que tal vez algunos no sepan de que hablo, pero otros si xD para ellos es para los que va el tutorial.

Por internet ya hay varias soluciones, como la redirección para ocultar el “referer”, o una programación que obtiene el .mp4 de vk y que luego se pone en un reproductor, pues en esta entrada haremos algo parecido, vamos a obtener el .mp4 de vk, pero lo vamos a hacer con JavaScript, y la API de vk.com, si tienes algunos conocimientos de programación se te hará fácil entender el código, pero aunque no lo entiendas te va servir 😀

Crear el script

Vamos a abrir nuestro editor de texto preferido, no importa cual sea, solo que puedas guardar el archivo en formato .html, ya que será una página. Creamos un archivo, y lo nombramos como vk.html y en él pegamos el siguiente código:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Reproductor</title>
<script type="text/javascript">
// URL archivo .swf
var _swf = '//dl.dropbox.com/s/pnq1cm3u2qog63s/player.swf';
// URL archivo .swf
function getQuery() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?')+1).split('&');
for(var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
var id = getQuery().id;
var oid = getQuery().oid;
var hash = getQuery().hash;
var _240,_360,_480,_720,thumb;
function vkRepro(json) {
var respuesta = json.response;
document.title = respuesta.md_title;
_240 = (respuesta.url240) ? respuesta.url240 : '';
_360 = (respuesta.url360) ? respuesta.url360 : '';
_480 = (respuesta.url480) ? respuesta.url480 : '';
_720 = (respuesta.url720) ? respuesta.url720 : '';
thumb = (respuesta.thumb) ? respuesta.thumb : '';
if(_720 != '')
document.write('<iframe src="'+_swf+'?file='+encodeURIComponent(_720)+'&image='+encodeURIComponent(thumb)+'" frameborder="0"></iframe>');
else if(_480 != '')
document.write('<iframe src="'+_swf+'?file='+encodeURIComponent(_480)+'&image='+encodeURIComponent(thumb)+'" frameborder="0"></iframe>');
else if(_360 != '')
document.write('<iframe src="'+_swf+'?file='+encodeURIComponent(_360)+'&image='+encodeURIComponent(thumb)+'" frameborder="0"></iframe>');
else if(_240 != '')
document.write('<iframe src="'+_swf+'?file='+encodeURIComponent(_240)+'&image='+encodeURIComponent(thumb)+'" frameborder="0"></iframe>');
else
document.write('Error!');
}
</script>
<style type="text/css">html,body,iframe{width:100%;height:100%;border:0;margin:0;padding:0;overflow:hidden;}</style>
</head>
<body>
<script type="text/javascript">(function(){document.write('<script type="text/javascript" src="https://api.vk.com/method/video.getEmbed?oid='+oid+'&video_id='+id+'&embed_hash='+hash+'&callback=vkRepro"><\/script>')}());</script>
</body>
</html>

Es solo un documento HTML con algo de JavaScript, que mediante la API de vk obtiene diferentes datos en formato JSON, tales como el título y las url’s directas del archivo mp4, también escribimos el iframe con el reproductor .swf y con el link de los archivos. Aunque yo ya subí el archivo .swf que aparece al principio del código, si quieren pueden editarlo, al final del post estará la descarga.

Ya teniendo eso, guardamos el archivo, y lo subimos a cualquier host que soporte la visualización de archivos HTML, yo recomiendo Dropbox que de hecho es lo que se usará para este tutorial.

Ya que tenemos el archivo subido, toca editar la web en donde lo vamos a usar, vamos a agregar otro pequeño JavaScript, éste lo que hará es detectar cada iframe de la página, y si en alguno de los iframes, encuentra el dominio vk.com, lo cambiará por el del nuevo reproductor, para así “evadir” el baneo de vk 😀

Vamos a la edición HTML de nuestra web, en Blogger: Plantilla -> Editar HTML, en WordPress: Apariencia -> Editor -> header.php

Ahí buscamos </body> y justo arriba agregamos este código:

<script type="text/javascript">
window.onload = function() {
// URL del archivo .html
var repro = '//dl.dropboxusercontent.com/s/itacri2n0gupjzq/vk.html';
// URL del archivo .html
var iframe = document.getElementsByTagName('iframe');
for(var i = 0; i < iframe.length; i++) {
if(iframe[i].src.indexOf('vk.com') > -1) {
var src = iframe[i].src.substr(iframe[i].src.indexOf('?'));
iframe[i].src = repro+src;
}
}
}
</script>

Ya así está listo para usarse, si quieren pueden editar “repro” que es la url donde subimos el otro archivo .html, pero si no lo editan no hay problema, la url actual ya está lista para usarse.

Y así lo guardamos 😀 ya con eso tendremos funcionando nuestro script, lo pueden ver funcionando acá abajo: