current duration time of html5 video

Question

I need a way of getting the total time length of the video and the current time with jquery and displaying it in a couple of  lt div gt  tags    lt div id  current  gt 0 00 lt  div gt   lt div id  duration  gt 0 00 lt  div gt    I ve been searching all day and I know how to get them I just can t display them   jquerynoob

User · Answer

This page might help you out  Everything you need to know about HTML5 video and audio  var video   document createElement  video    var curtime   video currentTime    If you already have the video element   currentTime should work   If you need more details  that webpage should be able to help

User · Answer

https   www w3schools com tags av event timeupdate asp      Get the  lt video gt  element with id  myVideo  var vid   document getElementById  myVideo        Assign an ontimeupdate event to the  lt video gt  element  and execute a function if the current playback position has changed vid ontimeupdate   function    myFunction      function myFunction        Display the current position of the video in a  lt p gt  element with id  demo      document getElementById  demo   innerHTML   vid currentTime

User · Answer

I am assuming you want to display this as part of the player   This site breaks down how to get both the current and total time regardless of how you want to display it though using jQuery   http   dev opera com articles view custom-html5-video-player-with-css3-and-jquery   This will also cover how to set it to a specific div   As philip has already mentioned   currentTime will give you where you are in the video

User · Answer

Working example here at   http   jsfiddle net tQ2CZ 1   HTML   lt div id  video container  gt   lt video poster  http   media w3 org 2010 05 sintel poster png  preload  none  controls    id  video  tabindex  0  gt       lt source type  video mp4  src  http   media w3 org 2010 05 sintel trailer mp4  id  mp4  gt  lt  source gt       lt source type  video webm  src  http   media w3 org 2010 05 sintel trailer webm  id  webm  gt  lt  source gt       lt source type  video ogg  src  http   media w3 org 2010 05 sintel trailer ogv  id  ogv  gt  lt  source gt       lt p gt Your user agent does not support the HTML5 Video element  lt  p gt   lt  video gt   lt  div gt    lt div gt Current Time    lt span  id  currentTime  gt 0 lt  span gt  lt  div gt   lt div gt Total time    lt span id  totalTime  gt 0 lt  span gt  lt  div gt    JS    function        currentTime   html     video container   find  video   get 0  load         currentTime   html     video container   find  video   get 0  play        setInterval function        currentTime   html     video container   find  video   get 0  currentTime       totalTime   html     video container   find  video   get 0  duration         500

User · Answer

HTML    lt video     id  video-active      class  video-active      width  640      height  390      controls  controls  gt       lt source src  myvideo mp4  type  video mp4  gt   lt  video gt   lt div id  current  gt 0 00 lt  div gt   lt div id  duration  gt 0 00 lt  div gt    JavaScript     document  ready function          video-active   on       timeupdate        function event         onTrackedVideoFrame this currentTime  this duration                function onTrackedVideoFrame currentTime  duration           current   text currentTime     Change  current to currentTime         duration   text duration      Notes      Every 15 to 250ms  or whenever the MediaController s media controller   position changes  whichever happens least often  the user agent must   queue a task to fire a simple event named timeupdate at the   MediaController    http   www w3 org TR html5 embedded-content-0 html media-controller-position

[jquery] current/duration time of html5 video?

Examples related to jquery

Examples related to html

Examples related to time

Examples related to html5-video

Examples related to duration