nodejs實(shí)現(xiàn)截取上傳視頻中一幀作為預(yù)覽圖片

客戶有個(gè)上傳視頻的需求,上傳的視頻呢,需要能在線播放并且列表中必須出現(xiàn)類似優(yōu)酷等視頻首頁(yè)上的那種縮略圖,成品如下圖所示:

創(chuàng)新互聯(lián)專注于網(wǎng)站建設(shè)|網(wǎng)站建設(shè)維護(hù)|優(yōu)化|托管以及網(wǎng)絡(luò)推廣,積累了大量的網(wǎng)站設(shè)計(jì)與制作經(jīng)驗(yàn),為許多企業(yè)提供了網(wǎng)站定制設(shè)計(jì)服務(wù),案例作品覆蓋玻璃鋼雕塑等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷售的產(chǎn)品,結(jié)合品牌形象的塑造,量身開(kāi)發(fā)品質(zhì)網(wǎng)站。

nodejs實(shí)現(xiàn)截取上傳視頻中一幀作為預(yù)覽圖片

當(dāng)然了,上傳視頻的界面就不貼出來(lái)了,畢竟我們這篇文章的重點(diǎn)不在于如何上傳,而在于如何用nodejs截取視頻中的幀!~

這里我們需要一個(gè)開(kāi)源的第三方插件----大名鼎鼎的多媒體編解碼框架ffmpeg,需要安裝在服務(wù)器上由nodejs調(diào)用,

代碼貼出如下:

function fecthVideoThumbnail(entryid, index){ 
 var filename = path.join(imageDir, entryid, index + videoSuffix); 
 var thumb = path.join(imageDir, entryid, "overview",index + thumbSuffix); 
 var thumbPath = path.join(imageDir, entryid, "overview"); 
 if (!fs.existsSync(thumbPath)) { 
  <span > </span>fs.mkdirSync(thumbPath); 
 <span > </span>} 
 var that = this; 
 filename = filename.replaceAll("\\\\","\\\\"); 
 var cmdthumb = thumb.replaceAll("\\\\","\\\\"); 
 if(!fs.existsSync(thumb)){ 
  exec("ffmpeg -ss 00:00:10 -i "+filename+" -y -f image2 -t 0.001 "+cmdthumb+"", function() { 
    console.log(arguments[0]); 
    console.log('success'); 
    readFileEntry(thumb,that.res); 
  }); 
 }else{ 
  readFileEntry(thumb,that.res); 
 } 
  
} 
function readFileEntry(filename, response) { 
 path.exists(filename, function(exists) { 
  if (!filename || !exists) { 
   response.writeHead(404); 
   response.end(); 
   return; 
  } 
  fs.readFile(filename, "binary", function(err, file) { 
   if (err) { 
    response.writeHead(404); 
    response.end(); 
    return; 
   } 
 
   var contentType = 'none'; 
   var ext = path.extname(filename); 
   switch (ext) { 
   case ".xml": 
    contentType = 'application/xml;charset=utf-8'; 
    break; 
   case ".json": 
    contentType = 'application/json;charset=utf-8'; 
    break; 
   case ".png": 
    contentType = 'image/png'; 
    break; 
   case ".jpg": 
    contentType = 'image/jpeg'; 
    break; 
   case ".flv": 
    contentType = "video/flv"; 
    break; 
   } 
    
   response.writeHead(200, { 
    'Content-Type' : contentType, 
    'Content-Length' : file.length, 
    'Accept-Ranges' : 'bytes', 
    'Server' : 'Microsoft-IIS/7.5', 
    'X-Powered-By' : 'ASP.NET' 
   }); 
   response.write(file, "binary"); 
   response.end(); 
 
  }); 
 }); 
} 

重點(diǎn)就是這段

exec("ffmpeg -ss 00:00:10 -i "+filename+" -y -f image2 -t 0.001 "+cmdthumb+"", function() { 
    console.log(arguments[0]); 
    console.log('success'); 
    readFileEntry(thumb,that.res); 
  }); 

exec函數(shù)可以像cmd DOS命令臺(tái)一樣直接執(zhí)行系統(tǒng)命令,ffmpeg提供的正是這樣的接口。具體的API可以參照f(shuō)fmpeg的文檔,-ss代表指定視頻初始進(jìn)度,-i代表入?yún)⒁曨l文件位置,-y代表Overwrite output files without asking.直接覆蓋已存在文件而不必詢問(wèn),-t代表截取時(shí)長(zhǎng)(圖片的話0.001即可),-f代表
-f fmt (input/output)
Force input or output file format. The format is normally auto detected for input files and guessed from the file extension for output files, so this option is not needed in most cases.

強(qiáng)制輸出文件格式,基本上用不到……最后cmdthumb代表輸出文件名。nodejs的exec執(zhí)行完成之后,會(huì)通知回調(diào)函數(shù)。此時(shí)返回生成的縮略圖即可,將此過(guò)程寫成rest服務(wù),直接將url填充在img標(biāo)簽的src屬性中即可!

nodejs寫這種服務(wù)端程序非常簡(jiǎn)單,方便,輕量。比java要簡(jiǎn)潔得多,并且不需要像tomcat那么麻煩。唯一的缺點(diǎn)可能就是調(diào)試比較麻煩了……

另外,上圖中所示的視頻服務(wù)我也是用nodejs實(shí)現(xiàn)的,效率還不錯(cuò)~

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。

當(dāng)前名稱:nodejs實(shí)現(xiàn)截取上傳視頻中一幀作為預(yù)覽圖片
本文路徑:http://bm7419.com/article4/phdeie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供Google、App設(shè)計(jì)網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)微信公眾號(hào)、動(dòng)態(tài)網(wǎng)站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

成都做網(wǎng)站