uniapp canvas 播放视频

uniapp中可以使用原生的 `<canvas>` 标签来播放视频。以下是一个简单的示例代码：

<template>
  <canvas id="myCanvas"></canvas>
</template>

<script>
export default {
  mounted() {
    const canvas = uni.createCanvasContext('myCanvas', this);
    const video = uni.createVideoContext('myVideo', this);

    video.src = '<视频链接>';
    video.play();

    setInterval(() => {
      video.drawToCanvas({
        canvasId: 'myCanvas',
        success(res) {
          canvas.drawImage(res[0].tempFilePath, 0, 0, canvas.width, canvas.height);
          canvas.draw();
        }
      });
    }, 1000 / 60);
  }
}
</script>

在这个示例中，我们首先在模板中创建了一个 `<canvas>` 标签，并给它一个唯一的 id（这里是 `myCanvas`）。然后，在 `mounted` 钩子函数中，我们通过 `uni.createCanvasContext` 方法创建了一个画布上下文对象 `canvas`，并通过 `uni.createVideoContext` 方法创建了一个视频对象 `video`。

接下来，我们设置了视频的源地址 `video.src`，并调用了 `video.play()` 方法开始播放视频。然后，我们使用 `setInterval` 定时器来不断将视频绘制到画布上。在每次定时器触发时，我们调用 `video.drawToCanvas` 方法将视频绘制到画布上，并在绘制成功后使用 `canvas.drawImage` 将绘制的图像显示在画布上。

请注意，为了使画布和视频保持同步，我们将定时器的间隔设置为 1000/60 毫秒，即每秒 60 帧。