1

我正在将大量视频加载到带有视频标签的页面上。问题是所有视频都需要很长时间才能加载，如果您尝试加载特定视频，它可能会等待其他视频在它之前加载，因为有这么多。

我的解决方案是在页面上加载所有这些视频的缩略图，当您单击缩略图时，它会切换到视频并加载视频。

我不确定我应该如何去做。我打算使用 jQuery 并且当用户单击图像时使视频可见但我不确定当视频设置为隐藏时它是否仍会尝试加载？

用户单击带有 jQ​​uery 的图像后，显示带有 video 标签的视频的最佳方式是什么？

4

3 回答 3

2

通常，浏览器确实会在被 CSS 隐藏的元素中加载资源，以便它们可以快速取消隐藏。如果您只想在命令上加载，您可能需要动态构建元素并仅在需要时将其添加到页面中。就像是：

var video = $("<video/>"); 
video.append($("<source/>").attr("src", "video.mp4").attr("type", "video/mp4");
$("#placeholder").html(video);

将其扩展到多个视频的最简单方法是使用jQuery .data() 方法将视频 URL 作为数据放置在每个图像上，并在一个通用单击处理程序中从图像数据中加载适当的视频 URL。

于 2013-06-27T00:02:17.730 回答
2

感谢interfect的回答，这就是我想出的。

$(document).ready(function() {
    $(".thumb").click(function() {
        var value;
        value = $(this).data("video");
        $(this).replaceWith('<video src="'+value+'" controls autoplay></video>');
    });
});
于 2013-06-27T02:25:51.200 回答
0

HTML5 已经支持在没有 jQuery 的情况下使用海报属性的缩略图预览。无需隐藏视频。例如

<video height="200" width="480" poster="http://somesite.com/thumbs/pathtoimage.jpg" preload="none" controls>
    <source src="http://somesite.com/pathto.mp4" type="video/mp4">
    <p class="warning">Your browser does not support HTML5 video.</p>
</video>

如果您有很多视频，那么可能会建议根据需要或在用户滚动时使用 ajax 加载它们等。

于 2013-06-27T00:24:01.450 回答