Alternativa: Post con muchos de videos Youtube

Publicado en 'Sugerencias y Comentarios' por Procrastinador, 2 May 2017.





  1. Procrastinador

    Procrastinador Miembro de oro

    Registro:
    22 Ago 2015
    Mensajes:
    9,888
    Likes:
    7,164
    Temas:
    121




    Hola forer@s, no sé si les ha pasado o pasa que cuando entran a un post/thread con muchos videos de youtube, el navegador se lentea un poco. Eso se debe a que por cada carga un montón de elementos...en fin.

    Les traigo una alternativa que solo cargará el thumbnail/miniatura del video, esto para que el navegador no se ponga lento, además se ahorran un poco de banda ancha, el único "pero" es que no muestra el título del video, aún, es fácil ponerlo pero no tengo un key de la API de google..quizá otro día me cree una una cuenta...

    Bueno, lo anterior es mediante un script que pueden usar con GreaeMonkey (TamperMonkey en Chrome).

    El Script (para Firefox y Chrome)
    Copiar y pegar tal cual


    El tiempo de cargamejora bastante. Por ejemplo prueben esta página sin el script y con él: https://www.forosperu.net/temas/que-estas-escuchando.163686/pagina-1131

    PHP:
    // ==UserScript==
    // @name        YoutubeLiteForosPeru
    // @namespace   https://www.forosperu.net/
    // @description hace menos pesada la carga de las páginas con videos de youtube
    // @include     https://www.forosperu.net/*
    // @version     1
    // @run-at      document-end
    // @grant       none
    // ==/UserScript==

    var arrIframes = $('iframe');
    var 
    arrVideos = [];
    var 
    getVideoId = function(url){
        var 
    v0 url.split("/");
        var 
    v1 v0[v0.length-1].split("?");
        return 
    v1[0];
    };
    var 
    getThumbnailUrl = function(videoId){
        return 
    "https://i.ytimg.com/vi/" videoId "/hqdefault.jpg";
    };

    var 
    addGlobalStyle = function(css) {
        var 
    headstyle;
        
    head document.getElementsByTagName('head')[0];
        if (!
    head) { return; }
        
    style document.createElement('style');
        
    style.type 'text/css';
        
    style.innerHTML css;
        
    head.appendChild(style);
    };
    arrIframes.each(function(){
        var 
    $f = $(this);  
        var 
    url $f.attr("src");
        if(
    typeof url !== typeof undefined && url !== false && url.indexOf("www.youtube.com") > -1){
            var 
    id getVideoId(url);
            var 
    $div = $("<div class='yt-parent-container' />").attr("id"id);
            var 
    $obj = {IdidUrlurlContainer$div};
            
    arrVideos.push($obj);
            
    $f.after($div);
            
    $f.remove();
        }  
    });

    addGlobalStyle(".yt-parent-container{visible:hidden;background:transparent;text-align:center;position:relative;margin:0 auto 0 auto;}");
    addGlobalStyle(".yt-container-overlay{display:none;background:#000;position:absolute;z-index:2;width:100%;height:100%;opacity:.4;}");
    addGlobalStyle(".yt-thumb{vertical-align:middle;position:relative;z-index:1;display:none;}");
    addGlobalStyle(".yt-title{display:none; color:#fff;text-align:left;padding-top:1.3em;font-size:1.4em;padding-left:1em;font-family:Roboto,Arial,Helvetica,sans-serif;position:absolute;z-index:3;top:0px;}");
    addGlobalStyle(".ytp-button {opacity:.7; display:none;border: none;background-color: transparent;left : calc(100% - (50% + 50px));top:calc(100% - (50% + 40px));position:absolute;z-index:4;}");
    addGlobalStyle(".yt-parent-container:hover .ytp-button{opacity: 1;}");


    arrVideos.forEach(function(vid){
        var 
    $container vid.Container;
        var 
    $overlay = $("<div class='yt-container-overlay' />");
        var 
    $thumb = $("<img class='yt-thumb' />");
        var 
    $title = $("<div class='yt-title' />");
        var 
    $btn = $("<span class='ytp-button' />");
        
    $container.append($overlay).append($thumb).append($title).append($btn);
       
        
    //obtener el titulo del video:
        //...
       
        
    $thumb.attr("src"getThumbnailUrl(vid.Id))
              .
    load(function(){
                    var 
    $t = $(this);
                    if(
    $t.height() < 360$t.attr({'height'360});
                    if(
    $t.width() < 480$t.attr({'width'480});
                    
    $container.css({'height':$t.height() + 'px'}).css({'width':$t.width() + 'px'});
                    
    $container.fadeIn(1200).delay(1200,function(){
                        
    $t.fadeIn("slow");                  
                        
    $overlay.fadeIn("slow");                  
                        
    $title.fadeIn("slow");                  
                        var 
    $btnImg = $("<img src='https://www.youtube.com/yt/brand/media/image/YouTube-icon-full_color.png' style='width:80px;' />");
                        
    $btnImg.load(function(){
                            
    $btn.fadeIn("slow");
                        }).
    appendTo($btn);              
                        });
                });  
       
        
    $container.click(function(){
            var 
    $this = $(this);
            var 
    literalIframe "<iframe style='display:none;' allowfullscreen='' frameborder='0' height='300' width='500' />";
            var 
    $iframe = $(literalIframe).attr("src"vid.Url "&********=1");
            
    $this.append($iframe).unbind('click');
            
    $iframe.load(function(){
                
    $thumb.fadeOut(1);  
                
    $overlay.fadeOut(1);  
                
    $title.fadeOut(1);  
                
    $btn.fadeOut(1);      
                
    $iframe.fadeIn(300);
            });
        });    
    });


    :P


    [​IMG]
     
    A luiswerner3012 le gustó este mensaje.


  2. Mr.Hyde

    Mr.Hyde Miembro de honor VIP

    Registro:
    29 Ago 2014
    Mensajes:
    32,602
    Likes:
    20,243
    Temas:
    446
    Si es cierto, se pone lento. Yo creí que era mi PsVita.
     
  3. DarkdragonStar

    DarkdragonStar Miembro de plata

    Registro:
    3 Mar 2007
    Mensajes:
    3,410
    Likes:
    1,590
    Temas:
    199
    Tengo un movil android con 2G de ram y no te problemas de lentitud
     
  4. fidelgt

    fidelgt Miembro de bronce

    Registro:
    12 Feb 2016
    Mensajes:
    1,333
    Likes:
    412
    Temas:
    8
    Tengo un móvil de 1 GB de ram y normal así carga
     
  5. Procrastinador

    Procrastinador Miembro de oro

    Registro:
    22 Ago 2015
    Mensajes:
    9,888
    Likes:
    7,164
    Temas:
    121
    Es para PC, a mi también me va con el móvil.