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

问题描述：

我正在写一篇博客文章，使用来自YouTube和雅虎视频的多个视频，但我不满意页面呈现需要多长时间。除了使用ajax-y方法加载视频之外，是否有任何技巧可以使来自不同来源的多个视频加载网页的速度更快？有没有办法在我的网站上更快地加载嵌入的YouTube视频？

答

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

保持对象或视频标记不在HTML中，然后在页面加载后添加它，将会提高感知的页面加载性能。也许换出一个与最终视频尺寸相同的屏幕抓图像...

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

视频加载时间的大部分取决于视频编码/传输的方式，这超出了您的控制范围，听起来像。

答

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

感谢您的建议，chutsu。这是一个好点，但不幸的是，我认为除了嵌入视频之外，我不认为有可能获得副本。 – VirtuosiMedia 2009-08-12 21:10:45

为什么不呢？您可以使用firefox插件“FlashGot”下载Flash视频（使用好的旧谷歌了解如何下载'flv'视频的更多信息）。并在您的网站上嵌入flv视频。 – chutsu 2009-08-12 21:24:27

我不认为把所有媒体放在同一台服务器上会让它更快。大多数大型网站都会将图像和其他静态内容放入另一台主机中以提高速度。主要原因是因为浏览器对单个主机有最大数量的同时连接。如果YouTube服务器可以比你的服务器更快。 – 2009-08-12 21:53:44

答

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

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

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

迄今为止，这似乎工作得很好。谢谢！ – tom 2013-04-30 02:57:08

感谢您为此工作。我正在尝试修复：https：//www.acls.net/videos.htm，但无济于事。 – 2013-11-14 14:37:21

答

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

答

您可以按照从指令： https://varvy.com/pagespeed/defer-videos.html

只是，而不是使用这样的代码：

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

：

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

我会被改变

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

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

相关推荐