Get Duration Of Inputted Video File Using JavaScript

In this article, we will learn how to get a duration of inputted Video files using JavaScript.

We can use the duration property to get the length of the current video in seconds. Here we will implement it in a way to get the duration of inputted file directly before upload and also it will work for every file change.

<!DOCTYPE html>
<html>
<body>
    <input type="file" accept="video/*" onchange="getDuration(this)">
</body>
</html>

<script>
    window.URL = window.URL || window.webkitURL;
    function getDuration(control) {
        var video = document.createElement('video');
        video.preload = 'metadata';
        video.onloadedmetadata = function () {
            window.URL.revokeObjectURL(video.src);
            alert("Duration : " + video.duration + " seconds");
        }
        video.src = URL.createObjectURL(control.files[0]);
    }
</script>

The above code will not work with the .avi files.

Output:

Please give your valuable feedback and if you have any questions or issues about this article, please let me know.

Also, check Infinity Audio/Video Duration Issue Fixed Using JavaScript

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.