In this article, we will learn how to get Infinity Audio/Video duration with blob URL using jQuery.
What is Blob URL?
- Blob stands for Binary Large Object. It is defined as the chunk of binary data being saved as a single entity in a database system.
- Blobs are used to hold multimedia objects like images, videos, and sound, though they can also be used to store programs.
First, we make a blob URL set in the video tag and use the duration property to get the length of the current Audio/Video in seconds.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="file" class="uploadProfilePhoto">
<video id="myVideo" height="200" width="400" controls>
Your browser does not support HTML5 video.
</video>
<button onclick="getVideoDuration()" type="button">Get Video Duration</button>
<script>
$(document).on("change", ".uploadProfilePhoto", function (e) {
if ($(this).get(0).files.length == 0) {
alert("Select video");
}
else {
var file = event.target.files[0];
$('#myVideo').attr('src', URL.createObjectURL(file));
}
});
var vid = document.getElementById("myVideo");
vid.addEventListener('loadedmetadata', function () {
if (vid.duration == Infinity) {
vid.currentTime = 1e101;
vid.ontimeupdate = function () {
this.ontimeupdate = () => {
return;
}
vid.currentTime = 0;
return;
}
}
});
function getVideoDuration() {
alert(vid.duration);
}
</script>
</body>
</html>
Output:
Also, check Infinity Audio/Video Duration Issue Fixed Using JavaScript
