HTML5 비디오 캔버스

내가 여기 같은 이미지로 비디오 프레임을 캡처하기 위해 노력하고있어에서 이미지 :HTML5 비디오 캔버스

는

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

내 간단한 코드 : IE에

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);

이 우수하지만 크롬에서 작동 나는 항상 검은 캔버스를 가지고있다 ...

데모 여기 :

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

어떻게 해결할 수 있습니까?

출처

2012-10-08 Andrew

프랑스어 크롬에서 테스트 해요 그리고 그것은 나를 위해 작동합니다. –

@Andrew 너 어디 론가 가지고 있니? 문제가 뭔지 알고 싶습니다. – urbananimal

@urbananimal : 수 시간 동안 조사에 시간을 들였고 Chrome에서 MP4 파일에 문제가있는 것 같습니다. Appcropolis는 나를 위해 작동하지만 ogv 소스에서만 작동합니다. 어쩌면 mp4 비디오 나 버그로 가득 찬 html5 캔버스 지원이 없을까요? – Andrew

나를 위해 Chrome에서 완벽하게 작동합니다!

동영상을 시작해야하며 동영상이 시작되지 않으면 검은 화면이 표시됩니다.

출처

2012-10-08 11:45:29 bnz

나를 위해 아닙니다 ... 크롬 카나리아에서 작동하지만 버전을 릴리스하지 않습니다. – urbananimal

@Andrew, 나도 검은 화면이있어. 당신의 시스템 사양은 무엇입니까? 내 Windows7 홈 x64, 크롬 22.0.1229.79 m – Sergey

내 시스템은 Windows 7 및 Chrome 22.0.1229.79 ... 자습서는 우수하지만 내 코드는 – Andrew

"seeked"이벤트를 사용해야합니다! 내 영어

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

죄송합니다 내가

출처

2013-03-08 19:25:29 Duprat

HTML5 비디오 캔버스

답변

관련 문제