在一页中加载多个视频

Question

我在加载页面时收到 40 个视频并使用 foreach 循环进行显示，下面是我显示视频的 html 代码

<div id="videosList">
  <div class="video" data-id="{{$i}}">
     <div class="videoSlate">
         <video id="videoDiv{{$i}}" class="thevideo" 
             preload="metadata"
             poster="/{{$postDetails->video_thumbnail}}" loop>
             <source src="/{{$postDetails->videos}}">
             Your browser does not support the video tag.
         </video>
     </div>
 </div>
</div>

鼠标悬停在视频上我正在播放视频，鼠标悬停我正在停止视频这里是用于播放和暂停的 javascript 代码

 <script>
    var figure = $(".video");
    var vid = figure.find("video");
    [].forEach.call(figure, function (item) {
        item.addEventListener('mouseover', hoverVideo, false);
        item.addEventListener('mouseout', hideVideo, false);
    });
    function hoverVideo(e) {
        $('.thevideo')[$(this).attr("data-id")].play();
    }
    function hideVideo(e) {
        $('.thevideo')[$(this).attr("data-id")].pause();
    }
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })
 </script>

每个视频大小不超过 6 mb，现在问题是加载页面大约需要 1 分钟，悬停播放视频大约需要 15 到 20 秒，有什么办法可以减少加载时间和视频播放时间。我正在使用 laravel 框架，它在本地工作，但在服务器上却出现问题。

Answer 1

我不知道为什么您在同一页面中需要 40 个视频，但我完全不建议这样做：

YOUTUBE：

Youtube 不是每页显示 20 个视频，而是 20 个占位符图像，用作点击链接以显示视频。它对用户体验非常友好，因为加载时间大大减少（图像而不是视频）并且用户可以选择他们加载的内容。

脸书、推特、等等……：

Facebook、Twitter 等社交网络正在使用滚动脚本，该脚本仅在用户可见时加载视频。这意味着如果页面上有 100 个视频，则只会加载并显示一两个，因为这对于加载用户看不到的内容是无用的（如果这是一个很重的文件，例如视频，则更是如此）。这可以通过 Javascript 或 jQuery（Here is a pretty cool question 为您提供解决方案）来完成。

我真的建议您选择这两种方法中的一种，因为我无法确定需要在一次加载的情况下在一页上显示 40 个视频的情况。