尝试在一个页面上加载大量<video>标记

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将视频URL作为数据放在每个图像上，然后在一个通用的单击处理程序中从图像的数据加载适当的视频URL。

Answer 2

多亏了interfect的回答，下面是我想出来的。

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

Answer 3

在没有jQuery的情况下，HTML5已经支持使用poster属性的缩略图预览。不需要隐藏视频。例如：

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