前端 - 我有2个视频，我想实现保证2个视频都下载完成再播放，我可以这样合并视频吗？

Question

    const videoRef = $('.home_bg_logo_box_video_1')[0] as HTMLVideoElement;    const videoURL = 'video/1.mp4';    // 加载视频完成后再播放    fetch(videoURL)      .then((response: any) => response.blob())      .then((blob: Blob) => {        init(blob);      });    Promise.all([fetch('video/1.mp4'), fetch('video/2.mp4')])      .then((responses) => {        // 合并2个视频 生成一个新的视频        return Promise.all(responses.map((response) => response.blob()));      })      .then((blobs) => {        console.log(blobs);        // blobs 是一个包含了两个blob的数组        // 将两个视频合并成一个新的视频        const blob = new Blob(blobs, { type: 'video/mp4' });        init(blob);      });    function init(blob: Blob) {      videoRef.src = URL.createObjectURL(blob);      // 当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时，会发生 canplaythrough 事件。      videoRef.addEventListener('canplaythrough', () => {        $('.home_bg_logo_box_loading').css({          display: 'none',        });        videoRef.play();      });      videoRef.addEventListener('ended', function () {        // 播放结束后的操作 从第N秒开始播放        videoRef.currentTime = 8;        videoRef.play();      });    }

好像没用，还是只展示第一个的，我打印的blob是有2个的。js不能做到合并吗？

Answer 1

https://segmentfault.com/q/1010000018680806

Answer 2

先在服务器端先合并视频，然后在客户端播放合并后的视频不就好了。前端实现可以，但是要用一些专门的库，比如 ffmpeg.js，但是前端来处理会有性能问题。
或者：你只是想在一个视频播放完后立即播放另一个视频这样不就好了，监听第一个视频播放完没

videoRef.addEventListener('ended', function () {  // 播放结束后的操作  videoRef.src = URL.createObjectURL(secondBlob);  videoRef.play();});