通過文件輸入從視頻文件創建縮略圖

我試圖從input type='file'表單中的視頻文件（mp4,3gp）創建縮略圖預覽。許多人都說這隻能在服務器端完成。我覺得這很難相信，因爲我剛剛使用HTML5 Canvas和Javascript碰到了這個小提琴。通過文件輸入從視頻文件創建縮略圖

Thumbnail Fiddle

唯一的問題是這需要視頻存在和用戶需要點擊一個按鈕捕獲縮略圖之前點擊播放。我想知道如果沒有玩家在場並且用戶點擊按鈕，是否有獲得相同結果的方法。例如：用戶點擊文件上傳並選擇視頻文件，然後生成縮略圖。歡迎任何幫助/想法！

來源

2014-05-13 ryan

玩家顯然必須在場，因爲這是什麼產生的圖像捕獲。 – vogomatix

你可以使用css隱藏播放器，並調用videoTag.play（）來開始播放。我建議跳入18秒，等待它顯示，然後將其發送到畫布drawImage例程。我用鉻這種方式將電影文件夾變成了一個縮略圖畫廊，所以我可以向你保證它的工作。 – dandavis

做得很好的「dandavis」。現在可以將文件上傳到某個服務器，或者可以在客戶端完成。假設用戶在他/她的桌面上選擇一個視頻，然後從輸入內容中運行此腳本？ – ryan

Canvas.drawImage必須基於html內容。

source

here is a simplier jsfiddle

//and code 
function capture(){ 
    var canvas = document.getElementById('canvas'); 
    var video = document.getElementById('video'); 
    canvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight); 
}

這個方案的好處是，你可以選擇你基於視頻的時間要的縮略圖。

來源

2015-04-22 18:53:33 Giu

這是非常好的，我會盡快使用，歡呼！（評論，因爲我的upvotes今天使用 – ConorJohn

是他們的任何方式來做到這一點，而不需要加載視頻文件 –

我只能得到視頻大小0 0和白色圖像 –

最近需要這一點，並做了相當長的一段測試和煮下來到最低限度，看到https://codepen.io/aertmann/pen/mAVaPx

有一些限制，其中它的工作原理，但還算不錯的瀏覽器支持目前：Chrome瀏覽器，火狐，Safari，歌劇， IE10，IE11，Android（Chrome），iOS Safari（10+）。

video.preload = 'metadata'; 
video.src = url; 
// Load video in Safari/IE11 
video.muted = true; 
video.playsInline = true; 
video.play();

來源

2016-09-28 17:36:39

你的codepen似乎很好，但是當我嘗試上傳> 100MB的iPhone人像拍攝模式視頻有時屏幕截圖是空白的或有時他們不上傳只FYI，我想畫布大小爲170×100如果你面臨類似的問題iPhone肖像模式視頻？ – vbjain

@vbjain不能說我有，對不起。 –

通過文件輸入從視頻文件創建縮略圖

回答

相關問題