15、HTML5 视频与画布的创意应用与技巧

HTML5 视频与画布的创意应用与技巧

1. 临时画布的高效视频拼接

在处理视频时，为了实现高效的视频拼接效果，可以借助临时画布（Scratch Canvas）。由于 drawImage() 函数能接受画布作为输入，我们可以先将视频帧绘制到临时画布上，再从这个临时画布获取输入，再次使用 drawImage() 函数将其绘制到显示画布上。

以下是实现视频拼接的代码示例：

<video controls height="270px" width="480px" >
  <source src="HelloWorld.mp4"  type="video/mp4">
  <source src="HelloWorld.webm" type="video/webm">
  <source src="HelloWorld.ogv"  type="video/ogg">
</video>
<canvas width="400" height="300" style="border: 1px solid black;">
</canvas>
<canvas id="scratch" width="320" height="160"
        style="display: none;"></canvas>
<script>
  window.onload = function() {
    initCanvas();
  }
  var context,