About video/webm and mp4

Question

Hope there hadn't any question same as mine.

I tried to write some share screen and screen record. For that I found others code to study. In the code, it used the video filename extension is .webm. I tried to change it to .mp4 but failed.

I thought that video/webm and video/mp4 were both valid. But not know why, when I changed filename extension, it got worse.

Is there anything wrong I didn't find? I had tried some keywords to search (for example, video/webm mp4) but had no result. I would like to know if my keyword direction is wrong?

Thankyou.

The following is part of the code:

btnPlay.onclick = () => {
    var blob = new Blob(buffer, { type: 'video/webm' })
    recvideo.src = window.URL.createObjectURL(blob)
    recvideo.srcObject = null
    recvideo.controls = true
    recvideo.play()
}

// download record
btnDownload.onclick = () => {
    var blob = new Blob(buffer, { type: 'video/webm' })
    var url = window.URL.createObjectURL(blob)
    var a = document.createElement('a')

    a.href = url
    a.style.display = 'none'
    a.download = 'video.webm'
    a.click()
}

In the code, I only changed webm to mp4.

The code source: https://ithelp.ithome.com.tw/articles/10273368?sc=iThomeR