1. 程式人生 > >使用VUE腳手架+HTML5 input type = file 上傳視頻

使用VUE腳手架+HTML5 input type = file 上傳視頻

設置 視頻 通過 分享 video 並且 http 上傳 屬性

上傳視頻思路

HTML:
1. 在這裏首先會用到html5標簽 video 音頻/視頻
2. input type = file

技術分享圖片

CSS 給一些樣式

技術分享圖片

技術分享圖片


*******JS

技術分享圖片

技術分享圖片

js實現思路:
1.通過原生的方法獲取上傳文件(input)標簽 並且交給一個變量。
2.通過原生的方法獲取音頻標簽並且交給一個變量。
3.通過input標簽得到自身的的files[0] ;而我們對input.files[0]數據需要處理,於是寫一個方法。並且把input.files[0]傳進去。

舉個栗子:技術分享圖片

4.處理數據的具體步驟;在getFileURL方法裏面處理;

5.判斷URL是否存在;如果存在就給video 設置src路徑;

6. 通過video身上的duration屬性;獲取視頻的長度;如果視頻的長度超過60秒給與用戶提示。

使用VUE腳手架+HTML5 input type = file 上傳視頻