HTML 5 Video et canvas -- Ipad
Bonjour à tous,
Voila, je dois afficher une video dans un canvas aux formes polygonales.
Ceci doit fonctionner sur IE9, Chrome, Firefox, et .. Ipad.
J'ai laissé tomber l'utilisation du DrawImage car non reconnue par IOS, pour m'orienter vers CreatePattern.
Mon code :
Code:
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> |
Cela fonctionne sur tous les navigateurs précédemment cités exepté IOS.
En déclenchant la fonction putimage, je parviens tout de même a y charger une image.
Quelqu'un ? une idée ?
Merci d'avance.
