javascript - html 显示视频文件二进制缓冲区

Question

我正在研究一个 ffmpeg-wasm 的示例，它将接受 3 个文件作为输入 [song1.mp3, song2.mp3, image.png] 并将它们组合成一个我想要的视频文件 [cool-output-video.mkv]在 html 网页中显示为用户可播放的视频。
https://github.com/MartinBarker/ffmpeg-wasm-node
我的代码托管在上述存储库中，现在我有一个占位符视频元素，我想在用户上传 3 个文件并单击渲染按钮后将其更改为完成的视频。

在 server.js 中，我有路线 app.post('/render' ，它将使用 ffmpeg 渲染视频，并使用 res.end(Buffer.from(outputData, 'binary')); 行返回视频

        outputData = ffmpeg.FS('readFile', outputFileName);
        ffmpeg.FS('unlink', outputFileName);

        res.writeHead(200, {
            'Content-Type': 'image/png',
            'Content-Disposition': `attachment;filename=${outputFileName}`,
            'Content-Length': outputData.length
        });
        //res.end(btoa(Buffer.from(outputData, 'binary')));
        //res.end(outputData)
        res.end(Buffer.from(outputData, 'binary'));

我可以在我的节点服务器控制台日志中看到 ffmpeg 命令已完成并成功呈现 mkv 视频文件

在 client.js 内部是我的代码接收输出视频文件的二进制缓冲区的地方，并尝试通过更改 html 视频元素的 src 属性使其出现在网页上，但无论我尝试什么代码，我都无法得到出现在 html 页面上的视频文件

      <video width="320" height="240" controls>
            <source id='mp4source' src="" type="video/mp4">
          Your browser does not support the video tag.
        </video>
...

const mp4source = document.querySelector('#mp4source')

...

            console.log('call renderVideo()')
            const renderResult = await renderVideo(files);
            console.log('renderVideo() finished. renderResult=',renderResult)
            mp4source.src = renderResult

我可以在我的 chrome 网页 devtools 控制台的 html 文件中看到该数据正在返回并被打印出来，我只是不确定如何为我的视频文件处理此字符串数据以使其出现在网页上:

renderVideo() finished. renderResult= data:image/png;base64,GkXfo6NChoEBQveBAULygQRC84EIQoKIbWF0cm9za2FCh4EEQoWBAhhTgGcBAAAAC0APWxFNm3TCv4T+wiwATbuLU6uEFUmpZlOsgaFNu4tTq4QWVK5rU6yB8U27jFOrhBJUw2dTrIIB1E27jlOrhBxTu2tTrIQLQA797AEAAAAAAABRAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFUmpZsu/hLA0O5Qq17GDD0JATYCNTGF2ZjU4LjQ1LjEwMFdBjUxhdmY1OC40NS4xMDBzpJAgTn1WHXX52GUlw+lW90wkRImIQRzeoAAAAAAWVK5rQN2/hEsGuLSuAQAAAAAAAD3XgQFzxYjtk28iSHTlJJyBACK1nIN1bmSGj............. long text was truncated etc

编辑更改了我的 ffmpeg 命令以导出 mp4 视频，将 header 更改为 video/mp4，并验证它已添加到 html src 元素中，但视频仍然没有出现

Answer 1

通过阅读这篇文章的评论解决了:
Base64 value is not working with video tag?
必须将 src 标签从元素移动到元素，现在它可以工作了!