Question

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

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

我不确定应该怎么做。我打算使用jQuery，当用户点击图片时，视频可见，但我不确定当视频设置为隐藏时是否还会尝试加载？

在用户使用jQuery点击图片后，使用视频标记显示视频的最佳方式是什么？

Answer 1

通常，浏览器会在CSS隐藏的元素内部加载资源，以便可以快速取消隐藏它们。如果只想加载命令，则可能需要动态构建元素并仅在需要时将其添加到页面中。类似的东西：

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

将此扩展到多个视频的最简单方法是使用jQuery .data() method将视频网址作为每个图片的数据放入，并将图片数据中的相应视频网址加载到一个通用点击处理程序。

Answer 2

由于缺陷的回答，我提出了这个问题。

$(document).ready(function() {
    $(".thumb").click(function() {
        var value;
        value = $(this).data("video");
        $(this).replaceWith('<video src="'+value+'" controls autoplay></video>');
    });
});

Answer 3

HTML5已经支持使用poster属性而不使用jQuery进行缩略图预览。无需隐藏视频。 e.g。

<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加载它们。

试图在一个页面上加载大量<video>标签</video>

3 个答案: