CSS canvas 捕捉视频video元素截图

video元素介绍：

http://www.runoob.com/html/html5-video.html

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video

video元素dom-webapi（属性、方法、事件）

http://www.runoob.com/tags/ref-av-dom.html

canvas dom-webapi

http://www.w3school.com.cn/jsref/dom_obj_canvas.asp

视频捕捉截图：

// 添加一个video元素
(function(window){
        let video=document.createElement("video");
        video.src = "/storage/emulated/0/UZMap/A6097221144053/aliyunvod/1553142977717.mp4";
        // video.autoplay = true;
        video.id = "video";
        video.currentTime = 1;
        document.body.appendChild(video);

})();

// 绘制canvas画布、获取data
function getData(){
      let v = document.getElementById("video");
      let canvas=document.createElement("canvas");
      let ctx = canvas.getContext("2d");
      ctx.drawImage(v, 0, 0, 270, 135);
      // document.body.appendChild(canvas);
      console.log(canvas.toDataURL());
 }        

TIPS：

在获取dataURL 时，如果为移动端有可能出现以下问题：

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may

原因：由于浏览器的安全考虑，如果在使用canvas绘图的过程中，使用到了外域的图片资源，那么在toDataURL()时会抛出安全异常。

解决方案1.

如果想使用toDataURL()生成图片文件的话，在canvas绘图过程中使用的图片应该是当前域下的。

解决方案2.

访问的服务器允许，资源跨域使用，也就是说设置了CORS跨域配置，Access-Control-Allow-Origin。

 

个人使用的是第一种方法：使用当前域下的资源，访问native 资源即可。

参考地址：https://blog.csdn.net/u013040887/article/details/78986598