html5 canvas 直播,html5中canvas画布同步video播放器播放图像

效果如图所示:

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

}

});