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，ETC ...... ：

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

我真的建议你选择这两种方法中的一种，因为我无法找出一个需要在一个页面上显示40个视频且一次加载的情况。

在一个页面中加载多个视频

1 个答案: