效果如图所示:
function play() {
var video = $("#myVideo").get(0).play();
}
function stop() {
var video = $("#myVideo").get(0).pause();
}
$(document).ready(function () {
var video = $("#myVideo");
var _video = video.get(0);
$("#myVideo").bind("play", function () {
drawCanvas();
});
function drawBlock(context, x, y, width, height, color) {
var imageData = context.createImageData(width, height);
var pixelArray = imageData.data,
pixel = null;
for (var m = 0, length = pixelArray.length; m < length; m += 4) {
pixelArray[m] = pixelArray[m + 1] = pixelArray[m + 2] = pixelArray[m + 3] = color;
}
context.putImageData(imageData, x, y);
}
function drawCanvas() {
if (_video.paused || _video.ended) {
return;
}
var canvas = $("#canvas");
var _canvas = canvas.get(0);
var context = _canvas.getContext("2d");
context.drawImage(_video, 0, 0, 640, 360);
setTimeout(drawCanvas, 30);
}
});
playstop