如何“延迟加载”嵌入式YouTube视频

最新推荐文章于 2026-06-06 11:14:21 发布

翻译最新推荐文章于 2026-06-06 11:14:21 发布 · 1.3k 阅读

标签

#java #js #css #javascript #vue

本教程详细介绍了如何实现延迟加载嵌入的YouTube视频，以改善网页性能。通过在用户点击时才加载视频，减少了HTTP请求和初始加载的数据量，从而优化了用户体验。

在本教程中，我将说明如何“延迟加载”多个嵌入式YouTube视频。这样做将改善我们初始页面加载的性能，并将一些功能移交给用户。

延迟加载

嵌入YouTube视频对于任何与网络相关的人来说已经成为完全正常的过程。复制，粘贴，完成。但是，引入诸如YouTube视频之类的外部资源可能会降低网页的加载性能，尤其是在同一页面上嵌入两个或更多视频的情况下。

通过嵌入视频，我们不仅需要视频文件，还可以请求更多内容。获取了许多资源，包括JavaScript文件，样式表，图像和广告。从下面的屏幕截图中可以看到，两个Youtube视频相当于22个HTTP请求，总共下载了624kb。随着我们在页面上嵌入更多视频，这些数字将不断攀升。

因此，我们不会在页面加载后立即加载Youtube视频，而是会在用户要求时播放视频。此方法通常称为延迟加载 -它将在初始页面加载时最小化HTTP请求，并最终提高页面的性能。

事不宜迟，让我们开始吧。

1. HTML结构

我们从构建HTML开始。这是直截了当的；我们只使用了两个div元素。第一个div将环绕嵌入的Youtube视频，第二个div嵌套在第一个div ，我们将使用它来塑造“ 播放”按钮，以说明这是可播放的视频。

<!-- (1) video wrapper -->
<div class="youtube" data-embed="AqcjdkPMPJA"> 

    <!-- (2) the "play" button -->
	<div class="play-button"></div> 
    
</div>

从上面的代码片段中可以看到，我们在这些div元素中添加了一个class ，并在第一个div添加了data-属性，以指定要嵌入的YouTube视频的ID。

2. CSS

接下来，我们添加样式：

.youtube {
	background-color: #000;
	margin-bottom: 30px;
	position: relative;
	padding-top: 56.25%;
	overflow: hidden;
	cursor: pointer;
}
.youtube img {
	width: 100%;
	top: -16.84%;
	left: 0;
	opacity: 0.7;
}
.youtube .play-button {
	width: 90px;
	height: 60px;
	background-color: #333;
	box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
	z-index: 1;
	opacity: 0.8;
	border-radius: 6px;
}
.youtube .play-button:before {
	content: "";
	border-style: solid;
	border-width: 15px 0 15px 26.0px;
	border-color: transparent transparent transparent #fff;
}
.youtube img,
.youtube .play-button {
	cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
	position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
	top: 50%;
	left: 50%;
	transform: translate3d( -50%, -50%, 0 );
}
.youtube iframe {
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
}

这些样式主要处理：

将（灵活的）视频宽高比保持为16：9，这是YouTube视频的推荐宽高比。为此，我们将第一个div的padding-top设置为56.25％ 。该数字由9除以16得出，然后乘以100％。
将第二个div一个播放按钮，并将其div在第一个div的中心。
放置我们稍后将通过JavaScript获取并添加的YouTube视频图像缩略图的位置。

在这一点上，我们应该看到这些div元素开始类似于典型的在线视频播放器，如下所示：

3. JavaScript

让我们编写脚本以根据data-embed属性中添加的Youtube ID提取图像缩略图。最终，它还将嵌入并在用户单击时播放视频。

图片缩图

首先，我们选择将包裹嵌入式视频的div元素。有youtube类的人。

var youtube = document.querySelectorAll( ".youtube" );

由于我们可能有两个或多个Youtube视频，因此我们将不得不遍历每个选定的元素：

...
for (var i = 0; i < youtube.length; i++) {
	// add the code here
}

接下来，我们将获取并显示Youtube图片缩略图。 Youtube会生成多种图像尺寸，每种尺寸均可通过以下URL访问：

中等品质： https://img.youtube.com/vi/{video-id}/mqdefault.jpg ： https://img.youtube.com/vi/{video-id}/mqdefault.jpg {video-id} /mqdefault.jpg（320×180像素）
高质量： http://img.youtube.com/vi/G0wGs3useV8/hqdefault.jpg ： http://img.youtube.com/vi/G0wGs3useV8/hqdefault.jpg （480×360像素）
标清（SD）： http://img.youtube.com/vi/G0wGs3useV8/sddefault.jpg ： http://img.youtube.com/vi/G0wGs3useV8/sddefault.jpg （640×480像素）
最高分辨率： http://img.youtube.com/vi/G0wGs3useV8/maxresdefault.jpg ： http://img.youtube.com/vi/G0wGs3useV8/maxresdefault.jpg （1920×1080像素）

请注意，我们需要将相应的Youtube视频ID附加到URL。我们已经在data指定了ID，并且可以使用JavaScript .dataset属性来检索它。

// 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"; 

}

从上面的代码中可以看到，由于当今大多数视频都是标清（SD） sdstandard.jpg ，因此我们将显示sdstandard.jpg图片。该图像缩略图尺寸为640×480像素，大小恰到好处；不能太小，也不能太大。您可以选择使用高质量的缩略图图像maxresdefault.jpg ，但是请记住，Youtube视频并不总是以高清（HD）格式出现，因此该特定尺寸可能并不总是可用。

异步加载图像缩略图

异步加载图像缩略图将使页面加载速度更快。如果我们有两个或多个嵌入式YouTube视频，则这些视频的每个图像缩略图将同时加载，因此不会阻止页面渲染流程：

//  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 ) );
}

此代码将从source变量加载图像缩略图。一旦加载，我们将其附加到包装div ：

最后，我们添加脚本的最后一部分。

// 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 );
	} );
}

该脚本专门执行以下操作：

首先，它将click事件附加到包装div并执行附加的匿名函数。
在函数内，我们创建一个iframe元素；我们创建了一个类似YouTube生成的iframe ，以嵌入视频，只是现在我们在URL中插入了autoplay=1 ，以便在设置iframe立即播放视频。
最后，它用 iframe 替换包装div内容。

我们都准备好了。您可以尝试以下演示！

结语

在本教程中，我们学习了如何在用户单击时加载Youtube视频。与必须直接在页面加载时直接拉视频相比，这是一种更快，更节省带宽的方式，尤其是如果您在单个页面上嵌入了多个视频时。

从下面的屏幕快照中可以看到，在初始页面加载期间，我们在HTTP请求数量方面进行了重大改进。在这种情况下，我们将其从22个HTTP请求减少到5个。

下一个

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-lazy-load-embedded-youtube-videos--cms-26743