How do I lazy loading a video in the video tag?

  • 0
    Hello everyone!
    Please tell me how to make lazy loading for video?
    Those. so that it loads only after you click on it. Before that, just a black screen.

    Which are written 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>


    Everywhere only for iframe I found .. maybe there is some kind of library?
    Videojs player used for video https://docs.videojs.com/
    but I didn't find anything like it there
    JavaScript Anonymous, Jun 16, 2020

  • 1 Answers
  • 0
    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 clicked, the src attribute will be added, the content of which would be taken from data-src. This is a simple option in the forehead, but of course it is somewhat wrong, in the mind all the scripts should be taken out, and not written inline.
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!