En ce qui concerne les vidéos, vive flash... On choisit une seule extension de fichier video pour construire son code sans être obligé d'en mettre 36.
J'ai repris l'exemple vidéo flashpascal pour lire une video mp4:
et voici l'équivalent html5+javascript dans la balise canvas.
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 program Video; uses Flash8; {$FRAME_WIDTH 640} {$FRAME_HEIGHT 368} {$BACKGROUND 0} {$VIDEO name="my_video" depth="1" left="0" top="0" width="640" height="368"} type MyNetStream = class(NetStream) procedure onStatus(infoObject: TInfoObject); override; end; var nc: NetConnection; ns: MyNetStream; vo: Video external 'my_video'; procedure MyNetStream.onStatus(infoObject: TInfoObject); begin if infoObject.code = 'NetStream.Buffer.Empty' then ns.play('vid.mp4'); end; begin nc := NetConnection.Create; nc.connect(nil); ns := MyNetStream.Create(nc); vo.attachVideo(ns); ns.play('vid.mp4'); end.
On pourrait sans doute utiliser window.requestAnimationFrame ici aussi...
a+
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
39
40
41
42
43
44
45
46
47
48 <!DOCTYPE html> <head> <style> body { background: black; } #cancan { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } #vid { visibility:hidden; } </style> </head> <body> <canvas id=cancan></canvas> <video id=vid controls> <source src=vid.mp4 type=video/mp4> //à mettre un .ogv aussi </video> <script> var myvideo = document.getElementById('vid'); var canvas = document.getElementById('cancan'); var cxt = canvas.getContext('2d'); var h=canvas.height; //ce qui limite, c'est toujours la hauteur du navigateur var w=Math.floor(640*h/368); //video 640x368 ici var x=Math.floor((canvas.width-w)/2); function draw() { myvideo.play(); cxt.drawImage(myvideo,x,0,w,h); } setInterval(draw, 10); </script> </body> </html>
Partager