Add length information to a video file created from blob using the File API

Question

I created a video using MediaRecorder API (combining audio and videos from different sources), I got the final blob and converted it to a file, and downloaded it, but when I play it, it doesn't seem to have the length information. i.e any video player that I use to play the video, doesn't know how long the video is. Can anyone tell me how to pack that information in into the file or blob?

I get the video downloaded with sound and everything just fine but when I play it, the player doesn't know how long the video is.

Here's what I have so far:

// Setting up audio context and a destination for audio stream
const audioCtx = new AudioContext()
const dest = audioCtx.createMediaStreamDestination()

// I record the canvas for the video
const canvas = document.querySelector("canvas")
const videoStream = canvas.captureStream()

// Some audio from an audio element,
// whose stream is accesses from processing
// in through the audio context pipeline
const audioEl = new Audio()
audioEl.src = "some source"
const sourceNode = audioCtx.createMediaElementSource(audioEl)
sourceNode.connect(dest)

// I get the audio stream track
const track0 = dest.stream.getAudioTracks()[0]

// And add it to the video stream
videoStream.addTrack(track0)

// Do the media recorder thing
const mediaRecorder = new MediaRecorder(vidoStream)
mediaRecorder.start()

setTimeout(() => {
    mediaRecorder.stop()
}, 10 * 1000)


// I get the data and turn it into a file
mediaRecorder.ondataavailable = (ev) => {
    const file = new File([ev.data], "file name.mp4", {mimeType: "video/mp4"})

// Then I create a link to download the file
const link = document.createElement("a")
a.href = URL.createObjectURL(file)
a.download = "file name.mp4"
document.body.appendChild(a)
a.click()
}