Tengo una página que muestra varios videos (generalmente 10) incrustados. Los videos usan el nuevo código de inserción de IFRAME de youtube y aparentemente para cada IFRAME hay una solicitud por separado al cargar la página. ¿Hay alguna manera de diferir la carga de los videos después de que se cargue el resto de la página, para que no ralenticen tanto la carga de la página?¿Mejor rendimiento de carga de página al cargar varios videos de YouTube integrados?
Respuesta
Bueno, escribí un javascript thingy (llamado "LYTE") que creará un "dummy player" (que parece & se siente como un YouTube insertado) por cada div con una clase específica ("lyte") y id con el ID de YouTube. Solo cuando se hace clic en el reproductor "ficticio", se carga el actual iframe de YouTube y, de hecho, tiene un impacto importante en el rendimiento de las páginas que incorporan videos de YouTube. Puede verlo en acción on my blog.
LYTE actualmente no está realmente disponible de forma independiente, solo como parte de WP-YouTube-Lyte, the WordPress plugin I wrote, pero con cambios mínimos, debe poder extraer todo el código relevante del complemento.
Básicamente tienes que crear algo como esto en tu HTML;
<div class="lyte" id="7nuiOe8M6bw" style="width:640px;height:385px;">
<script type="text/javascript"><!--
var nT='newtube-';var bU='http://static.blog.futtta.be/wp-content/plugins/wp-youtube-lyte/lyte/';
var d=document;if(d.addEventListener){d.addEventListener('DOMContentLoaded', insert, false)}else{window.onload=insert}
function insert(){if(!d.getElementById('lytescr')){lytescr=d.createElement('script');lytescr.async=true;lytescr.id='lytescr';lytescr.src='http://static.blog.futtta.be/wp-content/plugins/wp-youtube-lyte/lyte/lyte-min.js';h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(lytescr, h)}};
--></script></div>
Este bloque se carga Lyte-min.js, que llenará el div con todos los elementos gráficos del jugador ficticio (imagen, botón de reproducción, la barra de control, título) y añadirá un EventListener a la div que activará el reemplazo del div con el jugador real insertado cuando se haga clic.
Puede encontrar el complemento here y mirar el código here (wp-youtube-lyte.php crea el div, lyte/lyte.js es el javascript real ... thingy).
Salida esta solución: Load the YouTube Video Player On-Demand
Básicamente, es como la sustitución de los códigos jugador iframe de vídeo de YouTube con jQuery al hacer clic en algunas miniaturas.
automática, solicitar la reducción, la solución
En WordPress plugin de forma
Aquí es un plugin de WordPress se puede descargar e instalar manualmente a través del plugin de WordPress repositorio. Creé esto hoy solo para manejar esta situación. No se necesitan cambios en el contenido, esto funciona automáticamente una vez activado en cualquiera y todos los iframes.
Esta es una jsfiddle demo.
HTML
<div class="youtube-container">
<div class="youtube-player" data-id="1y6smkh6c-0"></div>
</div>
Javascript
(function() {
var v = document.getElementsByClassName("youtube-player");
for (var n = 0; n < v.length; n++) {
var p = document.createElement("div");
p.innerHTML = labnolThumb(v[n].dataset.id);
p.onclick = labnolIframe;
v[n].appendChild(p);
}
})();
function labnolThumb(id) {
return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';
}
function labnolIframe() {
var iframe = document.createElement("iframe");
iframe.setAttribute("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("id", "youtube-iframe");
this.parentNode.replaceChild(iframe, this);
}
CSS
<style>
.youtube-container { display: block; margin: 20px auto; width: 100%; max-width: 600px; }
.youtube-player { display: block; width: 100%; /* assuming that the video has a 16:9 ratio */ padding-bottom: 56.25%; overflow: hidden; position: relative; width: 100%; height: 100%; cursor: hand; cursor: pointer; display: block; }
img.youtube-thumb { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; height: auto }
div.play-button { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url("http://i.imgur.com/TxzC70f.png") no-repeat; }
#youtube-iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
</style>
- 1. ¿Cómo reproducir videos de YouTube sincronizados en varios clientes?
- 2. API de Zend Youtube: ¿cargar videos en una sola cuenta?
- 3. Anotando videos de YouTube programáticamente
- 4. Videos de youtube incrustados bloqueados por administradores de red que detienen la carga de la página web
- 5. ¿Hay alguna manera de cargar videos de YouTube incrustados más rápido en mi sitio web?
- 6. Videos de YouTube dentro de la aplicación UITableView iPhone
- 7. mediaelement.js ¿Varios videos en la misma página?
- 8. Reproducción de videos de youtube en phonegap
- 9. Lista de YouTube Player API con videos
- 10. Escenario de usuario único de API de Youtube con OAuth (carga de videos)
- 11. Reproducción de videos de youtube en la aplicación de Android
- 12. Descargando videos de Youtube con PHP
- 13. ¿Cómo hacer miniaturas de videos de YouTube en Android?
- 14. Obtén los últimos videos de youtube de un usuario?
- 15. Reproductor de video HTML5: cargar videos dinámicamente
- 16. La mejor manera de cargar varios archivos desde un navegador
- 17. ¿Cómo reproducir videos MP4 desde Youtube?
- 18. Youtube Player API ocultar controles, ocultar información, ocultar videos relacionados?
- 19. que es mejor? JMF o VLCJ. especialmente para la transmisión de videos de youtube
- 20. Integración con la API de YouTube ASP.NET: carga de video con una sola página
- 21. Cómo detectar videos bloqueados de youtube a través de javascript
- 22. Vídeos de inicio automático + ciclo Videos de YouTube
- 23. Cómo obtener la URL directa de los videos de youtube
- 24. Rendimiento de los clasificadores de colecciones .NET integrados
- 25. Videos útiles en YouTube para aprender programación
- 26. Reproducir videos de youtube en pantalla completa auto
- 27. Filepicker.io - conversiones de imágenes que previenen la carga de videos
- 28. Cargar varios archivos con md5 verificar antes de cargar
- 29. Combinar varios videos en un
- 30. Rendimiento lento de WPF en gráficos integrados GMA 500
muy agradable, aunque con esto se tiene que escribir sus mensajes con la du mmy jugador en primer lugar, ¿no?Por lo tanto, no es una solución para las publicaciones existentes si ya tienes cientos de publicaciones con videos de youtube insertados que usan iframes. – Tom
De hecho, aunque supongo que debería ser posible aplicar algo de javascript-magic para "atrapar" los iframes de YouTube y reemplazarlos por un jugador de dymmy? – futtta
No lo sé, pero se me ocurrió que ejecutaba mi propio código en mi sitio, así que no es tan difícil reemplazar iframes de youtube en publicaciones con implementaciones ficticias cuando se lee el HTML de la base de datos. – Tom