有没有办法在我的网站上更快地加载嵌入的 YouTube 视频？答案

【问题标题】：Is there a way to load embedded YouTube videos faster on my website?有没有办法在我的网站上更快地加载嵌入的 YouTube 视频？
【发布时间】：2010-11-19 02:27:46
【问题描述】：

我正在撰写一篇博客文章，其中使用了来自 YouTube 和 Yahoo Video 的多个视频，但我对渲染页面需要多长时间并不满意。除了使用 ajax-y 方法加载视频之外，还有什么技巧可以让来自不同来源的多个视频更快地加载页面？

【问题讨论】：

标签： javascript optimization video

【解决方案1】：

毫无疑问，从不同网站获取多个视频需要时间。您是否尝试过获取这些视频的副本，将其上传到您的网络服务器并以这种方式嵌入您的视频？如果视频来自单一来源，它可能会提高页面的渲染速度。

【讨论】：

谢谢你的建议，chutsu。这是一个很好的观点，但不幸的是，除了嵌入视频之外，我认为不可能获得副本。
为什么不呢？您可以使用 firefox 插件“FlashGot”下载 Flash 视频（使用好的旧 google 获取有关如何下载“flv”视频的更多信息）。并将 flv 视频嵌入您的网站。
我不认为将所有媒体放在同一台服务器上会使其更快。大多数大型网站将图像和其他静态内容放在另一个主机中以提高速度。主要原因是浏览器有最大数量的同时连接到单个主机。如果 YouTube 服务器可以比你的服务器更快。

【解决方案2】：

您的“ajax-y 方法”将是加快速度的唯一方法。大型站点将使用CDN 并具有良好的缓存。没有办法解决需要很长时间的大文件...

将对象或视频标签保留在 HTML 之外，然后在页面加载后添加，将提高感知的页面加载性能。也许换出与最终视频大小相同的截屏图像...

视频标签还处于早期阶段，但最终它的初始化时间可能会比 Flash 快，因为它是浏览器的一部分，而不是第 3 方插件。

大部分视频加载时间取决于视频的编码/传输方式，这听起来是您无法控制的。

【讨论】：

【解决方案3】：

嵌入式 YouTube 视频的问题在于播放器本身需要加载。您可以在嵌入代码的 URL 中添加“controls=2”，但这只会让 AS2/3 播放器在点击后加载播放器。

Google+ 针对此问题的解决方法是根本不加载播放器。相反，它会加载一个叠加了播放按钮的缩略图。点击后，图片会替换为实际的 YouTube 播放器 iframe 嵌入代码，并会加载并自动播放。

这可以在任何实际使用下面简单的 javascript 的站点中完成。 https://skipser.googlecode.com/files/gplus-youtubeembed.js

【讨论】：

感谢您为此工作。我正在尝试您的解决方法：acls.net/videos.htm 无济于事。
链接坏了！

【解决方案4】：

Google Plus 解决方案是提高性能的唯一方法：加载图像存根，然后在用户点击时加载完整的播放器。

在@boscharun 的解决方案的基础上，这是我使用的解决方案：

<style>
div.video-container a img.playbutton {visibility: hidden;
  content:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE0AAABNCAQAAABJACE7AAAEvklEQVR4AdyYX0hbVxzHv5CH4kMZVUighTLxKXmMCBGF/MKC26Qy5x6njMEsGCgU8zBQygaDsJVC2IOCoIPhAqtjbFxmXsJl4EPgPpSGhTDSQDPXEbUNRSpGZ/6cwSHk5MaYa8498WGf39sVrt/c8/vz/R38X+mDE4PwwAsfxuEHwY9x+OCFB4Nwog9XjgMuuDEKsoxRuOGCA1fCADwg8Jic2VwyNvKJYvq4cHZULbNatXx2dFwopvMJY2NzaXKmIdGDAfSUWxgB/1cri5mtN8+ZJW+eZ7ZWFuvyRnALPeEmfCDQwmwqVjpgXVE6SMUWZrk8H25CKTfgBYEioV2dSbOrR0Jcnhc3oIgh8K+VTzDb5BP1rzcE21zHMAhkbLC2HD7Lanp0NRyaG5vqDzoC/cGxqdDcaliPZrXDZ6wtxgYXN4zrsIELftDyfDHNzvFiR4tMTIM6xcS0Fnmxw85RTC/P8x7ogiS3QaD4Q1ZrSeq95JpZlJXA5Fppj5mpxR/yv96GBIMgUCrGTJy81KMgmdCjJy+ZiVSM/2VQSlgu3voyZxAkG85g6w/NxbsXx48ynzAn/KN7ILvx6J65OPKJ7o7Vdf6L5bavBUAq4logt93my7ku1y78rTlmrINUhrF+Luf8l2klw7wqm5BMfIuiYE3wah2+ROdfnmc1eWFS4mq8zw11npUEKqZlj1L+WItp/qzDbPWaR1JuG9TLyG23jC/vxbaHFmab24X9qrSq1uZWwgf/BZbJZ+5lEn1Mos+19DhfewdLkZC5pC+KfeP+J4rEmdoU93NtnPAIaFcXs7LTSGKsWvnz1/c+VCHNGRSzdVfnNr2FAZFn1i2DccolY/3td9W2EZ5vAzDhaf60pb3OL2t2/T9/5bBdLKU9Uxp5zHslgcQyklyzliZ4neE5YiOSa+Kn8icO00BfWWQNrIwia6X29++ffSwvbWKaNVhZNA97NyizJaw1qCtpnEo5/Xjkjqw4YdMzWyC40WAUJBZeLSIhjfPvoR596x0ZaVpELNUgjIpLFZqcMR2npDT+6r+++9zekfLriD5wnKDNJTGeQHLSBK+ecifRVYiRtbkEgrOxB4ihntXkpQmqtVz8zkfdSMtqYtCLfcHTPDv1qH1pMi1Zj4pZKnqbt9mjrYZVSBN96revL+dfVsMm7+ZtOI7jAqsTmlMlTWTvt/et3xmaY3WOC8KBjIPOjlidsSnF0jj/7Fi15LEpVufsCIRxcPygapnV6Q/alybTkvuDjRIq8w2LQyCxqDgCvZFWrWU1+uDidzoCYuzxJ1f11V5nvrgLEmH91Xqfa3x8xb/hVSqRaz2rUO6Gf+EZJlGhvetr4oqP5PtaT6bBaVGLiJKSnQbKZ2i1kvlJHKP8DFXuPF49DX8Ksu88FPu106JYY+z7NWUut1L+40f3+yAVLlfpbnDwhG/0yncDmxtV6eDxlyD1G5XNPbRSTv0gjlH9Hiq9ve8bd2dB6rd3m3cepf3YA1Bv7zwkbooqp0++F75f/U2R9P1aIck965Xdr/3XrB0IAAAAMAzyt06jY3zFr2T95T4P+N8N/tryN6q67MU9tK7ITXv/xcLvPH4d85uiWmLlfq1Wf7mVfIVp4HIDzfwP/+fzW/C0yiYAAAAASUVORK5CYII=")
}
div.video-container a:hover .playbutton {visibility: visible;}
</style>              

<div class="video-container">
  <a style="position: relative; left: 0; top: 0;" href="https://www.youtube.com/watch?v=IJl2C8QPVjQ&amp;rel=0">
    <img src="//img.youtube.com/vi/IJl2C8QPVjQ/0.jpg" style="position: relative; top: 0; left: 0; width:100%; height:auto">
    <img class="playbutton" style="position: absolute; top: 50%; left: 50%; margin-left:-38px; margin-top:-38px">
  </a>
</div>

<script>
$('.video-container').click(
  function(e){
    e.preventDefault(); 
    var imgURL = $(this).find("img").attr('src');
    var rx = /\/vi\/([^\/]+)/
    var arr = rx.exec(imgURL);
    var url = "//www.youtube.com/embed/"+arr[1]+"?rel=0&autoplay=1";
    $(this).find("img").hide();
    $(this).append('<iframe width="100%" height="315" src="'+url+'" frameborder="0" allowfullscreen></iframe>');
  }
);
</script>

你可以在https://www.acls.net/videos.htm看到它的实际效果

功能包括：

必要时降级为 IMG
语义
响应式
使用 jQuery

【讨论】：

这个方案不合适，有很多问题。如果您一次又一次地单击它，播放按钮的叠加将多次加载相同的视频。相同的视频会重复
解决方案是“加载一个图像存根，然后在用户点击时加载完整的播放器”，这是合适的。如有必要，您需要调整实现以避免多次点击或其他情况。

【解决方案5】：

您可以按照以下说明进行操作： https://varvy.com/pagespeed/defer-videos.html

只是不使用这样的代码：

<iframe width="560" height="315" src="" data-src="//www.youtube.com/embed/OMOVFvcNfvE" frameborder="0" allowfullscreen></iframe>

我会改变：

<iframe width="560" height="315" data-src="//www.youtube.com/embed/OMOVFvcNfvE" frameborder="0" allowfullscreen></iframe>

因为，在某些浏览器上，src="" 可能会被解释为 src="/"，这会将您网站的副本加载到 iframe 中...

【讨论】：