【问题标题】:How to combine a video with an audio in javascript?如何在javascript中将视频与音频结合起来?
【发布时间】:2023-01-08 08:19:32
【问题描述】:

我正在编码 youtube 视频下载器 chrome 扩展。但是youtube把mp4和mp3分开了。如何将接收到的 blob 类型的音频文件和图像文件组合起来,并将其转换为有声视频?

   async function downloadFile(urlToSend) {
            return new Promise(resolve => {
                var req = new XMLHttpRequest();
                req.open("GET", urlToSend, true);
                req.responseType = "blob";
                req.onload = function (event) {
                    // var blob = req.response;
                    // var fileName = req.getResponseHeader("fileName") //if you have the fileName header available
                    // var link = document.createElement('a');
                    // link.href = window.URL.createObjectURL(blob);

                    resolve(req.response)
                };

                req.send();
            })
        };

        async function zfc() {
            var v = await downloadFile('/videoplayback.mp4')
            var a = await downloadFile('/videoplayback.weba')
            let newBlob = new Blob([v, a], { type: 'video/mp4' })
            
            var as = document.createElement('a')
            as.href = window.URL.createObjectURL(newBlob)
            as.download = window.URL.createObjectURL(newBlob)
            console.log(as)
            console.log(newBlob)
            // as.click()
            var c = document.createElement('video')
            c.src = window.URL.createObjectURL(newBlob)
            document.body.appendChild(c)
        }
        zfc()
我尝试与新的 blob 合并,但视频仍然没有声音。你能帮忙吗? 示例视频链接: https://rr7---sn-u0g3uxax3-xncs.googlevideo.com/videoplayback?expire=1641956798&ei=XvHdYbG8MI2qx_AP14yRoAQ&ip=95.2.13.77&id=o-APHbyEMFJZdr7FwyLDOkQWqycmDmo9oy8bSvx7qP4z-P&itag=313&aitags=133%2C134%2C135%2C136%2C137%2C160%2C242%2C243%2C244%2C247%2C248%2C271%2C278%2C313&source=youtube&requiressl=yes&mh=YY&mm=31%2C29&mn=sn-u0g3uxax3-xncs%2Csn-hgn7yn76&ms=au%2Crdu&mv=m&mvi=7&pl=21&initcwndbps=88750&vprv=1&mime=video%2Fwebm&ns=O-4SxebNzTxani0g_ScQEtMG&gir=yes&clen=589586219&dur=347.800&lmt=1638064072881015&mt=1641934876&fvip=2&keepalive=yes&fexp=24001373%2C24007246&c=WEB&txp=4532434&n=hBnxjZJEX82hOJ&sparams=expire%2Cei%2Cip%2Cid%2Caitags%2Csource%2Crequiressl%2Cvprv%2Cmime%2Cns%2Cgir%2Cclen%2Cdur%2Clmt&sig=AOq0QJ8wRQIhAIu0SR_UsiQyUpJIkL_erKc_dElHk-1rwJMCI1486YaSAiBkH4jg8WHzRvEDsxnTTheBM_f1KsBFzqLiIUFJAIKh5w%3D%3D&lsparams=mh%2Cmm%2Cmn%2Cms%2Cmv%2Cmvi%2Cpl%2Cinitcwndbps&lsig=AG3C_xAwRAIgapuFt6YijG3nAVfbULkJq2_uAwcjOnZpd0ZNUo1h5NMCIGgJh22ksRMeMOUkhhQUlRapjqa4DhVv-KfcfnYhkW8l

示例声音链接: https://rr7---sn-u0g3uxax3-xncs.googlevideo.com/videoplayback?expire=1641956798&ei=XvHdYbG8MI2qx_AP14yRoAQ&ip=95.2.13.77&id=o-APHbyEMFJZdr7FwyLDOkQWqycmDmo9oy8bSvx7qP4z-P&itag=251&source=youtube&requiressl=yes&mh=YY&mm=31%2C29&mn=sn-u0g3uxax3-xncs%2Csn-hgn7yn76&ms=au%2Crdu&mv=m&mvi=7&pl=21&initcwndbps=88750&vprv=1&mime=audio%2Fwebm&ns=O-4SxebNzTxani0g_ScQEtMG&gir=yes&clen=5822955&dur=347.821&lmt=1638059244799001&mt=1641934876&fvip=2&keepalive=yes&fexp=24001373%2C24007246&c=WEB&txp=4532434&n=hBnxjZJEX82hOJ&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cvprv%2Cmime%2Cns%2Cgir%2Cclen%2Cdur%2Clmt&sig=AOq0QJ8wRQIgaqKAjgRHlNms4IMVKwGJmRb2DOl7slWujc2OeIqIlSkCIQDvVhAPmxgLg0g2WvrgjB0iNNnCyDbyRQQvu5ODx4PLXA%3D%3D&lsparams=mh%2Cmm%2Cmn%2Cms%2Cmv%2Cmvi%2Cpl%2Cinitcwndbps&lsig=AG3C_xAwRAIgapuFt6YijG3nAVfbULkJq2_uAwcjOnZpd0ZNUo1h5NMCIGgJh22ksRMeMOUkhhQUlRapjqa4DhVv-KfcfnYhkW8l

【问题讨论】:

    标签: javascript ajax blob


    【解决方案1】:

    我目前还在为 Firefox 开发 YouTube 视频下载器扩展。如果您使用的是ytdl-core,则响应对象包含一个链接,该链接在res.player_response.streaming_data.formats[0] 中都有。但是,只有一个这样的链接,不允许用户选择他们喜欢的分辨率,因此能够将两者合并将非常有帮助。 此外,如果您使用 youtube-dl 或任何类似的响应对象,则响应对象应与 ytdl-core 相同或非常相似

    【讨论】:

      猜你喜欢
      • 2015-03-28
      • 2015-03-25
      • 2021-04-19
      • 1970-01-01
      • 1970-01-01
      • 2022-06-11
      • 2019-10-07
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多