1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
|
<video width="840" height="472" id="video1" controls >
<source src="video.m4v" type="video/m4v" />
<source src="video.mp4" type="video/mp4" />
<source src="video.ogv" type="video/ogg" />
not supported
</video>
<canvas id="c2" width="860" height="472"></canvas>
<script>
var video = $('#video1').get(0);
var ctx = document.getElementById('c2').getContext('2d');
$("#video1").bind("loadeddata", function() {
window.setInterval(drawFrame, 1000 / 25);
});
function drawFrame() {
var ptrn = ctx.createPattern(video,'repeat');
ctx.fillStyle = ptrn;
ctx.fillRect(0,0,840,472);
}
function putimage(){
var img = new Image();
img.src = 'image.png';
var ptrn = ctx.createPattern(img,'repeat');
ctx.fillStyle = ptrn;
ctx.fillRect(0,0,840,472);
}
</script> |
Partager