HTML5視頻截圖

我試圖在電影中預定義時間截取視頻。所以我用畫布元素試了一下。問題是，當您繪製視頻圖像時必須播放視頻，但我需要圖像仍然暫停。所以，我想這一點：HTML5視頻截圖

video.play(); 
context.drawImage(video,0,0,canvas.width,canvas.height); 
video.pause();

但正如你可能會想到，在視頻暫停前的畫布繪製完，導致沒有屏幕截圖。那麼是否有drawImage的回調函數？在我的情況下，繪圖過程需要50ms左右，但它並沒有感到安全的事：

setTimeout(function() { video.pause(); }, 50);

來源

2010-12-02 tbleckert

+1等待答案:) – 2010-12-02 10:42:37

嘿嘿，好像這些畫布和視頻的問題很難找到答案 – tbleckert 2010-12-02 10:46:48

看看這篇文章，應該會有幫助，並有HTML5 canvas的視頻截圖演示：http：///techslides.com/create-youtube-screenshots-with-html5-and-canvas/ – iwek 2012-07-20 13:41:55

嗯......它似乎實際上可以從暫停的視頻中繪製圖像。只要保持間隔從頭開始。

來源

2011-02-08 08:24:58 tbleckert

我不知道這是你以後，但是你試過採取截圖使用手動MWSnap？當你截圖的時候它會凍結屏幕，所以我猜它可能適合你。

來源

2011-01-03 08:33:01 mingos

而不是暫停，你可以嘗試將視頻的playbackrate設定爲非常低（或零是否可行？）：

video.playbackRate = 0.0001; // or 0

這將有效地暫停視頻爲您服務。

您也可以在畫布設置爲黑色，tranparency 0.99，然後掃描所產生的圖像在超時非黑色像素：

setTimeout(function() { 
    pixel = context.getImageData(image.width/2, image.height/2, 1, 1); 
    // do something with the pixel, kick off another timeout if it is still has transparency 
}, 50);

當採用後一種方法的視頻必須是同一域作爲腳本，並且由於安全限制而不能在本地文件上工作。

來源

2011-01-03 09:20:59 stef

回答

相關問題