La Ferme du web - Les forums
Venez baraguiner avec la communauté !
Vous n'êtes pas identifié.
#1 22/05/2010 03:12:56
- anis
- Membre
- Date d'inscription: 22/05/2010
- Messages: 1
html5 : afficher video dans 1 canvas
Bonjour,
je m'amuse (un bien grand mot) à essayer d'afficher d'une video dans un canvas.
j'essaie de partir d'exemples trouvés sur le web, mais, j'ai du mal.
mon code actuel ressemble à ça, après avoir testé pas mal d'autres choses.
Code:
<style type="text/css">
canvas, video {display:block;width:600px;height:350px;}
</style>
<script type="text/javascript">
window.addEventListener('load', function () {
// On récupère l'objet canvas
var elem = document.getElementById('canvasElem');
if (!elem || !elem.getContext) {
return;
}
// On récupère le contexte 2D
var context = elem.getContext('2d');
var video = document.getElementById("video01");
if (!context) {
return;
}
// Le navigateur est compatible, le contexte a bien été récupéré, on peut continuer...
context.drawImage(video,0,0,600,350); // la video n'est pas récupérée / ne s'affiche pas dans le canvas
}, false)
</script>
</head>
<body>
<video id="video01" autoplay="true" src="big_buck_bunny.mp4" type="video/mp4">no video</video>
<canvas id="canvasElem"></canvas>Je test sur safari, changer le tag video en ajoutant la source au milieu ne change rien.
Si quelqu'un pouvait m"aiguiller...
Merci,
Hors ligne
22/05/2010 03:12:56
- Botte De Foin Publicitaire
#2 24/05/2011 09:08:48
Re: html5 : afficher video dans 1 canvas
Hello,
Tu as une vidéo h264 apparemment. Elle s'affiche bien en dehors du canvas? Tu as essayé avec un autre navigateur?
J'ai un exemple à base de h264 qui fonctionne que j'utilise dans cet article si tu veux: http://blogs.msdn.com/b/davrous/archive … s-2-4.aspx . L'exemple affiche 2 vidéos et les mélange avant la gestion du fond vert. N'hésites pas à y jeter un coup d'oeil pour voir les différences avec ton code.
En regardant vite fait, j'ai l'impression que tu oublies de rappeler le code d'affichage tout les N millisecondes pour afficher les differentes frames de la vidéo dans ton canvas.
Bye,
David
Hors ligne