vidéo HTML5 - image sur toile

Je suis en train de capturer l'image vidéo comme l'image comme ici:vidéo HTML5 - image sur toile

http://appcropolis.com/using-html5-canvas-to-capture-frames-from-a-video/

Mon code simple:

var video = document.getElementById("video"); 
var bottom = document.getElementById("bottom"); 


var canvas = document.createElement('canvas'); 

canvas.width = 500; 
canvas.height = 282; 

var ctx = canvas.getContext('2d'); 
ctx.drawImage(video, 0, 0, 500, 282); 

bottom.innerHTML = ''; 
bottom.appendChild(canvas);

Sur IE, il fonctionne excellente mais sur Chrome J'ai toujours eu en toile noire ...

Demo ici:

http://html5-canvas-test.vipserv.org/

Une idée pour résoudre ce problème?

Source

2012-10-08 Andrew

Testé sur Chrome et il fonctionne pour moi. –

@Andrew avez-vous quelque part avec ça? Je serais intéressé de savoir quel est le problème. – urbananimal

@urbananimal: J'ai passé quelques heures sur l'enquête et ressemble à un problème avec les fichiers MP4 sur mon Chrome. Appcropolis fonctionne pour moi mais seulement avec ogv source. Peut-être qu'il n'y a pas de support de toile html5 complet avec des vidéos mp4 ou bug? – Andrew

Fonctionne parfaitement dans Chrome pour moi!

Mais vous devez démarrer la vidéo, si la vidéo n'est pas lancée, vous obtiendrez un écran noir.

Source

2012-10-08 11:45:29 bnz

Pas pour moi ... Fonctionne en chrome canari mais pas en version commerciale. – urbananimal

@Andrew, j'ai aussi un écran noir. Quelles sont les spécifications de votre système? Mon Windows7 Home x64, Chrome 22.0.1229.79 m – Sergey

Mon système est Windows 7 et Chrome 22.0.1229.79 ... tutoriel fonctionne très bien mais mon code n'est pas – Andrew

Vous devez utiliser l'événement "recherché"!

$(video).seeked(function() { 
    ctx.drawImage(video, 0, 0, 500, 282); 
});

Désolé pour mon anglais, je suis français

Source

2013-03-08 19:25:29 Duprat

vidéo HTML5 - image sur toile

Répondre

Questions connexes