Cannot extract local video file duration in mobile browser

Question

I am using a file input to capture recorded video from a user's mobile device. What I want to do is then read that file somehow and determine whether it is over a certain duration (30 seconds in this case). If it is over that duration, then the file should not be allowed to be uploaded to the server. It is under the duration, then it is okay.

I can accurately detect the duration of the file in javascript on desktop, but not on mobile, which is what I need. This is my code:

onEndRecord = function(e) {
        var file = e.target.files[0];

        var videoElement = document.createElement('video');
        document.body.appendChild(videoElement);
        var fileURL = window.URL.createObjectURL(file);

        videoElement.addEventListener('loadeddata', function(e) {
            console.log('loadeddata',e.target.duration);
        });

        videoElement.onload = function () { // binding onload event
            console.log('onload',videoElement.duration);
        };

        videoElement.src = fileURL;

}

Anybody know how to get this information? The duration just reports as zero on mobile.

I've also tried running it through the file reader api:

readBlob = function(file){
    console.log('readBlob',file);

    var reader = new FileReader();

    reader.onload = function (e) {

        console.log('reader load');
        var player = document.getElementById('videoReader');

        player.addEventListener('loadeddata', function(e) {
            console.log('loadeddata',e.target.duration);
            player.play();
        });
        var fileURL = window.URL.createObjectURL(file);
        player.src = fileURL;

    }

    reader.readAsDataURL(file);

}

Answer 1

Solved this by using FFMPEG's FFprobe service. We download just a small amount of the video - about 4k is enough - and then read the metadata. For quicktime, however, the metadata is at the end of the video, so you have to swap the beginning for the end. This was done using a modified version of qt fast start:

https://github.com/danielgtaylor/qtfaststart

Answer 2

What is happening I believe is that the loadedmetadata event (or loadeddata event as in your question) just does not fire on the mobile devices you are testing hence the duration is not available for reading and is rendered as 0. Have a look here for the events linked to the HTML5 media element specs. Note that you could use the loadstart event for the media element rather than the onload event for fine tuning your web application.

Typically on iOS the event will fire on user interaction ... not before (as with the canplay event). This is a limitation to attempt to reduce bandwidth consumption of users on paid data plans for their mobile device. This is described here for Apple. The same generally goes for Android.

Dealing with the Web Audio API you could get the duration through the buffer received from the decodeAudioData method. Here is some information on the subject.

You can read this information server side with PHP or Java but this would not work at best for your design.

So either you could get a user to playback the recorded sample before uploading to have access to the duration or if you know the average bitrate at which the video was recorded and the file size (File API) then you could approximate the duration.