JavaScript录屏生成的视频在video标签正常播放，下载后无法播放

AI 小北

2026-10-3

录屏文件本地无法播放修复方案

核心原因

Blob的MIME类型和MediaRecorder实际输出的类型不匹配：代码中硬写了video/webm作为Blob类型，但不同浏览器默认的录屏输出编码存在差异，硬指定类型会导致视频文件头信息异常，浏览器video标签容错性更高可正常播放，但本地播放器解析会失败。
录制编码兼容性不足：默认生成的webm视频可能使用了VP9等较新编码，很多本地默认播放器没有对应解码器。

修复代码

let btn = document.querySelector('button')
btn.addEventListener('click', async function (){
    let stream = await navigator.mediaDevices.getDisplayMedia({
        video: true
    })
    // 先检测浏览器支持的高兼容性MIME类型，显式指定编码
    const mimeTypes = [
        'video/webm;codecs=vp8',
        'video/webm'
    ]
    let mimeType = mimeTypes.find(type => MediaRecorder.isTypeSupported(type))
    let mediaRecorder = new MediaRecorder(stream, { mimeType })

    let chunks = []
    mediaRecorder.addEventListener('dataavailable', function (e) {
        chunks.push(e.data)
    })

    mediaRecorder.addEventListener('stop', function () {
        // 直接使用MediaRecorder的mimeType，保证类型完全匹配
        let blob = new Blob(chunks, { type: mediaRecorder.mimeType })
        
        let video = document.querySelector('video')
        video.src = URL.createObjectURL(blob)

        let a = document.createElement('a')
        a.href = URL.createObjectURL(blob)
        a.download = 'video.webm'
        a.click()
        // 用完后释放ObjectURL避免内存泄漏
        URL.revokeObjectURL(a.href)
    })

    mediaRecorder.start()
})