La plataforma Futudownloads está en desarrollo.

29 abr. 2012

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.