Don’t preload video, but still show “thumbnail”

I’m trying to display many video thumbnails/posters without actually loading the video…

Bascially what I’ve got is the following:

<div class="col-sm-3" style="padding: 20px;" onclick='location.href="/videoDetails/{{ @video.ID }}"'>
      <video width="100%" style="cursor:pointer;"
          <source src="/{{ @video.path }}">
           Your browser does not support the video tag.
      </video>
</div>

That hole thing is in a foreach loop and with that, it loads up to 100 videos on one page…

My problem now is that this gets super slow, the more videos there are load at once..

Now I found this answer on a StackOverflow thread, where it says to use the attribute preload="none" on the video tag… That seems to speed up the loading (because it doesn’t preload the videos), however, it doesn’t display any image (preview) at all..

In my case, there’s no reason to load the hole video though, because (as you can see in the code), the actual video is then displayed on another page, when clicking on the div.

Also, just to make sure you got me right, I want to display the auto generated preview of the first frame of the video. I can’t upload a seperate image to display it with the poster attribute, it has to be the default image..

Is there any way I can achieve this? I’m also open to Javascript/jQuery solutions…

Answer

You can get video frames in different time periods with append #t in the video source url. But with the attribute preload none value you cannot get the video frames. So You need to use the metadata value in the preload attribute. These are the three values you can use in the preload attribute:

none – Hints to the browser that the user likely will not watch the video, or that minimizing unnecessary traffic is desirable.

metadata – Hints to the browser that the user is not expected to need the video, but that fetching its metadata (dimensions, first frame, tracklist, duration, and so on) is desirable.

auto – Hints to the browser that optimistically downloading the entire video is considered desirable. – Hints to the browser that optimistically downloading the entire video are considered desirable.

You can check the below results with these three values.

<p>metadata</p>
<video width="300" height="150" controls="controls" preload="metadata">
   <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4#t=2" type="video/mp4" />
</video>

<p>none</p>
<video width="300" height="150" controls="controls" preload="none">
   <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4#t=2" type="video/mp4" />
</video>

<p>auto</p>
<video width="300" height="150" controls="controls" preload="auto">
   <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4#t=2" type="video/mp4" />
</video>