加载多个嵌入式 Youtube 视频时页面加载性能更好？

Posted 2023-02-16

【中文标题】加载多个嵌入式 Youtube 视频时页面加载性能更好？

【英文标题】：Better page load performance when loading multiple embedded Youtube videos?

【发布时间】：2011-11-27 12:58:24

【问题描述】：

我有一个显示多个（通常是 10 个）嵌入视频的页面。这些视频使用 youtube 的新 IFRAME 嵌入代码，显然对于每个 IFRAME，在加载页面时都有一个单独的请求。有没有办法在加载页面的其余部分后延迟加载视频，这样它们就不会减慢页面加载速度？

【参考方案1】：

好吧，我写了一个 javascript thingy（称为“LYTE”），它将为每个具有特定类（“lyte”）和 id 的 div 创建一个“虚拟播放器”（看起来和感觉就像一个普通的 YouTube 嵌入） YouTube ID。只有在单击“虚拟”播放器时，才会加载实际的 YouTube iframe，它确实对嵌入 YouTube 视频的页面的性能有重要影响。你可以在on my blog看到它。

LYTE 目前还不能真正独立使用，仅作为WP-YouTube-Lyte, the WordPress plugin I wrote 的一部分，但只需进行少量更改，您就可以从插件中提取所有相关代码。

你基本上必须在你的 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)elsewindow.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>

此块将加载 lyte-min.js，它将用虚拟播放器的所有图形元素（图像、播放按钮、控制栏、标题）填充 div，并将触发替换的事件监听器添加到 div单击时带有真正嵌入式播放器的 div。

您可以找到插件here 并查看代码here（wp-youtube-lyte.php 创建 div，lyte/lyte.js 是实际的 javascript ... thingy）。

【讨论】：

非常好，虽然有了这个你必须首先用虚拟玩家写你的帖子，不是吗？因此，如果您已经有数百篇使用 iframe 嵌入 youtube 视频的帖子，则它不是现有帖子的解决方案。

确实，虽然我想应该可以应用一些 javascript-magic 来“捕捉”YouTube-iframe 并将它们替换为 dymmy 播放器？

我不知道，但我突然想到我在自己的网站上运行自己的代码，因此当从数据库。

半官方，在这方面，这是使用 Youtube API 时缩略图 URL 的形式（并在 code.google.com/apis/youtube/2.0/… 上记录）

@Crimbo 上面古代码使用的API，YT已经不再支持，获取title之类的已经不可能了。

【参考方案2】：

查看此解决方案：Load the YouTube Video Player On-Demand

基本上，这就像在单击某些缩略图时将您的 YouTube 视频 iframe 播放器代码替换为 jQuery。

【参考方案3】：

自动，减少请求，解决方案

在 WordPress 插件形式中

这是一个 WordPress 插件，您可以通过 WordPress 插件存储库下载并手动安装。我今天创建这个只是为了处理这种情况。无需更改内容，一旦在任何和所有 iframe 上激活，它就会自动运行。

https://wordpress.org/plugins/lowermedia-iframes-on-demand/

【参考方案4】：

这是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>