Sto scrivendo un post sul blog che utilizza più video da YouTube e Yahoo Video, ma non sono contento di quanto tempo impiega la pagina per il rendering. Oltre all'utilizzo di un metodo ajax-y per caricare i video, esistono trucchi che renderebbero la pagina più veloce con più video provenienti da fonti diverse?C'è un modo per caricare i video di YouTube incorporati più velocemente sul mio sito web?
Il tuo "metodo ajax-y" sarà l'unico modo per velocizzarlo. I siti di grandi dimensioni utilizzeranno lo CDN e avranno una buona memorizzazione nella cache. Non c'è modo di evitare che file di grandi dimensioni impieghino molto tempo ...
Mantenere l'oggetto o il tag video fuori dall'HTML e aggiungerlo dopo il caricamento della pagina, migliorerà le prestazioni di carico della pagina percepite. Forse scambia un'immagine di uno schermo con le stesse dimensioni dell'eventuale video ...
Sono i primi giorni per il tag video, ma è possibile che alla fine il tempo di inizializzazione sia più veloce di Flash, poiché fa parte del browser e non un plugin di terze parti.
La maggior parte del tempo di caricamento del video dipende da come il video è stato codificato/trasferito, che è fuori dal tuo controllo, suona come.
Non c'è dubbio che ottenere più video da siti Web diversi richieda tempo. Hai provato a ottenere una copia di quei video, a caricarla sul tuo server web e ad incorporare i tuoi video in questo modo? Può aumentare la velocità di rendering delle tue pagine se i video provengono da un'unica fonte.
Il problema con i video di YouTube incorporati è che il player stesso deve essere caricato. Potresti aggiungere "controls = 2" nell'URL del codice di incorporamento, ma ciò farebbe sì che solo i giocatori di AS2/3 caricheranno il giocatore dopo aver fatto clic.
La soluzione alternativa per questo problema per Google+ non è caricare affatto il lettore. Invece, carica un'immagine in miniatura con un pulsante di riproduzione sovrapposto. Facendo clic, l'immagine viene sostituita con il vero codice di incorporamento iframe del player di YouTube e viene caricata e riprodotta automaticamente.
Questo può essere fatto in qualsiasi sito effettivamente utilizzando il semplice javascript di seguito. https://skipser.googlecode.com/files/gplus-youtubeembed.js
Questo sembra funzionare davvero bene finora. Grazie! – tom
Grazie per aver lavorato su questo. Sto provando la tua correzione a: https://www.acls.net/videos.htm senza alcun risultato. –
La soluzione Google Plus è l'unico modo per migliorare le prestazioni: caricare uno stub immagine, quindi caricare il lettore completo quando l'utente fa clic.
Costruire sulla soluzione da @boscharun ecco la soluzione che uso:
<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&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>
Lo si può vedere in azione dal vivo al: https://www.acls.net/videos.htm
Le caratteristiche includono:
è possibile seguire le istruzioni: https://varvy.com/pagespeed/defer-videos.html
solo invece di utilizzare il codice come questo:
<iframe width="560" height="315" src="" data-src="//www.youtube.com/embed/OMOVFvcNfvE" frameborder="0" allowfullscreen></iframe>
cambierei da:
<iframe width="560" height="315" data-src="//www.youtube.com/embed/OMOVFvcNfvE" frameborder="0" allowfullscreen></iframe>
Perché, src = "" potrebbe essere interpretato come src = "/" su alcuni browser, che caricheranno una copia del tuo sito nell'iframe ...
Grazie per il suggerimento, chutsu. È un buon punto, ma sfortunatamente, non penso che sarà possibile ottenere copie diverse dal semplice incorporamento dei video. – VirtuosiMedia
Perché no? Puoi scaricare i video flash con il plugin firefox "FlashGot" (usa il buon vecchio google per maggiori informazioni su come scaricare i video "flv"). E incorporare il video flv sul tuo sito web. – chutsu
Non penso che mettere tutti i media sullo stesso server lo renderebbe più veloce. La maggior parte dei grandi siti inserisce immagini e altri contenuti statici in un altro host per migliorare la velocità. Il motivo principale è perché i browser hanno un numero massimo di connessioni simultanee a un singolo host. E se il server di YouTube può essere più veloce del tuo server. –