h5 video 手机 显示第一帧_H5 Video截取第一帧 Canvas 动态视频渲染、截取

(function() {

var video = document.getElementById("video");

var canvas = document.getElementById("canvas");

var interval = null;

//截取视频画面

var CaptureFirstFrame = function() {

this.CaptureVideo = function(img, rsy, bbg) {

//canvas 缩放比率

this.scale = 1;

//创建canvas元素

this.canvas = document.createElement("canvas");

//设置canvas画布大小

this.canvas.width = canvas.width = video.videoWidth * this.scale;

this.canvas.height = canvas.height = video.videoHeight * this.scale;

//设置canvas画布内容、位置

this.canvas.getContext('2d').drawImage(video, 0, 0, this.canvas.width, this.canvas.height);

//注：

/*

* canvas.toDataURL("image/png", 1) 方法可能会出错！！！

* 因为 【 如果视频文件所在的 域 和 当前index.htm