使用Canvas從Video.js捕獲幀

Question

我試圖通過捕獲當前幀與畫布，創建一個圖像，在圖像下執行所有玩家更改等，然後淡出圖像淡出Video.js視頻。

我似乎無法訪問通過畫布的視頻，我得到

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': No function was found that matched the signature provided. 

下面的代碼

var video = document.getElementById('video'); 
    var canvas = document.createElement('canvas'); 
    var context = canvas.getContext('2d'); 
     context.drawImage(video, 0, 0, video.width, video.height); 
    var dataURL = thecanvas.toDataURL(); 

     //create img 
     var img = document.createElement('img'); 
     img.setAttribute('src', dataURL); 

     //append img in container div 
     document.getElementById('body').appendChild(img); 

視頻是由此產生：

   <video id='video' class='video-js' preload controls> 
      <source src='http://example.com/video.mp4"' type='video/x-m4v' /> 
      </video> 

視頻是所有運行良好等。

要處理的視頻我用

var player = videojs('video'); 
    player.dispose(); 

並承擔這將是一個更好的選擇，但卡盤「球員」入context.drawImage它已經宣佈沒有幫助後。

Answer 1

這似乎是不可能與Video.js我已切換到爆米花和使用https://github.com/rwaldron/popcorn.capture來獲取幀。這是行得通的。