javascript - JavaScript屏幕记录正在视频标签中播放，但下载后没有

Question

我正在使用 JavaScript 记录用户屏幕，然后在页面的视频标签中播放并下载它。现在它可以正常播放浏览器视频标签，但下载后无法播放

这是我的代码

let btn = document.querySelector('button')
btn.addEventListener('click', async function (){
    let stream = await navigator.mediaDevices.getDisplayMedia({
        video: true
    })
    let mediaRecorder = new MediaRecorder(stream)

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

    mediaRecorder.addEventListener('stop', function () {
        let blob = new Blob(chunks, { 'type': 'video/webm' })
        
        // Working fine
        let video = document.querySelector('video')
        video.src = URL.createObjectURL(blob)

        // Downloaded video is not playing
        let a = document.createElement('a')
        a.href = URL.createObjectURL(blob)
        a.download = 'video.webm'
        a.click()
    })

    mediaRecorder.start()
})``` 

Answer 1

您可能值得尝试这个实验，运行以下代码：

<a href="https://www.w3schools.com/html/mov_bbb.mp4" target="_blank">click</a>
<script>
const a = document.querySelector('a');
a.click();
</script>

（不能用作堆栈片段，需要直接在您的系统/浏览器上运行）。

视频会自动开始吗？如果没有，您是否看到任何警告，例如在浏览器窗口的右上角，弹出窗口被阻止？如果是这样，您可以尝试取消阻止它们，看看会发生什么。

注意：我不确定您所说的“下载”及其在锚元素中的设置是什么意思。