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...
question from:
https://stackoverflow.com/questions/65862218/dont-preload-video-but-still-show-thumbnail 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…