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

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

七牛雲上傳視頻並截取第一幀做爲視頻的封面圖。 使用js上傳，模塊videoPlayer截取第一幀（有專門的截圖模塊，可是我使用的有點問題，多是視頻源的問題；canvas也能截取，可是有點小bug，好比會截成黑色或白色的圖片）。 上傳一個和上傳多個視頻

demo運行點這裏 pkqiniu.51xingbang.com/whc15660122…

須要參數：token值，七牛雲域名 *邏輯： 上傳一個視頻： 點擊上傳按鈕，獲取token值，選中視頻後開始上傳。input file會獲取文件的大小，文件名等信息，須要的信息會在頁面顯示，獲取時間戳做爲七牛雲上傳視頻的文件名（避免重複）。

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

由於只上傳一個，在視頻開始上傳時就將上傳按鈕隱藏，禁止繼續上傳。（若上傳失敗借鑑上傳多個視頻，讓按鈕從新顯示）

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

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

戳做爲七牛雲上傳視頻的文件名（避免重複）。 在上傳時，始終獲取並變化數組【videoInfo】中最後一個數據的各個屬性：默認只有上次視頻上傳完成才能進行下個視頻的上傳操做。

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

*提醒：代碼運行時請把接口請求地址以及七牛雲地址添加成本身的，目前代碼上的接口地址和七牛雲地址都爲空