+2 votes
by
Hi all!
Can you please tell me how to make a delayed download for video?
That is, that it is loaded only after you click on it. And before that just a black screen

Which are prescribed in the video tag:
<div class="video-block">
<video id="my-player" class="video-js" controls data-setup='{}'>
<source src="./video/blum/2.mp4" type="video/mp4"></source>
</video>
</div>
I found only for iframe everywhere... maybe there is a library or something? The videojs player is used for video https://docs.videojs.com/ But I couldn't find anything like that there
by
What do you mean by delayed loading?
1. Play a video when the video container is in the viewing area?
2. Start loading video content when the video container is in the viewing area?
by
Roman I meant for the video not to be uploaded along with the page. But only after it is clicked on. And until then, instead of a preview, the video just has a black screen

1 Answer

0 votes
by
 
Best answer
It goes something like this:
<div onclick="this.querySelector('source').setAttribute('src', this.querySelector('source').getAttribute('data-src')); this.removeAttribute('onclick');" class="video-block">
<video id="my-player" class="video-js" controls data-setup='{}'>
<source data-src="./video/blum/2.mp4" type="video/mp4"></source>
</video>
</div>
When you click, the src attribute will be added, the contents of which would be taken from the data-src. It's a simple option in head-on, but of course it's a bit wrong, in order to be smart all the scripts should be taken out, not written inline.
...