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

I am getting 40 videos on load of page and using foreach loop for displaying, below is my html code of displaying video

我正在加载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>

and on mouseover to video i am playing the video and on mouseout i am stopping the video here is the javascript code for play and pause

在鼠标悬停到视频我播放视频和鼠标输出我停止视频这里是播放和暂停的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>

each video size is not more than 6 mb, now the problem is for loading page it will take around 1 min, and for playing video on hover it will take around 15 to 20 seconds to play, is there any way to reduce the loading time and video playing time. I am using laravel framework, in local its working but in server it giving problem.

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

1 个解决方案

#1

I don't know why you need 40 videos in the same page, but I would not at all recommand that:

我不知道你为什么在同一页面上需要40个视频，但我根本不会建议：

YOUTUBE:

YOUTUBE：

Youtube doesn't display 20 videos per page, but 20 placeholder images that are used as link to click on in order to display the video. It is pretty UX friendly, since loading time is considerably reduced (images instead of videos) and users can choose what they load.

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

FACEBOOK, TWITTER, ETC...:

FACEBOOK，TWITTER，ETC ......：

Social networks such as Facebook, Twitter, etc are using a scroll script, which loads videos only when they are visible by the user. This means that if there are 100 videos on the page, only one or two will be loaded and displayed, because this is useless to load stuff that the user can't see (even more if this is a heavy file, such as a video). This can be done with Javascript or jQuery (Here is a pretty cool question which gives you a solution).

诸如Facebook，Twitter等社交网络正在使用滚动脚本，该脚本仅在用户可见时才加载视频。这意味着如果页面上有100个视频，则只会加载和显示一两个视频，因为加载用户看不到的内容是无用的（如果这是一个沉重的文件，例如视频，则更是如此）。这可以使用Javascript或jQuery完成（这是一个非常酷的问题，为您提供解决方案）。

I really recommand you to choose one of those two approach, since I can't figure out a case which requires to display 40 videos on one page with one load.

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

#1