¿Hay alguna manera de cargar videos de YouTube incrustados más rápido en mi sitio web?

Question

Estoy escribiendo una publicación de blog que usa varios videos de YouTube y Yahoo Video, pero no estoy contento con el tiempo que tarda la página en renderizarse. Además de utilizar un método ajax-y para cargar los videos, ¿hay algún truco que haga que la página cargue más rápido con múltiples videos de diferentes fuentes?

Answer 1

Sus "métodos ajax-y" serán la única forma de acelerar esto. Los sitios grandes van a utilizar un CDN y tienen un buen almacenamiento en caché. No hay forma de evitar archivos grandes que tarden mucho tiempo ...

Mantener el objeto o la etiqueta de video fuera del HTML y luego agregarlo después de cargar la página, mejorará el rendimiento percibido de la carga de la página. Tal vez cambiar una imagen de captura de pantalla que es del mismo tamaño que el video eventual ...

Son los primeros días para la etiqueta de video, pero es posible que eventualmente su tiempo de inicialización sea más rápido que Flash, ya que es parte del navegador y no un plugin de terceros.

La mayor parte del tiempo de carga del video depende de cómo se codificó/transfirió el video que está fuera de su control, parece.

Answer 2

No hay duda de que obtener varios videos de diferentes sitios web lleva tiempo. ¿Has intentado obtener una copia de esos videos, subirlos a tu servidor web e insertar tus videos de esa manera? Puede aumentar la velocidad de representación de sus páginas si los videos provienen de una sola fuente.

Answer 3

El problema con los videos de YouTube incrustados es que el reproductor en sí necesita cargarse. Podría agregar "controles = 2" en la URL del código de inserción, pero eso haría que solo los jugadores AS2/3 carguen el reproductor después de hacer clic.

La solución provisional que tiene Google+ para este problema no es cargar el reproductor en absoluto. En cambio, carga una imagen en miniatura con un botón de reproducción superpuesto. Al hacer clic, la imagen se reemplaza con el código incrustado del iframe real del reproductor de YouTube y se carga y se reproduce automáticamente.

Esto se puede hacer en cualquier sitio en realidad con el simple javascript siguiente. https://skipser.googlecode.com/files/gplus-youtubeembed.js

Answer 4

La solución Google Plus es la única forma de mejorar el rendimiento: cargue un stub de imagen y luego cargue el reproductor completo cuando el usuario haga clic.

Sobre la base de la solución de @boscharun aquí está la solución que utilizo:

<style> 
div.video-container a img.playbutton {visibility: hidden; 
    content:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE0AAABNCAQAAABJACE7AAAEvklEQVR4AdyYX0hbVxzHv5CH4kMZVUighTLxKXmMCBGF/MKC26Qy5x6njMEsGCgU8zBQygaDsJVC2IOCoIPhAqtjbFxmXsJl4EPgPpSGhTDSQDPXEbUNRSpGZ/6cwSHk5MaYa8498WGf39sVrt/c8/vz/R38X+mDE4PwwAsfxuEHwY9x+OCFB4Nwog9XjgMuuDEKsoxRuOGCA1fCADwg8Jic2VwyNvKJYvq4cHZULbNatXx2dFwopvMJY2NzaXKmIdGDAfSUWxgB/1cri5mtN8+ZJW+eZ7ZWFuvyRnALPeEmfCDQwmwqVjpgXVE6SMUWZrk8H25CKTfgBYEioV2dSbOrR0Jcnhc3oIgh8K+VTzDb5BP1rzcE21zHMAhkbLC2HD7Lanp0NRyaG5vqDzoC/cGxqdDcaliPZrXDZ6wtxgYXN4zrsIELftDyfDHNzvFiR4tMTIM6xcS0Fnmxw85RTC/P8x7ogiS3QaD4Q1ZrSeq95JpZlJXA5Fppj5mpxR/yv96GBIMgUCrGTJy81KMgmdCjJy+ZiVSM/2VQSlgu3voyZxAkG85g6w/NxbsXx48ynzAn/KN7ILvx6J65OPKJ7o7Vdf6L5bavBUAq4logt93my7ku1y78rTlmrINUhrF+Luf8l2klw7wqm5BMfIuiYE3wah2+ROdfnmc1eWFS4mq8zw11npUEKqZlj1L+WItp/qzDbPWaR1JuG9TLyG23jC/vxbaHFmab24X9qrSq1uZWwgf/BZbJZ+5lEn1Mos+19DhfewdLkZC5pC+KfeP+J4rEmdoU93NtnPAIaFcXs7LTSGKsWvnz1/c+VCHNGRSzdVfnNr2FAZFn1i2DccolY/3td9W2EZ5vAzDhaf60pb3OL2t2/T9/5bBdLKU9Uxp5zHslgcQyklyzliZ4neE5YiOSa+Kn8icO00BfWWQNrIwia6X29++ffSwvbWKaNVhZNA97NyizJaw1qCtpnEo5/Xjkjqw4YdMzWyC40WAUJBZeLSIhjfPvoR596x0ZaVpELNUgjIpLFZqcMR2npDT+6r+++9zekfLriD5wnKDNJTGeQHLSBK+ecifRVYiRtbkEgrOxB4ihntXkpQmqtVz8zkfdSMtqYtCLfcHTPDv1qH1pMi1Zj4pZKnqbt9mjrYZVSBN96revL+dfVsMm7+ZtOI7jAqsTmlMlTWTvt/et3xmaY3WOC8KBjIPOjlidsSnF0jj/7Fi15LEpVufsCIRxcPygapnV6Q/alybTkvuDjRIq8w2LQyCxqDgCvZFWrWU1+uDidzoCYuzxJ1f11V5nvrgLEmH91Xqfa3x8xb/hVSqRaz2rUO6Gf+EZJlGhvetr4oqP5PtaT6bBaVGLiJKSnQbKZ2i1kvlJHKP8DFXuPF49DX8Ksu88FPu106JYY+z7NWUut1L+40f3+yAVLlfpbnDwhG/0yncDmxtV6eDxlyD1G5XNPbRSTv0gjlH9Hiq9ve8bd2dB6rd3m3cepf3YA1Bv7zwkbooqp0++F75f/U2R9P1aIck965Xdr/3XrB0IAAAAMAzyt06jY3zFr2T95T4P+N8N/tryN6q67MU9tK7ITXv/xcLvPH4d85uiWmLlfq1Wf7mVfIVp4HIDzfwP/+fzW/C0yiYAAAAASUVORK5CYII=") 
} 
div.video-container a:hover .playbutton {visibility: visible;} 
</style>    

<div class="video-container"> 
    <a style="position: relative; left: 0; top: 0;" href="https://www.youtube.com/watch?v=IJl2C8QPVjQ&amp;rel=0"> 
    <img src="//img.youtube.com/vi/IJl2C8QPVjQ/0.jpg" style="position: relative; top: 0; left: 0; width:100%; height:auto"> 
    <img class="playbutton" style="position: absolute; top: 50%; left: 50%; margin-left:-38px; margin-top:-38px"> 
    </a> 
</div> 

<script> 
$('.video-container').click(
    function(e){ 
    e.preventDefault(); 
    var imgURL = $(this).find("img").attr('src'); 
    var rx = /\/vi\/([^\/]+)/ 
    var arr = rx.exec(imgURL); 
    var url = "//www.youtube.com/embed/"+arr[1]+"?rel=0&autoplay=1"; 
    $(this).find("img").hide(); 
    $(this).append('<iframe width="100%" height="315" src="'+url+'" frameborder="0" allowfullscreen></iframe>'); 
    } 
); 
</script>      

Usted puede verlo en acción en vivo en: https://www.acls.net/videos.htm

Las características incluyen:

• degrada a IMG si es necesario
• Semántica
• Sensible
• Utiliza jQuery

Answer 5

Puede seguir las instrucciones de: https://varvy.com/pagespeed/defer-videos.html

simplemente en lugar de utilizar el código de la siguiente manera:

<iframe width="560" height="315" src="" data-src="//www.youtube.com/embed/OMOVFvcNfvE" frameborder="0" allowfullscreen></iframe> 

que cambiaría por:

<iframe width="560" height="315" data-src="//www.youtube.com/embed/OMOVFvcNfvE" frameborder="0" allowfullscreen></iframe> 

Porque, el src = "" podría interpretarse como src = "/" en algunos navegadores, que cargará una copia de su sitio en el iframe ...