當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

阿里云VOD 视频点播(二)、VUE视频上传，视频播放

發布時間：2024/1/1 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了阿里云VOD 视频点播(二)、VUE视频上传，视频播放小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一，VUE視頻上傳

（1），視頻上傳引入的js文件，在index.html文件里面引入js,如下圖

js文件在官網可以下載然后放在自己的項目里面，下載下面的js文件引入項目
JavaScript上傳SDK 1.5.0
示例代碼(jquery和Vue)

（2），封裝上傳組件

<template><div class="container"><div class="upload"><div><div class="filebox"><input type="file" id="fileUpload" @change="fileChange($event)" class="filebtn"><div class="flletit">選擇視頻</div></div><div class="filetitle">{{fileTitle}}</div><label class="status">上傳狀態: <span>{{statusText}}</span></label></div><div class="upload-type"><el-button slot="trigger" size="small" type="primary" @click="authUpload" :disabled="uploadDisabled">開始上傳</el-button><el-button style="margin-left: 10px;" size="small" type="danger" @click="pauseUpload" :disabled="pauseDisabled">暫停</el-button><el-button slot="trigger" size="small" type="success" :disabled="resumeDisabled" @click="resumeUpload">恢復上傳</el-button></div><el-progress :text-inside="true" :stroke-width="15" :percentage=authProgress :status='authProgress == 100 ? "success":"text"'></el-progress></div></div> </template> <script> export default {data () {return {vid: '',fileTitle: '',timeout: '',partSize: '',parallel: '',retryCount: '',retryDuration: '',region: 'cn-shanghai',userId: '輸入阿里云賬號ID',file: null,authProgress: 0,uploadDisabled: true,resumeDisabled: true,pauseDisabled: true,uploader: null,statusText: ''}},methods: {emitEventVod () {this.authProgress = 0this.fileTitle = ''this.statusText = ''this.pauseDisabled = truethis.resumeDisabled = truethis.uploadDisabled = true},fileChange (e) {this.file = e.target.files[0]if (!this.file) {this.$message.error('請先選擇需要上傳的文件!')return}if (this.file.type !== 'video/mp4') {this.$message.error('請選擇.mp4文件!')return}this.fileTitle = this.file.namevar userData = '{"Vod":{}}'if (this.uploader) {this.uploader.stopUpload()this.authProgress = 0this.statusText = ''}this.uploader = this.createUploader()console.log(userData)this.uploader.addFile(this.file, null, null, null, userData)this.uploadDisabled = falsethis.pauseDisabled = truethis.resumeDisabled = true},authUpload () {// 然后調用 startUpload 方法, 開始上傳if (this.uploader !== null) {this.uploader.startUpload()this.uploadDisabled = truethis.pauseDisabled = false}},// 暫停上傳pauseUpload () {if (this.uploader !== null) {this.uploader.stopUpload()this.resumeDisabled = falsethis.pauseDisabled = true}},// 恢復上傳resumeUpload () {if (this.uploader !== null) {this.uploader.startUpload()this.resumeDisabled = truethis.pauseDisabled = false}},createUploader (type) {let self = this// eslint-disable-next-linelet uploader = new AliyunUpload.Vod({timeout: self.timeout || 60000,partSize: self.partSize || 1048576,parallel: self.parallel || 5,retryCount: self.retryCount || 3,retryDuration: self.retryDuration || 2,region: self.region,userId: self.userId,// 添加文件成功addFileSuccess: function (uploadInfo) {self.uploadDisabled = falseself.resumeDisabled = falseself.statusText = '添加文件成功, 等待上傳...'console.log('addFileSuccess: ' + uploadInfo.file.name)},// 開始上傳onUploadstarted: function (uploadInfo) {// 如果是 UploadAuth 上傳方式, 需要調用 uploader.setUploadAuthAndAddress 方法// 如果是 UploadAuth 上傳方式, 需要根據 uploadInfo.videoId是否有值，調用點播的不同接口獲取uploadauth和uploadAddress// 如果 uploadInfo.videoId 有值，調用刷新視頻上傳憑證接口，否則調用創建視頻上傳憑證接口// 注意: 這里是測試 demo 所以直接調用了獲取 UploadAuth 的測試接口, 用戶在使用時需要判斷 uploadInfo.videoId 存在與否從而調用 openApi// 如果 uploadInfo.videoId 存在, 調用刷新視頻上傳憑證接口(https://help.aliyun.com/document_detail/55408.html)// 如果 uploadInfo.videoId 不存在,調用獲取視頻上傳地址和憑證接口(https://help.aliyun.com/document_detail/55407.html)if (!uploadInfo.videoId) {let title = uploadInfo.file.name.substr(0, uploadInfo.file.name.lastIndexOf('.'))self.$http.get('/oss/file/createUploadVideo', { params: { title: title, fileName: uploadInfo.file.name } }).then(({ data: res }) => {if (res.code !== 0) {return self.$message.error(res.msg)}let uploadAuth = res.data.UploadAuthlet uploadAddress = res.data.UploadAddresslet videoId = res.data.VideoIdself.vid = res.data.VideoIduploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)})self.statusText = '文件開始上傳...'console.log('onUploadStarted:' + uploadInfo.file.name + ', endpoint:' + uploadInfo.endpoint + ', bucket:' + uploadInfo.bucket + ', object:' + uploadInfo.object)} else {// 如果videoId有值，根據videoId刷新上傳憑證self.$http.get('/oss/file/refreshUploadVideo', { params: { videoId: uploadInfo.videoId } }).then(({ data: res }) => {if (res.code !== 0) {return self.$message.error(res.msg)}let uploadAuth = res.data.UploadAuthlet uploadAddress = res.data.UploadAddresslet videoId = res.data.VideoIdself.vid = res.data.VideoIduploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)})}},// 文件上傳成功onUploadSucceed: function (uploadInfo) {console.log('onUploadSucceed: ' + uploadInfo.file.name + ', endpoint:' + uploadInfo.endpoint + ', bucket:' + uploadInfo.bucket + ', object:' + uploadInfo.object)self.statusText = '文件上傳成功!'},// 文件上傳失敗onUploadFailed: function (uploadInfo, code, message) {console.log('onUploadFailed: file:' + uploadInfo.file.name + ',code:' + code + ', message:' + message)self.statusText = '文件上傳失敗!'},// 取消文件上傳onUploadCanceled: function (uploadInfo, code, message) {console.log('Canceled file: ' + uploadInfo.file.name + ', code: ' + code + ', message:' + message)self.statusText = '文件已暫停上傳'},// 文件上傳進度，單位：字節, 可以在這個函數中拿到上傳進度并顯示在頁面上onUploadProgress: function (uploadInfo, totalSize, progress) {console.log('onUploadProgress:file:' + uploadInfo.file.name + ', fileSize:' + totalSize + ', percent:' + Math.ceil(progress * 100) + '%')let progressPercent = Math.ceil(progress * 100)self.authProgress = progressPercentself.statusText = '文件上傳中...'},// 上傳憑證超時onUploadTokenExpired: function (uploadInfo) {// 上傳大文件超時, 如果是上傳方式一即根據 UploadAuth 上傳時// 需要根據 uploadInfo.videoId 調用刷新視頻上傳憑證接口(https://help.aliyun.com/document_detail/55408.html)重新獲取 UploadAuth// 然后調用 resumeUploadWithAuth 方法, 這里是測試接口, 所以我直接獲取了 UploadAuthself.$http.get('/oss/file/refreshUploadVideo', { params: { videoId: uploadInfo.videoId } }).then(({ data: res }) => {if (res.code !== 0) {return self.$message.error(res.msg)}let uploadAuth = res.data.UploadAuthuploader.resumeUploadWithAuth(uploadAuth)console.log('upload expired and resume upload with uploadauth ' + uploadAuth)})self.statusText = '文件超時...'},// 全部文件上傳結束onUploadEnd: function (uploadInfo) {console.log('onUploadEnd: uploaded all the files')self.statusText = '文件上傳完畢'self.emitEvent(self.vid)}})return uploader},emitEvent (vid) {this.$emit('my-event', vid)}} } </script> <style>.container{text-align: center;line-height: 1;}.upload-type{margin: 15px 0;}.filebox{width: 80px;height: 32px;color: #fff;background-color: #17B3A3;border-color: #17B3A3;position: relative;border-radius: 3px;text-align: center;line-height: 32px;margin: 0 auto;}.filebox .filebtn{ width: 100%;height: 100%;border: none;background: none;position: absolute;left: 0;top: 0;opacity: 0;}.filebox .flletit{width: 100%;height: 100%;}.filetitle{margin: 10px 0;}.status span{color: #FF4C52;} </style>

（3），使用組件，渲染頁面

<template><el-dialog :visible.sync="visible" :title="$t('oss.upload')" :close-on-click-modal="false" :close-on-press-escape="false"><uploadVod @my-event="getMyEvent" ref="childVod"></uploadVod></el-dialog> </template> <script>import UploadVod from '../../../components/uploadvod' export default {components: {UploadVod},data () {return {visible: false}},methods: {init () {this.visible = truethis.$refs.childVod.emitEventVod()},getMyEvent (vid) {console.log('接收的數據--------->' + vid)this.$message({message: '接收的數據---->' + vid,type: 'success'})}} } </script>

二，VUE視頻點播

（1），封裝的組件，引入網絡js文件

<template><el-dialog :visible.sync="visible" title="視頻播放" :close-on-click-modal="false" :close-on-press-escape="false":before-close="closeVal"><div :id="playerId" class="prism-player"/></el-dialog> </template><script> export default {props: {aliplayerSdkPath: {// Aliplayer 代碼的路徑type: String,default: '//g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js'}},data () {return {visible: false,playerId: 'aliplayer_' + Math.random().toString(36).substr(2),scriptTagStatus: 0,isReload: false,instance: null,vid: '',playauth: '',cover: ''}},mounted () {if (window.Aliplayer !== undefined) {// 如果全局對象存在，說明編輯器代碼已經初始化完成，直接加載編輯器this.scriptTagStatus = 2this.initAliplayer()} else {// 如果全局對象不存在，說明編輯器代碼還沒有加載完成，需要加載編輯器代碼this.insertScriptTag()}},methods: {async init (vid) {this.visible = trueawait this.$http.get('/oss/file/getVideoPlayAuth', { params: { videoId: vid } }).then(({ data: res }) => {if (res.code !== 0) {return this.$message.error(res.msg)}console.log('fetch---', res)this.cover = res.data.CoverUrlthis.playauth = res.data.PlayAuththis.vid = res.data.VideoId})// eslint-disable-next-lineif (window.Aliplayer !== undefined) {// 如果全局對象存在，說明編輯器代碼已經初始化完成，直接加載編輯器this.scriptTagStatus = 2this.initAliplayer()} else {// 如果全局對象不存在，說明編輯器代碼還沒有加載完成，需要加載編輯器代碼this.insertScriptTag()}},closeVal () {console.log('-----2-----------')this.$emit('my-event', 0)},insertScriptTag () {const _this = thislet playerScriptTag = document.getElementById('playerScriptTag')// 如果這個tag不存在，則生成相關代碼tag以加載代碼if (playerScriptTag === null) {playerScriptTag = document.createElement('script')playerScriptTag.type = 'text/javascript'playerScriptTag.src = _this.aliplayerSdkPathplayerScriptTag.id = 'playerScriptTag'const s = document.getElementsByTagName('head')[0]s.appendChild(playerScriptTag)}if (playerScriptTag.loaded) {_this.scriptTagStatus++} else {playerScriptTag.addEventListener('load', () => {_this.scriptTagStatus++playerScriptTag.loaded = true_this.initAliplayer()})}_this.initAliplayer()},initAliplayer () {const _this = this// scriptTagStatus 為 2 的時候，說明兩個必需引入的 js 文件都已經被引入，且加載完成if (_this.scriptTagStatus === 2 &&(_this.instance === null || _this.reloadPlayer)) {_this.instance && _this.instance.dispose()document.querySelector('#' + _this.playerId).innerHTML = ''// Vue 異步執行 DOM 更新，這樣一來代碼執行到這里的時候可能 template 里面的 script 標簽還沒真正創建// 所以，我們只能在 nextTick 里面初始化 Aliplayer_this.$nextTick(() => {// eslint-disable-next-lineconst player = new Aliplayer({'id': _this.playerId,'width': '100%','height': '500px','autoplay': true,'isLive': false,'rePlay': false,'playsinline': true,'preload': true,'controlBarVisibility': 'hover','useH5Prism': true,'vid': _this.vid,'playauth': _this.playauth,'cover': _this.cover}, function (player) {// console.log('123')})})}}} } </script> <style>@import url(//g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css); </style>

（2），使用組件渲染頁面

<template><el-card shadow="never" class="aui-card--fill"><div class="mod-oss__oss"><el-form :inline="true" :model="dataForm"> <el-form-item><el-button type="primary" @click="approveVod()">視頻點播</el-button></el-form-item></el-form><video-vod v-if="videoVisibleVod" ref="videoVod" @my-event="getMyEvent" @refreshDataList="getDataList"></video-vod></div></el-card> </template><script> import VideoVod from '../../../components/VideoPlayVod' export default {data () {return {mixinViewModuleOptions: {getDataListURL: '/oss/file/page',getDataListIsPage: true,deleteURL: '/oss/file',deleteIsBatch: true},dataForm: {},configVisible: false,uploadVisible: false,uploadVisibleVod: false,videoVisibleVod: false}},components: {Config,Upload,UploadVod,VideoVod},methods: {// 視頻點播上傳approveVod () {this.videoVisibleVod = truethis.$nextTick(() => {this.$refs.videoVod.init('903d803f735e47c9aa12ef10721cb9a2')})},getMyEvent (vid) {console.log('接收的數據--------->' + vid)this.videoVisibleVod = false}} } </script>

后臺java開發的接口代碼參照下篇博客，阿里云VOD 視頻點播(三)

阿里云VOD 視頻點播(三)

總結

以上是生活随笔為你收集整理的阿里云VOD 视频点播(二)、VUE视频上传，视频播放的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： iOS 调试友盟SDK和微信SDK集成后
下一篇：微信小程序存在的风险_小程序存在信息安全