캡처 그룹

Question

이 코드와 캔버스를 사용하여 HTML5 비디오에서 브라우저에서 미리보기 그룹을 생성하는 것을 시도하고있다 :

 var fps = video_model.getFps(); //frames per second, comes from another script 
     var start = shot.getStart(); //start time of capture, comes from another script 
     var end = shot.getEnd(); //end time of capture, comes from another script 

     for(var i = start; i <= end; i += 50){ //capture every 50 frames 
      video.get(0).currentTime = i/fps; 

      var capture = $(document.createElement("canvas")) 
       .attr({ 
        id: video.get(0).currentTime + "sec", 
        width: video.get(0).videoWidth, 
        height: video.get(0).videoHeight 
       }) 

      var ctx = capture.get(0).getContext("2d"); 
      ctx.drawImage(video.get(0), 0, 0, video.get(0).videoWidth, video.get(0).videoHeight); 

      $("body").append(capture, " "); 

     } 

캡처의 양이 올바른지,하지만 문제 크롬에서는 모든 캔버스가 검은 색으로 표시되고 파이어 폭스에서는 항상 동일한 이미지를 표시합니다.

어쩌면 문제는 루프가 너무 빨라 캔버스를 칠할 수 없지만 .drawImage()가 비동기식이기 때문에 이론적으로 캔버스가 다음 줄로 넘어 가기 전에 칠해 져야한다는 것입니다. .

이 문제를 해결하는 방법에 대한 아이디어가 있으십니까? 감사합니다. .

Answer 1

나는 이걸로 싸우는 시간을 보내고 마침내 "찾은"사건에 기반한 해결책을 찾았습니다. 이 작업을 위해, 비디오가 완전히로드해야합니다 :

코드는 다음과 같이 진행됩니다

이는 크롬과 파이어 폭스에서 나를 위해 일했다

 var fps = video_model.getFps(); //screenshot data, comes from another script 
     var start = shot.getStart(); 
     var end = shot.getEnd(); 


     video.get(0).currentTime = start/fps; //make the video jump to the start 


     video.on("seeked", function(){ //when the time is seeked, capture screenshot 
      setTimeout(//the trick is in giving the canvas a little time to be created and painted, 500ms should be enough 
       function(){ 
        if(video.get(0).currentTime <= end/fps){ 

         var capture = $(document.createElement("canvas")) //create canvas element on the fly 
         .attr({ 
          id: video.get(0).currentTime + "sec", 
          width: video.get(0).videoWidth, 
          height: video.get(0).videoHeight 
         }) 
         .appendTo("body"); 

         var ctx = capture.get(0).getContext("2d"); //paint canvas 
         ctx.drawImage(video.get(0), 0, 0, video.get(0).videoWidth, video.get(0).videoHeight); 

         if(video.get(0).currentTime + 50/fps > end/fps){ 
          video.off("seeked"); //if last screenshot was captured, unbind 
         }else{ 
           video.get(0).currentTime += 50/fps; //capture every 50 frames 
         } 


        } 
       } 
       , 500); //timeout of 500ms 


     }); 

, 나는 탐색했습니다 이벤트가 버그가 될 수 있음을 읽은를 특정 브라우저의 일부 버전에서.

희망이 있으면 누구에게나 유용 할 수 있습니다. 누군가가 더 깔끔하고 좋은 해결책을 제시한다면, 그것을 보는 것이 좋을 것입니다.