Loading multiple videos in one page

Question

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

<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

 <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.

In local you have no download time of video, it's probably the reason why you don't have problem. — Nolyurn, Aug 22 '17 at 12:21
Doesn't youtube load just an image screenshot of what looks like a video, but doesn't actually insert the video into the page until its clicked(or hovered)? You'd probably want to do something like that, where you have 40 images, but they aren't actually videos unless the user clicks them. You would prob have to use AJAX to do that. If you go to youtube home page and use browser tools to inspect the video, you will see they are images. — Dan Zuzevich, Aug 22 '17 at 12:24
The problem is UX approach. You must rethink this, or try to add infinite scroll. But I suggest you to change this approach and make a single video on page. — Carnaru Valentin, Aug 22 '17 at 12:24
Check this [video stream](https://gist.github.com/vluzrmos/993d400739dd2e9aa47d) option, might you get here what you want. — AddWeb Solution Pvt Ltd, Aug 22 '17 at 12:31
@AddWebSolutionPvtLtd i have used your approach,streaming through php is good, but it is consuming much ram and system is hanging some times is there any solution for this. — Punabaka Abhinav, Aug 23 '17 at 06:24
@PunabakaAbhinav: It's laravel approach not simple PHP, I don't know the best approach for multiple video in page at single load but let search for it — AddWeb Solution Pvt Ltd, Aug 23 '17 at 06:28
@PunabakaAbhinav: Are you using youtube video OR load it from your own site? — AddWeb Solution Pvt Ltd, Aug 23 '17 at 06:35
@PunabakaAbhinav: Interesting! Check [this](https://stackoverflow.com/questions/26211178/multiple-videos-on-a-single-page-not-loading-all-the-videos-chrome) — AddWeb Solution Pvt Ltd, Aug 23 '17 at 06:54
@AddWebSolutionPvtLtd thank you for helping me i have reduced 40 videos to 20 videos per page and used streaming through php., now page is loading fast. — Punabaka Abhinav, Aug 26 '17 at 06:17

score 1 · Answer 1 · answered Aug 22 '17 at 12:30

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

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.

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).

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.

Louis thank you for replying i have got the solution, reduced 40 videos to 20 videos per page and used streaming through php., now page is loading fast — Punabaka Abhinav, Aug 26 '17 at 06:20

Loading multiple videos in one page

1 Answers1