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 : S�lectionner tout - Visualiser dans une fen�tre � part
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.