Gibt es eine Möglichkeit, eingebettete YouTube-Videos schneller auf meiner Website zu laden?

Question

Ich schreibe einen Blogpost, der mehrere Videos von YouTube und Yahoo Video verwendet, aber ich bin nicht zufrieden damit, wie lange es dauert, die Seite zu rendern. Gibt es neben der Verwendung einer Ajax-y-Methode zum Laden der Videos auch Tricks, die das Laden der Seite mit mehreren Videos aus verschiedenen Quellen beschleunigen?

Answer 1

Nur Ihre "Ajax-y-Methode" wird dies beschleunigen. Große Seiten werden eine CDN verwenden und gute Zwischenspeicherung haben. Lange Dateien werden nicht lange benötigt ...

Wenn Sie das Objekt oder den Video-Tag aus dem HTML-Code heraushalten und dann nach dem Laden der Seite hinzufügen, verbessert sich die wahrgenommene Leistung beim Laden der Seite. Vielleicht tauschen Sie ein Screengrab-Bild aus, das die gleiche Größe wie das Video hat ...

Es ist zu früh für das Video-Tag, aber es ist möglich, dass die Initialisierungszeit schneller ist als Flash, da es Teil des Browsers ist und kein Plugin von Drittanbietern.

Der Großteil der Video-Ladezeit hängt davon ab, wie das Video codiert/übertragen wurde, das sich außerhalb Ihrer Kontrolle befindet, klingt wie.

Answer 2

Es ist keine Frage, mehrere Videos von verschiedenen Websites braucht Zeit. Hast du versucht, eine Kopie dieser Videos zu erhalten, sie auf deinen Webserver hochzuladen und deine Videos so einzubetten? Es kann die Wiedergabegeschwindigkeit Ihrer Seiten erhöhen, wenn die Videos aus einer einzigen Quelle stammen.

Answer 3

Das Problem mit eingebetteten YouTube-Videos ist, dass der Player selbst geladen werden muss. Sie könnten "controls = 2" in die URL des Embedding-Codes einfügen, aber das würde nur AS2/3-Player zum Laden des Players nach dem Klicken veranlassen.

Die Problemumgehung von Google+ für dieses Problem besteht darin, den Player überhaupt nicht zu laden. Stattdessen wird ein Miniaturbild mit einer überlagerten Wiedergabetaste geladen. Beim Klicken wird das Bild durch den tatsächlichen iframe-Einbettungscode des YouTube-Players ersetzt und geladen und automatisch abgespielt.

Dies kann in jeder Website tatsächlich mit dem einfachen Javascript unten getan werden.

Answer 4

Die Google Plus-Lösung ist die einzige Möglichkeit, die Leistung zu verbessern: laden Sie einen Image-Stub und laden Sie dann den vollständigen Player, wenn der Benutzer klickt.

Aufbauend auf der Lösung von @boscharun hier ist die Lösung, die ich verwende:

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

Sie können es in Aktion sehen, live bei: https://www.acls.net/videos.htm

Eigenschaften umfassen:

• Vermindert zu IMG falls erforderlich
• Semantic
• Responsive
• Verwendet jQuery

Answer 5

Sie den Anweisungen folgen: https://varvy.com/pagespeed/defer-videos.html

nur statt mit dem Code wie folgt aus:

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

Ich würde ändern:

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

Weil das src = "" in einigen Browsern als src = "/" interpretiert werden kann, was eine Kopie Ihrer Site in den iframe lädt ...