當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端上传视频至阿里云并转码

發(fā)布時(shí)間：2023/12/2 HTML 23 豆豆

生活随笔收集整理的這篇文章主要介紹了前端上传视频至阿里云并转码小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

我們這里選用的是第三方方案（阿里云）

流程圖

整體流程

頁面展示

添加腳本文件到根目錄，并引入腳本

public/index.html

<!DOCTYPE html> <html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/aliyun-upload-sdk/lib/es6-promise.min.js"></script><script src="/aliyun-upload-sdk//lib/aliyun-oss-sdk-6.13.0.min.js"></script><script src="/aliyun-upload-sdk/aliyun-upload-sdk-1.5.2.min.js"></script></body> </html>

video.vue

<template><div><div slot="header"><span>課程：xxx</span><span>階段：xxx</span><span>課時(shí)：xxx</span></div><el-form label-width="70px"><el-form-item label="視頻上傳"><input type="file" ref="video-file" /></el-form-item><el-form-item label="封面上傳"><input type="file" ref="image-file" /></el-form-item></el-form><el-form-item><el-button type="primary" @click="handleUpload">開始上傳</el-button></el-form-item><el-form-item><p>視頻上傳中：{{ uploadPercent }}</p><p v-if="isUploadSucess">視頻轉(zhuǎn)碼中： {{ isTransCodeSuccess ? "完成" : "正在處理，請稍后" }}</p></el-form-item></div> </template><script lang="ts"> import Vue from 'vue' import {aliyunTransCode,getAliyunImagUploadAddressAdnAuth,getAliyunTransCodePercent,getAliyunVideoUploadAddressAdnAuth } from '@/api/aliyun-upload'export default Vue.extend({name: 'CourseVideo',props: ['lessonId'],data () {return {uploader: null,imageURL: '',videoId: null,uploadPercent: 0,isUploadSucess: false,isTransCodeSuccess: false}},created () {this.initUploader()},methods: {initUploader () {this.uploader = new window.AliyunUpload.Vod({// 阿里云賬號ID，必須有值，來源https://help.aliyun.com/knowledge_detail/37196.htmluserId: '122',// 上傳到點(diǎn)播的地域，默認(rèn)值為'cn-shanghai', //eu-central-1, ap-southeast-1region: '',// 分片大小默認(rèn)1M，不能小于100KpartSize: 1048576,// 并行上傳分片個(gè)數(shù)，默認(rèn)5parallel: 5,// 網(wǎng)絡(luò)原因失敗時(shí)，重新上傳次數(shù)，默認(rèn)為3retryCount: 3,// 網(wǎng)絡(luò)原因失敗時(shí)，重新上傳間隔時(shí)間，默認(rèn)為2秒retryDuration: 2,// 開始上傳onUploadstarted: async (uploadInfo: any) => {console.log('onUploadstarted', uploadInfo)// 1. 通過我們的后端獲取文件上傳憑證let uploadAddressAndAuthif (uploadInfo.isImage) {// 獲取圖片上傳憑證const { data } = await getAliyunImagUploadAddressAdnAuth()console.log(data)uploadAddressAndAuth = data.datathis.imageURL = data.data.imageURL} else {// 獲取視頻上傳憑證const { data } = await getAliyunVideoUploadAddressAdnAuth({fileName: uploadInfo.file.name,imageUrl: this.imageURL})uploadAddressAndAuth = data.dataconsole.log(data)this.videoId = uploadAddressAndAuth.videoId}// 2. 調(diào)用 uploader.setUploadAuthAndAddress 設(shè)置上傳憑證(this.uploader as any).setUploadAuthAndAddress(uploadInfo,uploadAddressAndAuth.uploadAuth,uploadAddressAndAuth.uploadAddress,uploadAddressAndAuth.imageId || uploadAddressAndAuth.videoId)// 3. 設(shè)置好上傳憑證確認(rèn)沒有問題，上傳進(jìn)度開始},// 文件上傳成功onUploadSucceed: function (uploadInfo: any) {console.log('onUploadSucceed', uploadInfo)},// 文件上傳失敗onUploadFailed: function (uploadInfo: any, code: any, message: any) {console.log('onUploadFailed', uploadInfo, code, message)},// 文件上傳進(jìn)度，單位：字節(jié)onUploadProgress: (uploadInfo: any,totalSize: any,loadedPercent: any) => {console.log('onUploadProgress', uploadInfo, totalSize, loadedPercent)if (!uploadInfo.isImage) {this.uploadPercent = Math.floor(loadedPercent * 100)}},// 取消文件上傳onUploadCanceled: function (uploadInfo: any, code: any, message: any) {console.log('onUploadCanceled', uploadInfo, code, message)},// 上傳憑證超時(shí)onUploadTokenExpired: function (uploadInfo: any) {console.log('onUploadTokenExpired', uploadInfo)},// 全部文件上傳結(jié)束onUploadEnd: async (uploadInfo: any) => {this.isUploadSucess = true// 請求轉(zhuǎn)碼const { data } = await aliyunTransCode({lessonId: this.lessonId,coverImageUrl: this.imageURL,fileName: (this.$refs['video-file'] as any).files[0].name,fileId: this.videoId})console.log(data)// 輪詢查詢轉(zhuǎn)碼進(jìn)度const timer = setInterval(async () => {const { data } = await getAliyunTransCodePercent(this.lessonId)console.log(data.data)if (data.data === 100) {this.isTransCodeSuccess = trueclearInterval(timer)console.log('轉(zhuǎn)碼成功')}}, 3000)}})},handleUpload () {// 初始化上傳狀態(tài)this.isUploadSucess = falsethis.isTransCodeSuccess = falsethis.uploadPercent = 0// 獲取上傳的文件const videoFile = (this.$refs['video-file'] as any).files[0]const imageFile = (this.$refs['image-file'] as any).files[0];// 將用戶所選的文件添加到上傳列表中// 一旦開始上傳，他就會按列表中添加的順序開始上傳(this.uploader as any).addFile(imageFile, null, null, null, '{"Vod":{}}');(this.uploader as any).addFile(videoFile, null, null, null, '{"Vod":{}}');// 開始上傳，觸發(fā) onUploadstarted 事件(this.uploader as any).startUpload()}} }) </script><style> </style>

總結(jié)

以上是生活随笔為你收集整理的前端上传视频至阿里云并转码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。