currentTime property

Article
05/02/2017

Gets or sets the current playback position, in seconds.

Syntax

object.put_currentTime(
        number
       seconds);object.get_currentTime(
        number
      * seconds);

Property values

Type: number

The current playback position, in seconds.

Exceptions

Exception	Condition
IndexSizeError	Time is outside the range that the player can seek. Versions prior to Internet Explorer 10 report W3Exception_DOM_INDEX_SIZE_ERR.
InvalidStateError	No media source was selected.

Standards information

HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.8.9.6

Remarks

Setting currentTime seeks to a specific position in a media resource.

Examples

This example shows how to use the timeupdate event to track the elapsed time using the currentTime property. See the example online.

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Video Example</title>
      <!-- Uncomment the following tag when developing on a local or intranet computer -->
      <!-- <meta http-equiv-'X-UA-Compatible' content="ie9" />  -->        
</head>
<body>
<video id="video1" >
   HTML5 video is not supported
</video><br />

<input type="text" id="videoFile" style="width:600px" value="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4"/>
  
  <!-- Button width set so overall size doesn't change when we toggle the label -->
  <button id="playButton" style="width: 80px" >Play</button>
  <div >Elapsed Time: <span id="timeDisplay"></span></div>

   <script>

     var oVideo = document.getElementById("video1");      //video element
     var button = document.getElementById("playButton");
     var display = document.getElementById("timeDisplay");

     //  Capture time changes and display current position
     oVideo.addEventListener("timeupdate", function () {
       display.innerText = oVideo.currentTime.toFixed(2) ;
     }, false);

     button.addEventListener("click", function () {
       //  toggle between play and pause based on the paused property
       if (oVideo.paused) {
         var oInput = document.getElementById('videoFile');   //text box
         if (oInput.value) {
           //  only load a video file when the text field changes
           if (oInput.value != oVideo.src) {
             oVideo.src = oInput.value;
             oVideo.load();
           }
           oVideo.play();
         }
       } else {
         oVideo.pause();
       }
     }, false);

     // Capture the play event and set the button to say pause
     oVideo.addEventListener("play", function () {
       button.innerHTML = "Pause";
     }, false);

     // Capture the pause event and set the button to say play
     oVideo.addEventListener("pause", function () {
       button.innerHTML = "Play";
     }, false);


     </script>
</body>
</html>

Share via