0

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

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

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

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

一些嵌入视频代码：

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

2 回答 2

2

另一种方法是让您的页面充满各种视频的缩略图截图。当有人点击特定的屏幕截图图像时，激活一个显示该特定视频的弹出窗口。这减轻了加载时间的压力，您可以对给定页面中的许多视频执行此操作。

于 2013-03-22T12:46:48.720 回答
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.

于 2013-03-22T12:48:21.827 回答