Share
En este tutorial, explicaré cómo “cargar de forma perezosa” varios videos incrustados de YouTube. Al hacerlo, se mejorará el rendimiento de nuestra carga de página inicial y se entregará algo de poder al usuario.
Incrustar un video de Youtube se ha convertido en un proceso completamente normal para cualquier persona involucrada en la web; copiar, pegar, listo. Sin embargo, la introducción de un recurso externo como un video de Youtube puede ralentizar el rendimiento de carga de una página web, especialmente si hay dos o más videos incrustados en la misma página.
Al incrustar videos, solicitamos más que solo un archivo de video. Se recuperan varios recursos, incluidos archivos JavaScript, una hoja de estilo, imágenes y anuncios. Y como puede ver en la captura de pantalla a continuación, dos videos de Youtube equivalen a 22 solicitudes HTTP con un total de 624kb descargados. Estos números subirán a medida que incrustemos más videos en la página..
Número total de solicitudes HTTP realizadas al incrustar dos videosEntonces, en lugar de cargar el video de Youtube tan pronto como se carga la página, vamos a tirar y reproducir el video cuando el usuario lo solicite. Este método es conocido popularmente como carga lenta-Minimizará las solicitudes HTTP en la carga inicial de la página y, en última instancia, mejorará el rendimiento de la página..
Sin más preámbulos, comencemos..
Comenzamos con la construcción del HTML. Esto es sencillo; estamos usando sólo dos div elementos. El primero div se envolverá alrededor del video incrustado de Youtube, el segundo div esta anidado en el primero div, y lo usaremos para dar forma al Jugar botón para ilustrar que este es un video jugable.
Como puede ver en el fragmento de código anterior, hemos agregado un clase a estos div elementos y un datos- atribuir a la primera div para especificar el ID del video de Youtube vamos a incrustar.
A continuación, añadimos los estilos:
.youtube color de fondo: # 000; margen inferior: 30px; posición: relativa; relleno superior: 56,25%; desbordamiento: oculto; cursor: puntero; .youtube img ancho: 100%; superior: -16.84%; izquierda: 0; opacidad: 0.7; .youtube .play-button ancho: 90px; altura: 60px; color de fondo: # 333; box-shadow: 0 0 30px rgba (0,0,0,0.6); índice z: 1; opacidad: 0,8; radio del borde: 6px; .youtube .play-button: antes de contenido: ""; estilo de borde: sólido; ancho del borde: 15px 0 15px 26.0px; color del borde: transparente transparente transparente #fff; .youtube img, .youtube .play-button cursor: puntero; .youtube img, .youtube iframe, .youtube .play-button, .youtube .play-button: antes de posición: absoluta; .youtube .play-button, .youtube .play-button: antes de top: 50%; izquierda: 50%; transformar: translate3d (-50%, -50%, 0); .youtube iframe altura: 100%; ancho: 100%; arriba: 0; izquierda: 0;
Estos estilos tratan principalmente con:
Accentsconagua
acolchado superior de los primeros div a 56.25%. Este número se deriva de dividir 9 por 16 y multiplica la resultante al 100%.div a un botón de reproducción y posicionándolo en el centro de la primera div.En este punto, deberíamos ver estos div Los elementos comienzan a parecerse a un reproductor de video en línea típico, de la siguiente manera:
Al hacer clic en el botón de reproducción no se reproduce un video. Es una imagen. Escribamos guiones para obtener la miniatura de la imagen basada en la ID de Youtube agregada en el incrustación de datos atributo. En última instancia, también incrustará y reproducirá el video cuando el usuario haga clic..
Para empezar, seleccionamos la div Elementos que envolverán el video incorporado; los que tienenYoutube clase.
var youtube = document.querySelectorAll (".youtube"); Como es posible que tengamos dos o más videos de Youtube, tendremos que recorrer cada uno de los elementos seleccionados:
… Para (var i = 0; i < youtube.length; i++) // add the code here
A continuación, recuperaremos la miniatura de la imagen de Youtube y la mostraremos. Youtube genera múltiples tamaños de imagen, cada uno de ellos accesible a través de las siguientes URL:
http://img.youtube.com/vi/video-id/mqdefault.jpg (320 × 180 píxeles)http://img.youtube.com/vi/G0wGs3useV8/hqdefault.jpg (480 × 360 píxeles)http://img.youtube.com/vi/G0wGs3useV8/sddefault.jpg (640 × 480 píxeles)http://img.youtube.com/vi/G0wGs3useV8/maxresdefault.jpg (1920 × 1080 píxeles)Tenga en cuenta que necesitamos el ID de video de Youtube correspondiente para adjuntarlo a la URL. Hemos especificado el ID en datos, y podemos recuperarlo usando el JavaScript .conjunto de datos propiedad.
// loop for (var i = 0; i < youtube.length; i++) // thumbnail image source. var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";
Como se puede ver en el código anterior, mostraremos sdstandard.jpg Imagen, ya que la mayoría de los videos de hoy vienen en definición estándar (SD). Llegando a 640 × 480 píxeles, esta miniatura de la imagen tiene el tamaño correcto; no demasiado pequeño, ni demasiado grande. Puedes optar por la imagen en miniatura de alta calidad., maxresdefault.jpg, en cambio, pero tenga en cuenta que el video de Youtube no siempre viene en Alta definición (HD), por lo que es posible que este tamaño en particular no esté siempre disponible.
Cargar la miniatura de la imagen de forma asíncrona permitirá que la página se cargue más rápido. En caso de que tengamos dos o más videos incrustados en Youtube, cada miniatura de imagen de estos videos se cargará simultáneamente para que no impidan el flujo de representación de la página:
// loop for (var i = 0; i < youtube.length; i++) … // Load the image asynchronously var image = new Image(); image.src = source; image.addEventListener( "load", function() youtube[ i ].appendChild( image ); ( i ) );
Este código cargará la imagen en miniatura de la fuente variable. Una vez cargado, lo añadimos a la envoltura. div:
Pausa Fest 2016 Kickoff en Envato. Todavia una imagen.Por último, añadimos la última pieza del guión..
// loop for (var i = 0; i < youtube.length; i++) … youtube[i].addEventListener( "click", function() var iframe = document.createElement( "iframe" ); iframe.setAttribute( "frameborder", "0" ); iframe.setAttribute( "allowfullscreen", "" ); iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" ); this.innerHTML = ""; this.appendChild( iframe ); );
Este script hace específicamente las siguientes cosas:
hacer clic evento a la envoltura div así como ejecutar la función anónima adjunta..iframe elemento; creamos un similar iframe que genera YouTube para incrustar un video, excepto que ahora insertamos el reproducción automática = 1 en la URL para reproducir inmediatamente el video cuando el iframe Está establecido.div contento con el iframe.Estamos todos listos. Puedes probar la siguiente demo!
En este tutorial, aprendimos cómo cargar un video de Youtube con el clic del usuario. Esto es más rápido y una forma más eficiente de ancho de banda que tener que arrastrar videos directamente junto con la carga de la página, especialmente si tiene varios videos incrustados en una sola página..
Y como puede ver en la siguiente captura de pantalla, hemos logrado una mejora significativa en cuanto al número de solicitudes HTTP realizadas durante la carga de la página inicial. En este caso, lo hemos recortado. de 22 a 5 peticiones HTTP.
En el siguiente tutorial, mejoraremos nuestro código envolviéndolo como un "Componente Web". Si lo hace, nos permitirá incrustar el video de Youtube de manera más elegante a través de un elemento denominado personalizado. En lugar de agregar dos div Como hicimos en este tutorial, simplemente podemos agregar, por ejemplo,,
