webm-writer.js实现webm视频合成并下载实例页面

CSS代码：

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

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="css-selector-world-v2.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>

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;
};