Skip to content
Related Articles

Related Articles

HTML | DOM Video preload Property
  • Last Updated : 05 Aug, 2019

The Video preload property is used for setting or returning the value of the preload attribute of a video. The preload attribute is used to specify the way the author thinks the video should be loaded when the page loads.
The video preload attribute allows the author to portray to the browser about the way the user experience of a website should be implemented.

Syntax:

  • Return the preload property:
    videoObject.preload
  • Set the preload property:
    videoObject.preload = "auto|metadata|none"

Property Values:

  • auto :It is used to specify that the browser should load the entire video when the page loads.
  • metadata :It is used to specify that the browser should load only metadata when the page loads.
  • none :It is used to specify that the browser should NOT load the video when the page loads.

Below program illustrates the Video Preload property.
Example-1: Return the video preload property.




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Video Preload Property
    </title>
</head>
  
<body style="text-align:center">
  
    <h1 style="color:green">
      GeeksforGeeks
    </h1>
    <h2 style="font-family: Impact">
      Video Preload Property
    </h2>
    <br>
  
    <video id="Test_Video"
           width="360" 
           height="240" 
           controls>
        <source src="samplevideo.mp4"
                type="video/mp4">
        
        <source src="movie.ogg"
                type="video/ogg">
    </video>
  
    <p>To return the value of the preload attribute, 
      double click the "Return Preload Attribute" button.</p>
  
    <button ondblclick="My_Video()" 
            type="button">
      Return Preload Attribute
    </button>
  
    <p id="test"></p>
  
    <script>
        function My_Video() {
            var v = document.getElementById(
              "Test_Video").preload;
            document.getElementById("test").innerHTML = v;
        }
    </script>
  
</body>
  
</html>


Output:



  • Before clicking the button:
  • After clicking the button:

Example-2: Set the video preload property.




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Video Preload Property
    </title>
</head>
  
<body style="text-align:center">
  
    <h1 style="color:green">
      GeeksforGeeks
    </h1>
    <h2 style="font-family: Impact">
      Video Preload Property
    </h2>
    <br>
  
    <video id="Test_Video"
           width="360" 
           height="240" 
           controls>
        <source src="samplevideo.mp4"
                type="video/mp4">
        
        <source src="movie.ogg"
                type="video/ogg">
    </video>
  
    <p>To set the value of the preload attribute, 
      double click the "Set Preload Attribute" button.</p>
  
    <button ondblclick="My_Video()" 
            type="button">
      Set Preload Attribute
    </button>
  
    <p id="test"></p>
  
    <script>
        function My_Video() {
            var v = document.getElementById(
              "Test_Video").preload="auto";
            document.getElementById("test").innerHTML = v;
        }
    </script>
  
</body>
  
</html>


Output:

  • Before clicking the button:
  • After clicking the button:
  • Supported Browsers: The browser supported by HTML | DOM Video preload Property are listed below:

    • Google Chrome
    • Internet Explorer
    • Firefox
    • Opera
    • Apple Safari

    full-stack-img

    My Personal Notes arrow_drop_up
    Recommended Articles
    Page :