HTML5 Video duration without playing video

by

For HTML5 you should be able to use the video tag’s duration property, once the file’s metadata is loaded. See this answer for a good way to do it:

Retrieving HTML5 video duration separately from the file

To quote the anwser by Mikushi:

myVideoPlayer.addEventListener('loadedmetadata', function() {
    console.log(videoPlayer.duration);
});

By listening for the ‘loadedmetadata’ event you will ensure the duration value has been loaded.

More details on the loadedmetadata can be found here: http://www.w3schools.com/tags/av_event_loadedmetadata.asp

EDIT

As per @lucas-vasques ‘s comment, instead of the loadmetadata event, you could use durationchange which the MDN Media Events list describes as …

The metadata has loaded or changed, indicating a change in duration of
the media. This is sent, for example, when the media has loaded
enough that the duration is known.

More Related Contents:

  1. How to add a responsive menu bar to html website [closed]
  2. Why does not javascript show the output when button is clicked
  3. Pure JavaScript toggle for select / deselect all checkboxes [duplicate]
  4. Create a field to accept tags HTML/JS [closed]
  5. Can I hide the HTML5 number input’s spin box?
  6. Can I have an element with an ID that starts with a number?
  7. Changing CSS Values with Javascript
  8. Is it possible to hide the cursor in a webpage using CSS or Javascript?
  9. Text-overflow ellipsis on left side
  10. How to detect which one of the defined font was used in a web page?
  11. How to create a sticky navigation bar that becomes fixed to the top after scrolling
  12. width/height after transform
  13. How to print HTML content on click of a button, but not the page? [duplicate]
  14. “pointer-events: none” does not work in IE9 and IE10
  15. Div Z-Index issue with Flash movie
  16. jQuery Validation using the class instead of the name value
  17. Dark mode flickers a white background for a millisecond on reload
  18. How to create checkbox inside dropdown?
  19. collapse and expand tabs jquery / simple accordion
  20. How to trigger CSS “hover state” using Javascript? [duplicate]
  21. Javascript-Setting background image of a DIV via a function and function parameter
  22. Gaussian Blur onHover Using jQuery
  23. How to keep the header static, always on top while scrolling?
  24. Wrapping lists into columns
  25. HTML5 input required, scroll to input with fixed navbar on submit
  26. Change style header/nav with Intersection Observer (IO)
  27. input:invalid css rule is applied on page load
  28. How to show calendar popup when input[type=”date”] is on focus
  29. Detecting by how much user has scrolled
  30. In jQuery mobile, what’s the diff between tap and vclick?

Leave a Comment