更快的YouTube嵌入JavaScript

>加快YouTube嵌入使用JavaScript：综合指南

>

键突出显示：

通过使用JavaScript替换标准YouTube嵌入使用轻量级缩略图预览，

大大减少了初始页面加载时间。
使用html5数据属性进行自定义的YouTube视频嵌入以控制自动播放，品牌和控件。
• >通过利用各种YouTube缩略图质量选项来优化视觉吸引力，而无需牺牲负载速度。
>使用纯JavaScript（用于精益，无依赖性方法）或jQuery（对于更简单的编码和更广泛的浏览器兼容性）。
>网站速度至关重要。 带有最小请求的轻量级内容对于积极的用户体验至关重要。 但是，视频对于参与内容至关重要，通常来自YouTube等第三方提供商。 挑战？ 视频大大增加了页面加载时间。 一个嵌入式视频可以生成多个HTTP请求并消耗大量的带宽，即使观众没有积极观看。
• >本文提出了一种缓解此问题的解决方案，灵感来自阿米特·阿加瓦尔（Amit Agarwal）的2013年方法，但通过现代技术增强。 我们将大大减少YouTube视频的初始负载大小。
>

解决方案：

>核心想法是最初显示缩略图预览，而不是完整的视频播放器。 仅当用户点击播放时，JavaScript将用实际播放器动态替代缩略图。 这大大减少了初始页面加载大小。 缩略图是一个较小的图像，很快加载。

增强：

这个改进的版本利用了香草JavaScript和jQuery实现。 它还引入了一个新功能：通过HTML5数据属性自定义YouTube视频参数的能力。 这提供了对播放器设置的细粒度控制，包括：

：（ 0或1）隐藏或显示播放器控件。

>

：（ 0或1）删除YouTube徽标。

• ：（ 0或1）播放后禁用相关的视频建议。controls
• ：（ 0或1）隐藏视频标题和上传器信息。 modestbranding
：（秒）在特定时间开始播放。
• > rel
：（例如，HD720）设置视频质量（如果有）。
• showinfo播放视频时，会自动添加等参数（立即开始播放）和
（在不活动时隐藏控件）。
• start> YouTube缩略图选项：

• YouTube提供了可通过以下网址访问的几个缩略图大小，例如：https://img.youtube.com/vi/<video-id>/<thumbnail-size>.jpg</thumbnail-size></video-id>（或使用i.ytimg.com>作为较短的替代方案）。 选项包括：

  • default.jpg（120x90）
  • hqdefault.jpg（480x360）
  • mqdefault.jpg（320x180）
  • sddefault.jpg（640x480）
  • （1280x720）maxresdefault.jpg

  实现：

  html：> html设置YouTube视频ID，尺寸和（（可选的）自定义参数：>

  > css：

  <div class="youtube" id="fsrJWUVoXeM" style="width: 500px; height: 281px;"></div>
  <div class="youtube" id="lR4tJr7sMPM" data-params="modestbranding=1&showinfo=0&controls=0&vq=hd720" style="width: 640px; height: 360px;"></div>

  > CSS样式的缩略图，将其居中并添加一个播放图标（使用数据URI提高效率）：

  （JavaScript和JQuery实现是简短的，但在原始文章中可用。）

  .youtube { /* ... CSS styles ... */ }
  .youtube .play { /* ... CSS styles ... */ }

  结果和结论： 实施此解决方案可显着改善页面加载时间。 现实世界测试显示HTTP请求和页面大小的大幅减少，从而导致加载时间更快。 该代码可在Codepen上获得实验和改进。 这种简单的代码更改可提高性能，使其成为使用嵌入式YouTube视频的任何网站的宝贵补充。

以上是更快的YouTube嵌入JavaScript的详细内容。更多信息请关注PHP中文网其他相关文章！