如何“延迟加载”嵌入式YouTube视频
在本教程中,我将说明如何“延迟加载”多个嵌入式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
如何“延迟加载”嵌入式YouTube视频相关推荐
- 阻止YouTube视频在Firefox中自动播放
It drives me crazy that YouTube videos start playing automatically. It's especially annoying when yo ...
- Google最新论文:Youtube视频推荐如何做多目标排序
作者 | 深度传送门 来源 | 深度传送门(ID:deep_deliver) 导读:本文是"深度推荐系统"专栏的第十五篇文章,这个系列将介绍在深度学习的强力驱动下,给推荐系统工业界 ...
- 如何使YouTube视频连续循环播放
Should you need a YouTube video on a continuous loop, a few methods can help you keep repeating a vi ...
- 在Python中使用Seaborn和WordCloud可视化YouTube视频
I am an avid Youtube user and love watching videos on it in my free time. I decided to do some explo ...
- Youtube视频推荐算法:从10页论文到4页论文的变迁
Youtube视频推荐算法:从10页论文到4页论文的变迁 所以说豆瓣广播是个好东西,长久以来已经怠于主动关注paper的我,每次都能通过我那些专业敬业的友邻们发现有意思的文章或话题,知识因分享而伟大! ...
- 关于嵌入式音视频程序开发的感想
论整体架构来说,嵌入式音视频的程序虽说资源有限,但是功能却一点也不简单,包含有音视频的采集,显示,存储,传输,高级的设备上还包含着一些高级的AI算法比如人脸识别,人形跟踪等等对视频数据进行处理.可以说 ...
- hive尚硅谷实战案例统计youtube视频热度
hive视频热度统计案例 文章目录 hive视频热度统计案例 背景及需求描述 项目的完成 1. 数据清洗 (1) maven依赖 (2)ETLUtils-处理具体的数据清洗逻辑 (3)ETLMappe ...
- 如何设置计划任务程序 每6小时运行一次_如何用 Python 打造一个全自动赚钱的 YouTube 视频发布系统并月入过万(被动收益)
前言 这篇文章将告诉你如何通过Python打造一台全自动发布YouTube视频并专区美元收益的系统. 目前我自己用的这套系统已基本稳定运行了三个月.其中一个YouTube频道从零起步到达到最低开通获利 ...
- Hadoop实战系列之MapReduce 分析 Youtube视频数据
Hadoop实战系列之MapReduce 分析 Youtube视频数据 一.实战介绍 MapReduce 是 Hadoop 的计算框架. 在运行一个 MR 程序时,任务过程被分为两个阶段:Map 阶段 ...
- 基于H.264的嵌入式无线视频监控系统
http://www.eccn.com/design_2012041214510447.htm 1 引言 对图像监控系统,用户常常对使用环境提出一些特殊需求,他们希望能够监控距离比较远的对象,这些对象 ...
最新文章
- could not create cudnn handle: CUDNN_STATUS_INTERNAL_ERROR 错误的解决办法
- python的datetime模块需要装吗,Python datetime模块的介绍(日期格式化 时间戳)
- 【转】你必须了解的Session的本质
- Django笔记-5-视图
- PHP移动互联网开发笔记(3)——运算符
- Controller的返回值
- 一键部署 Spring Boot 到远程 Docker 容器
- c# 溢出抛异常_Rust竟然没有异常处理?
- mac系统如何在当前目录下打开终端
- SAP License:MM学习总结
- jQuery插件之:对话框
- 212.单词搜索II
- 查看Android手机CPU框架信息
- 希捷移动硬盘linux,[转载]强列建议不要买seagate希捷移动硬盘!!!
- 小学班级计算机社团活动章程,小学腾飞电脑小社团活动章程.doc
- 毁人不倦 - 许嵩 - 苏格拉没有底
- Windows10 下面一个非常快速而精悍的看图软件 - IrfanView
- HTML5在vivo手机适配问题
- java 微信公众号之授权登录
- eclipse安装STS支持注意的坑