七牛雲上傳視頻並截取第一幀為圖片(js實現)


本文出自APICloud官方論壇,

感謝論壇版主 東冥羽分享。

 

七牛雲上傳視頻並截取第一幀作為視頻的封面圖。

使用js上傳,模塊videoPlayer截取第一幀(有專門的截圖模塊,但是我使用的有點問題,可能是視頻源的問題;canvas也能截取,但是有點小bug,比如會截成黑色或白色的圖片)。

上傳一個和上傳多個視頻

demo運行點這里

需要參數:token值,七牛雲域名

*邏輯:

上傳一個視頻:

點擊上傳按鈕,獲取token值,選中視頻后開始上傳。input file會獲取文件的大小,文件名等信息,需要的信息會在頁面顯示,獲取時間戳作為七牛雲上傳視頻的文件名(避免重復)。

   上傳有三個狀態:上傳中、上傳失敗、上傳成功。使用變量控制三個狀態中各個參數的具體數值,從而控制頁面中顯示的內容樣式,內容等。

   因為只上傳一個,在視頻開始上傳時就將上傳按鈕隱藏,禁止繼續上傳。(若上傳失敗借鑒上傳多個視頻,讓按鈕重新顯示)

   視頻上傳完成后,使用videoPlayer模塊截取視頻的第一幀(此刻視頻源為七牛雲的網絡視頻),把截取到的圖片上傳到服務器后賦值給封面圖和視頻表示圖在頁面顯示。

上傳多個視頻:

   點擊上傳按鈕,把用到的標簽屬性添加到一個數組【videoInfo】中,數組的長度表示一共上傳了多少個視頻。body中遍歷這個數組,不同的屬性值顯示上傳狀態不同的變化。

戳作為七牛雲上傳視頻的文件名(避免重復)。

在上傳時,始終獲取並變化數組【videoInfo】中最后一個數據的各個屬性:默認只有上次視頻上傳完成才能進行下個視頻的上傳操作。

上傳完成后,若未成功則可進行刪除操作,成功后使用模塊截取視頻第一幀並上傳服務器。此時通過判斷是否為第一個視頻從而決定是否進行總封面圖的賦值。

*提醒:代碼運行時請把接口請求地址以及七牛雲地址添加成自己的,目前代碼上的接口地址和七牛雲地址都為空

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM