Export (0) Print
Expand All
This topic has not yet been rated - Rate this topic

currentTime property

Gets or sets the current playback position, in seconds.

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

Syntax

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

Property values

Type: number

The current playback position, in seconds.

Exceptions

ExceptionCondition
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

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.


<!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" onclick="playVideo(this);" style="width: 80px" >Play</button>
  <div >Elapsed Time: <span id="timeDisplay"></span></div>

   <script type="text/javascript">

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

          // 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);

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

     function playVideo(e) {      
       //  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();
       }

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


See also

How to use HTML5 to play video files on your webpage
How to use HTML5 to Add an Audio Player to your Webpage

 

 

Community Additions

ADD
Show:
© 2014 Microsoft. All rights reserved.