Question

我制作了一个充满了来自youtube和vimeo的嵌入视频的页面。负载时间太可怕了！它使我的笔记本电脑完全冻结，直到它们都已正确加载。

我在另一篇文章中看到，这样做的方法是将对象或视频标记保留在HTML之外，然后在页面加载后添加它。从那以后我一直试图弄清楚如何做到这一点，但没有运气！

我也在其他网站上看到他们在标签后面有一个加载gif，直到视频完全显示。

关于如何使用这些或其他方法的任何建议都会很棒！

有些嵌入了视频代码：

<iframe src="http://player.vimeo.com/video/57564747" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

Answer 1

另一种方法是让您的网页上显示各种视频的缩略图图片截图。当有人点击特定的屏幕截图图像时，请激活显示该特定视频的弹出窗口。这样可以减轻您的加载时间，并且您可以为给定页面中的大量视频执行此操作。

Answer 2

我建议只在需要时加载它们。

将虚拟图片放在视频所在的位置。如果单击图片，请通过jQuery或JS加载内容。

<div id='video-anchor'>
    <img id='dummy' src='http://b.vimeocdn.com/ts/403/127/403127670_960.jpg' alt='' />
</div>


$('#dummy').click(function() {
    $('#video-anchor').html(
         '<iframe src="http://player.vimeo.com/video/57564747" 
          width="500" 
          height="281" 
          frameborder="0" 
          webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    ');
});

您可以获取vimeo使用的图像。它们被设置为div.vimeo_holder的背景图像。

如何在页面完全加载之前将对象/视频标记保留在HTML之外？

2 个答案: