Validation Check for Video Duration on Client side

This blog mainly tries to explain the way of having client side validation for video duration without uploading the video to server.

Introduction

 

I had a requirement where I had a file upload control with me and I wanted to validate the video duration before uploading it. I did lot of R & D to find a way of validating the video duration to be let say greater than 2minutes before being uploaded.

 

HTML UI

 

 

We know, in HTML 5 we can check the duration of video using video element but the problem is video element needs to set with the source.

<video controls width="500px" id="vid">
   <source src="vid.mp4" type="video/mp4" />
</video>

This means I first need to upload the video to the server to set the src attribute, but that will add overhead to the server when the validation of 2minutes doesn’t match. So I need a way that will work on the client-side.

 

I came across something called as URL.createObjectURL().

 

It is a static method which creates DOMstring containing a Url representing the object.

 

Check the following code snippet.

<div style="border:1px solid black">
    <h3>File Upload</h3>
    <input type="file" id="fl"></input>
    <br />
    <br />
    <input type="button" value="Validate" id="btn" />
    <br />
    <video controls width="500px" id="vid" style="display:none"></video>
</div>
<script type="text/ecmascript">
var objectUrl;

$(document).ready(function() {
    $("#fl").change(function(e) {
        var file = e.currentTarget.files[0];
        objectUrl = URL.createObjectURL(file);
        $("#vid").prop("src", objectUrl);
    });

    $('#btn').click(function() {
        var seconds = $("#vid")[0].duration;
        if (seconds <= 120)
            alert('Video duration should be more than 2 min');
    });

});
</script>

Explanation

 

- On fileupload file selection, get the video file and create an ObjectUrl of that file.

- Add a video element on the page but keep it hidden.

- Set the src attribute of the video element with blob object.

- On click of validating button, you can now easily access that video element and check its duration property (which is specified in seconds) 

if(seconds <= 120)
alert('Video duration should be more than 2 min');

 

That’s it. I hope you will like this small blog stating the validation check for video duration on client side.