HTML5 <canvas> 标签播放的 Canvas 视频怎么倍速播放

要在 HTML5 `<canvas>` 标签播放的 Canvas 视频中倍速播放，可以使用 JavaScript 和 HTML5 Video API 来实现。

以下是一个示例代码，演示如何使用 Video API 和 JavaScript 将 Canvas 视频的播放速度提高到 2 倍：

<canvas id="myCanvas"></canvas>
<video id="myVideo" style="display:none;">
  <source src="myCanvasVideo.webm" type="video/webm">
</video>

<script>
  // 获取 canvas 和 video 元素
  var canvas = document.getElementById('myCanvas');
  var video = document.getElementById('myVideo');

  // 创建一个绘图上下文
  var ctx = canvas.getContext('2d');

  // 加载视频
  video.load();

  // 监听视频加载完成事件
  video.addEventListener('canplay', function() {
    // 调整视频播放速度为 2 倍
    video.playbackRate = 2.0;

    // 设置 canvas 尺寸和视频尺寸相同
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;

    // 每隔 30 毫秒绘制一帧画面
    setInterval(function() {
      ctx.drawImage(video, 0, 0);
    }, 30);
  });
</script>

在这个示例代码中，我们首先通过 JavaScript 获取了 Canvas 和 Video 元素。然后，我们使用 Video API 加载了 Canvas 视频，并在视频加载完成后将视频的播放速度提高到 2 倍。接下来，我们将 Canvas 尺寸设置为视频尺寸，并在每隔 30 毫秒绘制一帧画面，从而实现了 Canvas 视频的倍速播放。

请注意，这种方法需要浏览器支持 HTML5 Video API，并且需要视频格式为 WebM，才能正常工作。