Czy istnieje sposób na szybsze ładowanie osadzonych filmów z YouTube w mojej witrynie?

Question

Piszę wpis na blogu, który wykorzystuje wiele filmów z YouTube i Yahoo Video, ale nie jestem zadowolony z czasu, jaki zajmuje renderowanie strony. Oprócz zastosowania metody ajax-y do ładowania filmów, czy są jakieś sztuczki, które spowodowałyby szybsze wczytywanie strony w przypadku wielu filmów z różnych źródeł?

Answer 1

Twoja "metoda ajax-y" to jedyny sposób, aby to przyspieszyć. Duże witryny będą korzystać z CDN i mają dobre buforowanie. Nie ma sposobu, aby duże pliki zabierały dużo czasu ...

Utrzymanie obiektu lub tagu wideo poza kodem HTML, a następnie dodanie go po wczytaniu strony, poprawi postrzeganą wydajność ładowania strony. Być może zamienić obraz ekranowy, który ma taki sam rozmiar jak ewentualne wideo ...

Wcześnie za tag wideo, ale możliwe, że w końcu czas inicjalizacji będzie szybszy niż Flash, ponieważ jest częścią przeglądarki a nie wtyczką 3rd party.

Większość czasu ładowania wideo zależy od sposobu zakodowania/przesłania filmu, który jest poza kontrolą użytkownika.

Answer 2

Nie ma wątpliwości, że pobieranie wielu filmów z różnych stron internetowych wymaga czasu. Czy próbowałeś uzyskać kopię tych filmów, przesłać je na swój serwer sieciowy i osadzać w ten sposób swoje filmy? Może to zwiększyć szybkość wyświetlania twoich stron, jeśli filmy pochodzą z jednego źródła.

Answer 3

Problem z osadzonymi filmami z YouTube polega na tym, że sam odtwarzacz musi się wczytać. Możesz dodać "controls = 2" w adresie URL kodu do osadzania, ale to spowoduje, że tylko gracze AS2/3 będą ładować odtwarzacz po kliknięciu.

W przypadku tego problemu obejście tego problemu nie polega na załadowaniu odtwarzacza. Zamiast tego ładuje miniaturę z nałożonym przyciskiem odtwarzania. Po kliknięciu obraz zostaje zastąpiony rzeczywistym kodem osadzania iframe w odtwarzaczu YouTube i ładuje się i automatycznie odtwarza.

Można to zrobić na dowolnej stronie, używając prostego kodu javascript poniżej. https://skipser.googlecode.com/files/gplus-youtubeembed.js

Answer 4

Rozwiązanie Google Plus to jedyny sposób na zwiększenie wydajności: wczytaj kod obrazka, a następnie załaduj pełny odtwarzacz, gdy użytkownik kliknie.

Opierając się na rozwiązanie z @boscharun tutaj jest rozwiązanie używam:

<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>      

Można go zobaczyć w akcji na żywo pod adresem: https://www.acls.net/videos.htm

Funkcje obejmują:

• pogarszają się IMG w razie potrzeby
• Semantic
• Responsive
• Używa jQuery

Answer 5

Można postępować zgodnie z instrukcjami z: https://varvy.com/pagespeed/defer-videos.html

tylko zamiast za pomocą kodu:

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

chciałbym zmienić przez:

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

Ponieważ, src = "" może być interpretowane jako src = "/" w niektórych przeglądarkach, które załadują kopię Twojej witryny do elementu iframe ...