title: Loading multiple videos in one page
body: <p>I am getting 40 videos on load of page and using foreach loop for displaying, below is my html code of displaying video</p>
  
  <pre><code>&lt;div id="videosList"&gt;
    &lt;div class="video" data-id="{{$i}}"&gt;
       &lt;div class="videoSlate"&gt;
           &lt;video id="videoDiv{{$i}}" class="thevideo" 
               preload="metadata"
               poster="/{{$postDetails-&gt;video_thumbnail}}" loop&gt;
               &lt;source src="/{{$postDetails-&gt;videos}}"&gt;
               Your browser does not support the video tag.
           &lt;/video&gt;
       &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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</p>
  
  <pre><code> &lt;script&gt;
      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()
      })
   &lt;/script&gt;
  </code></pre>
  
  <p>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.</p>