Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Video played Property

  • Last Updated : 05 Aug, 2019

The Video played property is used for returning a TimeRanges object.
The TimeRanges object is used in cases when you want to represent the ranges of a video that have already been played by the user.
A played range is a time range of a played video. If a user skips in the video, he may get several played ranges.
The video played property is a read-only property.
The TimeRanges Object Properties are:

  • length: It is used to get the number of played ranges in the video
  • start(index):It is used to get the start position of a played range
  • end(index):it is used to get the end position of a played range

Syntax:

videoObject.played

Below program illustrates the Video played property :
Example: Getting the first played range of the video in seconds.




<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM Video played Property
    </title>
    <style>
        h1 {
            color: green;
        }
          
        h2 {
            font-family: Impact;
        }
          
        body {
            text-align: center;
        }
    </style>
</head>
  
<body>
  
    <h1>GeeksforGeeks</h1>
    <h2>Video played 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 first played range of the video
      in seconds, double click the
      "Return Played Range" button.
    </p>
  
    <button ondblclick="My_VideoRate()" 
            type="button">
      Return Played Range
    </button>
  
    <p id="test"></p>
  
    <script>
        function My_VideoRate() {
            var v = document.getElementById("Test_Video");
            
            document.getElementById("test").innerHTML = 
              "Starts At: " + v.played.start(0) +
              " Ends At: " + v.played.end(0);
        }
    </script>
  
</body>
  
</html>

Output:

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

    Supported Browsers: The browser supported by HTML | DOM Video played Property are listed below:

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

    Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




    My Personal Notes arrow_drop_up
  • Recommended Articles
    Page :