Question

我正在撰写一篇博文，其中使用了来自YouTube和Yahoo Video的多个视频，但我对该页面呈现所需的时间不满意。除了使用ajax-y方法加载视频外，还有什么技巧可以让来自不同来源的多个视频加快页面加载速度吗？

Answer 1

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

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

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

Answer 2

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

Answer 3

你的“ajax-y方法”将是提高速度的唯一方法。大型网站将使用CDN并具有良好的缓存。大文件无法长时间使用......

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

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

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

Answer 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

Answer 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中......

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

5 个答案: