按照固定帧率同时播放多个视频

[caohongz]

我的需求是在视频编辑轨道上同一时间存在多个视频，按照轨道播放时会把所有视频画面渲染到canvas上，但是我使用tick方法按照帧率获取时，就会造成卡顿，音频播放也会卡顿，是否有更佳的方式能保证正常播放呢？

我的示例代码如下：

const playVideo = async () => {
  clearInterval(timer);
  clipList.length !== 0 && clipList.map(clip => clip.destroy())
  clipList = []
  clipList.push(new MP4Clip((await fetch(videoSrc)).body, { audio: true }))
  clipList.push(new MP4Clip((await fetch(videoSrc1)).body, { audio: true }))
  clipList.push(new MP4Clip((await fetch(videoSrc2)).body, { audio: true }))
  clipList.push(new MP4Clip((await fetch(videoSrc3)).body, { audio: true }))
  let res = await Promise.all(clipList.map(async clip => await clip.ready))
  if (res) {
    timesSpeedDecode(1);
  }
  async function timesSpeedDecode(times) {
    let startTime = performance.now();
    const ctx = canvasRef.value.getContext("2d");
    timer = setInterval(async () => {
      let startTime1 = performance.now();
      let videoList = []
      clipList.forEach(async (clip, index) => {
        if (clip) {
          const { state, video, audio } = await clip.tick(Math.round((performance.now() - startTime) * 1000) * times)
          if (state === 'done') {
            // clearInterval(timer);
            clipList[index].destroy();
            return;
          }
          if (video != null && state === 'success') {
            ctx.drawImage(
              video,
              0,
              0,
              video.codedWidth,
              video.codedHeight,
              0,
              0,
              ctx.canvas.width,
              ctx.canvas.height,
            );
            video.close();
            console.log('end', index, performance.now() - startTime1)
          }
          if (audio && state === 'success') {
            // 创建一个音源
            const source = audioCtx.createBufferSource();
            const len = audio && audio.length !== 0 ? audio[0].length : 0;
            if (len !== 0) {
              const buf = audioCtx.createBuffer(2, len, 48000);
              buf.copyToChannel(audio[0], 0);
              buf.copyToChannel(audio[1], 1);
              source.buffer = buf
              source.connect(audioCtx.destination);
              // 播放音频
              startAt = Math.max(audioCtx.currentTime, startAt);
              source.start(startAt);
              startAt += buf.duration
            }
          }
        }
      })
    }, 1000 / 30);
  }
}

[hughfenghen]

确认官方 DEMO 是否有问题；
若无问题请提供可复现的 项目。

请阅读 #60 ，示例代码需要高亮

[hughfenghen]

按 #60 要求，关闭此 issue