Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to avoid repeat reloading of HTML video on the same page?

Javascript Web Development Front End Scripts

Use preload="auto" to avoid repeat reloading of HTML video on the same page. The preload attribute controls how much video data the browser should load when the page loads.

Preload Attribute Options

The preload attribute has three possible values:

  • auto - Browser loads the entire video when the page loads
  • metadata - Browser loads only video metadata (duration, dimensions)
  • none - Browser doesn't load any video data initially

Example with preload="auto"

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Video with Preload</title>
   </head>
   <body>
      <video width="350" height="200" controls="controls" preload="auto">
         <source src="movie.mp4" type="video/mp4" />
         <source src="movie.ogg" type="video/ogg" />
         Your browser does not support the video tag.
      </video>
   </body>
</html>

How It Works

When you set preload="auto", the browser downloads the entire video file as soon as the page loads. This prevents the video from reloading when users interact with the video controls or when JavaScript manipulates the video element.

Comparison of Preload Values

Value Data Downloaded Initial Load Time Playback Performance
auto Entire video Slower Instant playback
metadata Basic info only Fast Brief delay on play
none Nothing Fastest Loading delay on play

JavaScript Control Example

<!DOCTYPE html>
<html>
   <head>
      <title>Video Control with JavaScript</title>
   </head>
   <body>
      <video id="myVideo" width="350" height="200" controls="controls" preload="auto">
         <source src="movie.mp4" type="video/mp4" />
         <source src="movie.ogg" type="video/ogg" />
         Your browser does not support the video tag.
      </video>
      
      <br><br>
      <button onclick="playVideo()">Play</button>
      <button onclick="pauseVideo()">Pause</button>
      
      <script>
         const video = document.getElementById('myVideo');
         
         function playVideo() {
            video.play();
         }
         
         function pauseVideo() {
            video.pause();
         }
      </script>
   </body>
</html>

Best Practices

  • Use preload="auto" for critical videos that users will likely watch
  • Consider preload="metadata" for background videos to save bandwidth
  • Use preload="none" for videos that may not be played to minimize data usage
  • Always include multiple source formats for cross-browser compatibility

Conclusion

Setting preload="auto" prevents video reloading by downloading the entire video upfront. Choose the preload value based on your performance needs and user experience requirements.

Updated on: 2026-03-15T23:18:59+05:30

902 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements