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

Question

我正在做一个ffmpeg-wasm的例子，它将接受3个文件作为输入的want 1.mp3、want 2.mp3、image.png，并将它们合并到一个视频文件中--cool video .mkv，我希望在html网页中将其显示为用户可播放的视频。

https://github.com/MartinBarker/ffmpeg-wasm-node

我的代码托管在上面的repo中，现在我有一个占位符视频元素，在用户上传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视频，将头更改为视频/mp4，并验证它正在添加到html src元素中，但视频仍未显示。

​

​

Answer 1

通过阅读本文的评论：Base64 value is not working with video tag?解决了问题

必须将src标记从元素移动到元素，现在它开始工作了！