Ir al contenido principal

Insertar videos de YouTube en los Comentarios Blogger

oEmbed devuelve los datos en formato JSON o XML. Eso está bien con los lenguajes del lado del servidor como PHP y Python. Pero para Javascript este es un problema. Si hay un problema, por lo general se encuentra una solución, y me encontré con Embedly un servicio por desgracia no es gratis .

Con la intención de invertir dinero, y por otra aplicación de Google AppEngine Python, se vio una oportunidad. Para hacer un servicio que resulta oEmbed de YouTube a formato de Javascript (JSONP). Y todo ello con la memoria caché, etc por lo que debe ser capaz de manejar algo de tráfico. Después de algunos códigos que estaba listo y trabajando http:// oembed-js. Appspot.com /? Url = [URL de YouTube para incrustar] [& callback = foo]...

En los blogs de Wordpress, al comentar un artículo, el usuario sólo puede escribir / pega el URL de YouTube en el texto del comentario, y se convirtió en un vídeo incrustado. Sorpresa, no en Blogger. En algunos blogs se trata de un rollo. Ahora con el nuevo, javascript libre, / servicio de jQuery compatibles GAE oembed js-esto fue posible en Blogger.
(Por MS-potilas)
VER BLOG DE EJEMPLO

  • Para que el video quede incrustado en el comentario solo se debe agregar la url del video de la siguiente forma
http://www.youtube.com/watch?v=KagvExF-ijc
o
[video=http://www.youtube.com/watch?v=KagvExF-ijc]
http://youtu.be/KagvExF-ijc
o
[video=http://youtu.be/KagvExF-ijc]
  • Ve a Plantilla, y das click en Edicion de HTML.
  •  Luego antes de </head> pega lo siguiente. 

    <script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
    <script type='text/javascript'>
    //<![CDATA[
    // Embed youtube videos in Blogspot comments by MS-potilas 2012. al español por FUTUdownloads 2012
    // See http://yabtb.blogspot.com/2012/03/embed-youtube-in-blogger-comments.html
    //
    // if oetag=0, just use video urls like:
    //           http://www.youtube.com/watch?v=12345678901
    //           surrounded by white space (video tag can be used, too)
    // if oetag=1 (for nerdy blogs?), use syntax:
    //           [video=http://www.youtube.com/watch?v=12345678901]
    // config:
    var oetag = 0;           // see above
    var oetagname = "video"; // [video=zzz], maybe you like "embed" or "youtube" more?
    var oelazy = -1; // -1 detect, 0 = normal, 1 = lazy (needs lazy load hack)
    //
    function oe_loadscript(filename) {
      var scr=document.createElement('script');
      scr.setAttribute("type","text/javascript");
      scr.setAttribute("src",filename);
      document.getElementsByTagName("head")[0].appendChild(scr);
    }
    function oe_jumptohash() { // reposition to anchor
      window.scrollTo(0, $("#"+window.location.hash.replace(/^#/, "")).offset().top);
    }
    var oe_tid;
    var oe_elems = {};
    //
    function oembed_callback(response) {
      var resp = response;
      revurl = resp.url.split("").reverse().join("");
      html = oe_elems[response.callID].html();
      ee = $(resp.html);
      w = parseInt(ee.attr("width"));
      h = parseInt(ee.attr("height"));
      if(oelazy==1) { // convert to lazy load
        src = ee.attr("src");
        src += ((src.indexOf("?")==-1) ? "?" : "&") + "autoplay=1";
        ee.attr("src", src);
        ee.attr("style", "vertical-align:top;");
        htm = $("<div/>").append(ee).html();
        htm = $('<div/>').text(htm).html().replace(/"/g,'&quot;');
        resp.html = '<a href="'+resp.url+'" class="youtube-lazy-link" style="width: '+w+'px; height: '+h+'px; background: #000 url('+resp.thumbnail_url+') center center no-repeat;" onclick="$(this).replaceWith(\''+htm+'\');return false;"><div style="width:'+(w-4)+'px;height:'+(h-4)+'px;" class="youtube-lazy-link-div"></div><div class="youtube-lazy-link-info"><b>'+resp.title+(resp.playlist ? '</b> [playlist]' : '</b>')+'<br /><small>by '+resp.author_name+'</small></div></a>';
      }
      htmlx = html.replace("[" + oetagname + "="+resp.url+"]", " " + resp.url + " ");
      htmlx = htmlx.replace("[" + oetagname + "="+resp.url+" ]", " " + resp.url + " ");
      htmlx = htmlx.replace('"'+resp.url+'"', '"'+revurl+'"');  // trick to preserve href="url"
      htmlx = htmlx.replace(resp.url, '<div style="height:'+h+'px;" class="oembed youtube">'+resp.html+'</div>')
      htmlx = htmlx.replace('"'+revurl+'"', '"'+resp.url+'"');  // trick to preserve href="url"
      if(html != htmlx) {
        oe_elems[response.callID].html(htmlx);
        if(window.location.hash.replace(/^#/, "").length > 0) {
          if(oe_tid) window.clearTimeout(oe_tid);
          oe_tid = window.setTimeout("oe_jumptohash()", 1000);
        }
      }
    }
    function oembed_yt(url, width, callID) {
      src = "http://oembed-js.appspot.com/?url=" + encodeURIComponent(url) + "&callback=oembed_callback&callID=" + encodeURIComponent(callID);
      if(width) src = src + "&maxwidth=" + width + "&maxheight=" + width;
      oe_loadscript(src);
    }
    $(document).ready(function() {
     det=$('<div class="youtube-lazy-link-div" />');
     $("body").append(det);
     if(det.css("position")=="absolute") {
      if(oelazy != 0) oelazy=1;
     }
     else oelazy = 0;
     det.remove();
     window.setTimeout(function() {
      var callID=0;
      $(".comment-content,.comment-body,.comment-body-author").each(function() {
        html = " " + $(this).html() + " ";
        if(oetag)
          matches = html.match(new RegExp("\\["+oetagname+"=(https?:\\/\\/[^\\s<\\/]*youtu\\.*be[^\\]]+)", "g"));
        else
          matches = html.match(/([>\s^]|\[\w+=)(https?:\/\/[^\s<\/]*youtu\.*be[^\s<\]]+)/g);
        if(matches && matches.length) {
          for(var i=0;i<matches.length;i++) {
            url = matches[i].match(/https?:\/\/[^\s<\/]*youtu\.*be[^\s<\]]+/);
            oe_elems[callID] = $(this);
            oembed_yt(url, $(this).width(), callID++);
          }
        }
      });
     }, 500);
    });
    //]]>
    </script>
  • Para los que quieren cambiar el ancho predeterminado de los videos solo cambia lo que esta en rojo por un numero.
  • Para lo que quieren cambiar el alto predeterminado de los videos solo cambia lo que esta en Purpura por un numero.
  • listo eso es todo, cuando alguien agrege un enlace de video de youtube este automaticamente cambia a la insercion de dicho video.

Entradas populares de este blog

Manual:Crear un Servidor dedicado para Halo CE

Halo CE es una variacion de halo combat e, solo que este halo solo puede usarse en multijugador, se pueden agregar mapas y estilos llamado mods.
A pesar de ser un juego que salió hace ya mucho tiempo aun es uno de los juegos más jugados Online con más de 300 servidores y más de 3000 jugadores al día.
Por tal motivo hay muchos que quieren tener un servidor dedicado a este juego para que los jugadores entren a su servidor.

Indice
Descarga de archivos necesarios.Configuracion de red.Creacion de Partidas.Configuracion del archivo init.txt y otros codigos.
Nombre de los mapas en codigo para init.txtIndicaciones de codigo
Descarga de los Archivos Necesarios.
- Archivos: (init.txt, haloceded.exe, haloce.exe, sapp/sapp.txt, Bienvenida.txt).

DescargarDescargas
Configurar RED.
Para configurar la red debes hacer lo siguiente.
Ve a Panel de Control, luego a Firewall de Windows.Ve a la pestaña de Excepciones. y das click en Agregar puerto.Para que sea más reconocible, en nombre escribe "Halo Cliente

Paquetes de Idioma Windows 7 MUI (64bits / x64)

Paquete de idiomas para windows 7 para aquellos que nacesitan tener varios idiomas en su pc.
Es compatible con la mayoria de versiones de Windows 7

Hay que tomar nota de que si se instalan demasiados paquetes de idioma adicionales, el espacio de disco y el rendimiento del sistema puede verse afectados. En particular, el espacio de disco y el rendimiento del sistema se ven afectados durante las operaciones de servicios, tales como las instalaciones de Service Pack (KB972813). Por lo tanto, se recomienda sólo añadir un paquete de idioma, el que necesitares exclusivamente.
Paquete de idiomas Windows 7 RTM MUI 64-bit (x64)
ArabeDescargasBulgaroDescargasChino (Simplifi...)DescargasChino (Tradicio...)DescargasCroataDescargasChecoDescargasDanésDescargasHolandésDescargasInglésDescargasEstonioDescargasFinlandésDescargasFrancésDescargasAlemánDescargasGriegoDescargasHebreoDescargasHúngaroDescargas

Manual:Codigos y plantillas Aegisub

Aegisub es un programa que le permite a las personas añadir subtitulos y karaoke a sus videos, actualmente Aegisub para dar esos estilos y animaciones a los subtitulos y karaokes usa una serie de codigos que activan dichas animaciones en un tiempo y colores determinados, como un script en HTML.
Los que más utilizan este programa son los Fansubs y empresas de karaoke.Los codigos son dificiles de aprender pero no imposibles si mantienes practica.REGLAS DE LOS CÓDIGOS.
Debes saber unas reglas para los codigos y es que cada coigo está entre parentesis {}. El codigo inicia con una diagonal inversa (invert slash) \.El indicador de la accion biene negreado.El codigo numerico saldrá normal.El codigo viene antes del texto.Cada codigo se divide con una diagonal inversa \. BÁSICO.
_________________________________________________________________________
Lo basico son esos codigos que son los más utilizados y faciles, además de que el mismo programa te da las opciones y no necesariamente tienes que…