webM视频合成演示页面

展示

代码

• HTML：

  <h4>canvas效果</h4>
  <p class="remind">视频生成非必须可见，为了方便大家学习，故屏内显示。</p>
  <canvas id="canvas" width="600" height="400"></canvas>
  
  <p class="flex">
      <button id="generate">生成webM视频</button>
      <a id="download" download="htmlapi-book.webm">下载</a>
  </p>
  
  <div class="view">
      <video id="video" width="600" height="400" controls autoplay></video>
      <p class="time">webm视频生成时间：<output id="output"></output>s</p>
  </div>

• CSS：

  canvas,
  video {
  	width: 300px;
  	height: 200px;
  }

• JS：

  // 页面内动画示意
  // handleDraw 函数代码受制于篇幅原因，不展示
  // 有兴趣可以直接右键-页面源代码进行查看
  handleDraw(document.getElementById('canvas'));
  
  // 点击按钮的webM生成
  generate.onclick = function () {
      // 构造webm生成器
      var videoWriter = new WebMWriter({
          // 每秒30帧
          frameRate: 30
      });
      // 创建屏幕外 canvas
      var canvas = document.createElement('canvas');    
      canvas.width = 600;
      canvas.height = 400;
      // 时间记录
      var timer = Date.now();
      // handleDraw源码可右键页面查看
      handleDraw(canvas, function () {
          videoWriter.addFrame(canvas);    
      }, function () {
          videoWriter.complete().then(function(webMBlob) {
              var blobUrl = URL.createObjectURL(webMBlob);
              video.src = blobUrl;
              download.href = blobUrl;
              
              // 时间设置
              output.innerHTML = Math.round((Date.now() - timer) / 10) / 100;
          });    
      });
      
      // 一次性点击
      this.disabled = true;
  };