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

---