How to preload the video when the page loads in HTML5 ?

Last Updated : 25 Mar, 2021

The HTML <preload> attribute is used to specify the way the developer thinks the video should be loaded when the page loads.

Syntax

<video preload=""> </video>

There are 3 values for preload attribute auto, metadata and none.

Note: A empty string lead to default auto attribute value.

Example 1: The following example demonstrates the video element using none attribute value for the preload property.

HTML

<!DOCTYPE html>  
<html>  
 <body>  
    <center>  
        <h1 style="color:green;">GeeksforGeeks</h1>  
  
        <h3>HTML preload Attribute</h3>  
  
        <video width="400" height="200" controls preload="none">  
            <source src=  
"https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.mp4"
                    type="video/mp4">  
            <source src=  
"https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.ogg"
                    type="video/ogg">  
        </video>  
    </center>  
</body>  
  
</html>  

Output:

preload with none value

Example 2: The following example demonstrates the video element using auto attribute value.

HTML

<!DOCTYPE html>  
<html>  
<body>  
    <center>  
        <h1 style="color:green;">GeeksforGeeks</h1>  
  
        <h3>HTML preload Attribute</h3>  
  
        <video width="400" height="200" controls preload="auto">  
            <source src=  
"https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.mp4"
                    type="video/mp4">  
            <source src=  
"https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.ogg"
                    type="video/ogg">  
        </video>  
    </center>  
</body>  
  
</html>  