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

本文出自APICloud官方論壇,
感謝論壇版主 東冥羽的分享。

七牛雲上傳視頻並截取第一幀作爲視頻的封面圖。
使用js上傳,模塊videoPlayer截取第一幀(有專門的截圖模塊,但是我使用的有點問題,可能是視頻源的問題;canvas也能截取,但是有點小bug,比如會截成黑色或白色的圖片)。
上傳一個和上傳多個視頻
七牛雲上傳視頻並截取第一幀爲圖片(js實現)

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

demo運行點這裏

需要參數:token值,七牛雲域名
邏輯:
上傳一個視頻:
點擊上傳按鈕,獲取token值,選中視頻後開始上傳。input file會獲取文件的大小,文件名等信息,需要的信息會在頁面顯示,獲取時間戳作爲七牛雲上傳視頻的文件名(避免重複)。
上傳有三個狀態:上傳中、上傳失敗、上傳成功。使用變量控制三個狀態中各個參數的具體數值,從而控制頁面中顯示的內容樣式,內容等。
因爲只上傳一個,在視頻開始上傳時就將上傳按鈕隱藏,禁止繼續上傳。(若上傳失敗借鑑上傳多個視頻,讓按鈕重新顯示)
視頻上傳完成後,使用videoPlayer模塊截取視頻的第一幀(此刻視頻源爲七牛雲的網絡視頻),把截取到的圖片上傳到服務器後賦值給封面圖和視頻表示圖在頁面顯示。
上傳多個視頻:
點擊上傳按鈕,把用到的標籤屬性添加到一個數組【videoInfo】中,數組的長度表示一共上傳了多少個視頻。body中遍歷這個數組,不同的屬性值顯示上傳狀態不同的變化。
七牛雲上傳視頻並截取第一幀爲圖片(js實現)

戳作爲七牛雲上傳視頻的文件名(避免重複)。
在上傳時,始終獲取並變化數組【videoInfo】中最後一個數據的各個屬性:默認只有上次視頻上傳完成才能進行下個視頻的上傳操作。
七牛雲上傳視頻並截取第一幀爲圖片(js實現)
上傳完成後,若未成功則可進行刪除操作,成功後使用模塊截取視頻第一幀並上傳服務器。此時通過判斷是否爲第一個視頻從而決定是否進行總封面圖的賦值。
七牛雲上傳視頻並截取第一幀爲圖片(js實現)

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章