javascript - Don't preload video, but still show "thumbnail" - Stack Overflow

admin管理员组

文章数量:1355247

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

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

• javascript
• html
• jquery
• html5-video

Share Improve this question Follow asked Jan 23, 2021 at 17:26 namelessnameless 1,53166 gold badges4343 silver badges8686 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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://mondatastorage.googleapis./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://mondatastorage.googleapis./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://mondatastorage.googleapis./gtv-videos-bucket/sample/ElephantsDream.mp4#t=2" type="video/mp4" />
</video>

I would say that creating so many video HTML elements will affect performance anyhow, loading or not, since the DOM is under quite heavy pressure. A different (and more advance) approach I would remend is the following.

If you want that one image will load when the user clicks on it, you can "create" a video in that specific moment, triggering only the video requested. So:

1. instead of the video tag, load an image with onclick listener, that will pass an ID to a JS function
2. when the user clicks it will create the video element.
3. at the same time, hide the image (or maybe a gif?)

Try to run the snippet here below :)

function myFunction(id) {
  
  var element = document.getElementById(id);
  var videlem = document.createElement("video");
    element.innerHTML = '';
  source = 'https://file-examples-.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4';
  var sourceMP4 = document.createElement("source"); 
  sourceMP4.type = "video/mp4";
  sourceMP4.src = source;
  videlem.appendChild(sourceMP4);
  videlem.autoplay = true;
  element.appendChild(videlem);
}

<p>Click on the image</p>
<div id="img242">
  <img onclick="myFunction('img242')" src="https://blog.majestic./wp-content/uploads/2010/10/Video-Icon-crop.png">
</div>

本文标签： javascriptDon39t preload videobut still show quotthumbnailquotStack Overflow