JavaScript

Infinity Audio/Video Duration Issue Fixed Using JavaScript

In this article, we will learn how to fix the Infinity Audio/Video duration issue using JavaScript.

We can use the duration property to get the length of the current Audio/Video in seconds. Unfortunately, with some Audio/Video we will see the duration as Infinity. A chrome bug that causes the duration not to be available under certain circumstances. The issue is in WebKit browsers, the metadata is loaded after the Audio/Video. So the duration is not available when the JS runs.

To solve this issue we just have to use addEventListener as given below.

<!DOCTYPE html>
<html>
<body>
    <video src="myVideo.mp4" id="myVideo" height="200" width="400" controls>
        Your browser does not support HTML5 video.
    </video>
    <button >

Output:
 
 
Please give your valuable feedback and if you have any questions or issues about this article, please let me know.
 
Also, check Download Files In ZIP Format In Angular 9
Yasin Panwala

Yasin Panwala is a Web Developer and Author at TheCodeHubs. He has experience in Web Developing and Designing and also in Writing. He has got his skills in working on technologies like .NET Core, ADO.NET, AJAX, Angular, AngularJS, ASP.NET, ASP.NET MVC, Bootstrap, C#, CSS, Entity Framework, Express.js, GraphQL, HTML, JavaScript, JQuery, JSON, LINQ, Microsoft Office, MongoDB, MySQL, Node.js, PostgreSQL, SQL, SQL Server, TypeORM, TypeScript, Visual Basic .NET, Web API. He also got his skills in working with different integration and some known versioning tools. He is always ready to learn new things and he always tries his best on tasks that are assigned to him and gives the best possible outputs.

View Comments

Leave a Comment
Share
Published by
Yasin Panwala
Tags: AudioAudio DurationAudio LengthDurationHTMLInfinityInfinity Chrome BugInfinity DurationInfinity Duration IssueIssueJavaScriptjsLengththecodehubsVideoVideo DurationVideo Length
4 years ago

Recent Posts

Testing hk

Testing

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

Operation

Testing

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

TETS NEW

test

2 years ago