一，nuxt視頻上傳，視頻播放

（1）.nuxt視頻上傳，封裝的組件，我開發(fā)的時(shí)候有eslint校驗(yàn)下面代碼有一些相關(guān)的注釋不用管

<template><div class="container"><div class="upload"><div><div class="filebox"><input id="fileUpload" type="file" class="filebtn" @change="fileChange($event)"><div class="flletit">選擇視頻</div></div><div class="filetitle">{{ fileTitle }}</div><label class="status">上傳狀態(tài): <span>{{ statusText }}</span></label></div><div class="upload-type"><el-button slot="trigger" size="small" type="primary" :disabled="uploadDisabled" @click="authUpload">開始上傳</el-button><el-button style="margin-left: 10px;" size="small" type="danger" :disabled="pauseDisabled" @click="pauseUpload">暫停</el-button><el-button slot="trigger" size="small" type="success" :disabled="resumeDisabled" @click="resumeUpload">恢復(fù)上傳</el-button></div><el-progress :text-inside="true" :stroke-width="15" :percentage="authProgress" :status="authProgress == 100 ?'success':'text'" /></div></div> </template> <script> export default {data() {return {vid: '',fileTitle: '',timeout: '',partSize: '',parallel: '',retryCount: '',retryDuration: '',region: 'cn-shanghai',userId: '輸入阿里云賬號(hào)ID',file: null,authProgress: 0,uploadDisabled: true,resumeDisabled: true,pauseDisabled: true,uploader: null,statusText: ''}},methods: {emitEventVod() {// eslint-disable-next-line no-consoleconsole.log('-----1-----')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.nameconst userData = '{"Vod":{}}'if (this.uploader) {this.uploader.stopUpload()this.authProgress = 0this.statusText = ''}this.uploader = this.createUploader()// eslint-disable-next-line no-consoleconsole.log(userData)this.uploader.addFile(this.file, null, null, null, userData)this.uploadDisabled = falsethis.pauseDisabled = truethis.resumeDisabled = true},authUpload() {// 然后調(diào)用 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}},// 恢復(fù)上傳resumeUpload() {if (this.uploader !== null) {this.uploader.startUpload()this.resumeDisabled = truethis.pauseDisabled = false}},createUploader(type) {const 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 = '添加文件成功, 等待上傳...'// eslint-disable-next-line no-consoleconsole.log('addFileSuccess: ' + uploadInfo.file.name)},// 開始上傳onUploadstarted: function (uploadInfo) {// 如果是 UploadAuth 上傳方式, 需要調(diào)用 uploader.setUploadAuthAndAddress 方法// 如果是 UploadAuth 上傳方式, 需要根據(jù) uploadInfo.videoId是否有值，調(diào)用點(diǎn)播的不同接口獲取uploadauth和uploadAddress// 如果 uploadInfo.videoId 有值，調(diào)用刷新視頻上傳憑證接口，否則調(diào)用創(chuàng)建視頻上傳憑證接口// 注意: 這里是測試 demo 所以直接調(diào)用了獲取 UploadAuth 的測試接口, 用戶在使用時(shí)需要判斷 uploadInfo.videoId 存在與否從而調(diào)用 openApi// 如果 uploadInfo.videoId 存在, 調(diào)用 刷新視頻上傳憑證接口(https://help.aliyun.com/document_detail/55408.html)// 如果 uploadInfo.videoId 不存在,調(diào)用 獲取視頻上傳地址和憑證接口(https://help.aliyun.com/document_detail/55407.html)if (!uploadInfo.videoId) {const title = uploadInfo.file.name.substr(0, uploadInfo.file.name.lastIndexOf('.'))self.$axios.get('/api/ossFile/createUploadVideo', { params: { title: title, fileName: uploadInfo.file.name } }).then(({ data: res }) => {if (res.code !== 0) {return self.$message.error(res.msg)}const uploadAuth = res.data.UploadAuthconst uploadAddress = res.data.UploadAddressconst videoId = res.data.VideoIdself.vid = res.data.VideoIduploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)})self.statusText = '文件開始上傳...'// eslint-disable-next-line no-consoleconsole.log('onUploadStarted:' + uploadInfo.file.name + ', endpoint:' + uploadInfo.endpoint + ', bucket:' + uploadInfo.bucket + ', object:' + uploadInfo.object)} else {// 如果videoId有值，根據(jù)videoId刷新上傳憑證self.$axios.get('/api/ossFile/refreshUploadVideo', { params: { videoId: uploadInfo.videoId } }).then(({ data: res }) => {if (res.code !== 0) {return self.$message.error(res.msg)}const uploadAuth = res.data.UploadAuthconst uploadAddress = res.data.UploadAddressconst videoId = res.data.VideoIdself.vid = res.data.VideoIduploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)})}},// 文件上傳成功onUploadSucceed: function (uploadInfo) {// eslint-disable-next-line no-consoleconsole.log('onUploadSucceed: ' + uploadInfo.file.name + ', endpoint:' + uploadInfo.endpoint + ', bucket:' + uploadInfo.bucket + ', object:' + uploadInfo.object)self.statusText = '文件上傳成功!'},// 文件上傳失敗onUploadFailed: function (uploadInfo, code, message) {// eslint-disable-next-line no-consoleconsole.log('onUploadFailed: file:' + uploadInfo.file.name + ',code:' + code + ', message:' + message)self.statusText = '文件上傳失敗!'},// 取消文件上傳onUploadCanceled: function (uploadInfo, code, message) {// eslint-disable-next-line no-consoleconsole.log('Canceled file: ' + uploadInfo.file.name + ', code: ' + code + ', message:' + message)self.statusText = '文件已暫停上傳'},// 文件上傳進(jìn)度，單位：字節(jié), 可以在這個(gè)函數(shù)中拿到上傳進(jìn)度并顯示在頁面上onUploadProgress: function (uploadInfo, totalSize, progress) {// eslint-disable-next-line no-consoleconsole.log('onUploadProgress:file:' + uploadInfo.file.name + ', fileSize:' + totalSize + ', percent:' + Math.ceil(progress * 100) + '%')const progressPercent = Math.ceil(progress * 100)self.authProgress = progressPercentself.statusText = '文件上傳中...'},// 上傳憑證超時(shí)onUploadTokenExpired: function (uploadInfo) {// 上傳大文件超時(shí), 如果是上傳方式一即根據(jù) UploadAuth 上傳時(shí)// 需要根據(jù) uploadInfo.videoId 調(diào)用刷新視頻上傳憑證接口(https://help.aliyun.com/document_detail/55408.html)重新獲取 UploadAuth// 然后調(diào)用 resumeUploadWithAuth 方法, 這里是測試接口, 所以我直接獲取了 UploadAuthself.$axios.get('/api/ossFile/refreshUploadVideo', { params: { videoId: uploadInfo.videoId } }).then(({ data: res }) => {if (res.code !== 0) {return self.$message.error(res.msg)}const uploadAuth = res.data.UploadAuthuploader.resumeUploadWithAuth(uploadAuth)// eslint-disable-next-line no-consoleconsole.log('upload expired and resume upload with uploadauth ' + uploadAuth)})self.statusText = '文件超時(shí)...'},// 全部文件上傳結(jié)束onUploadEnd: function (uploadInfo) {// eslint-disable-next-line no-consoleconsole.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>

（2），nuxt引入阿里提供的上傳js文件，添加ssr:false服務(wù)端渲染關(guān)閉，因?yàn)閖s里面有document,window，服務(wù)端渲染會(huì)報(bào)錯(cuò)undefined

（3），頁面調(diào)用封裝好的組件，里面涉及到父子組件相互調(diào)用，傳值

<template><div><upload-vod ref="childVod" @my-event="getMyEvent" /></div> </template> <script> import UploadVod from '../../components/uploadvod' export default {components: {UploadVod},data() {return {}},created() {this.init()},methods: {init() {const that = thisif (process.client) {that.$nextTick(() => {that.$refs.childVod.emitEventVod()})}},getMyEvent(vid) {// eslint-disable-next-line no-consoleconsole.log('接收的數(shù)據(jù)--------->' + vid)this.$message({message: '接收的數(shù)據(jù)---->' + vid,type: 'success'})}} } </script>

（4），nuxt視頻播放相關(guān)，上傳根據(jù)官方提供的demo修改的，自己封裝了組件，引入的也是網(wǎng)絡(luò)js文件

<template><div :id="playerId" class="prism-player" /> </template><script> export default {props: {aliplayerSdkPath: {// Aliplayer 代碼的路徑type: String,default: '//g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js'}},data() {return {playerId: 'aliplayer_' + Math.random().toString(36).substr(2),scriptTagStatus: 0,isReload: false,instance: null,vid: '',playauth: '',cover: ''}},created() {this.init()},mounted() {if (window.Aliplayer !== undefined) {// 如果全局對(duì)象存在，說明編輯器代碼已經(jīng)初始化完成，直接加載編輯器this.scriptTagStatus = 2this.initAliplayer()} else {// 如果全局對(duì)象不存在，說明編輯器代碼還沒有加載完成，需要加載編輯器代碼this.insertScriptTag()}},methods: {async init() {const { data } = await this.$axios.get('/api/ossFile/getVideoPlayAuth', { params: { videoId: '903d803f735e47c9aa12ef10721cb9a2' } })// eslint-disable-next-line no-consoleconsole.log('fetch---', data)this.cover = data.data.CoverUrlthis.playauth = data.data.PlayAuththis.vid = data.data.VideoId// eslint-disable-next-lineif (window.Aliplayer !== undefined) {// 如果全局對(duì)象存在，說明編輯器代碼已經(jīng)初始化完成，直接加載編輯器this.scriptTagStatus = 2this.initAliplayer()} else {// 如果全局對(duì)象不存在，說明編輯器代碼還沒有加載完成，需要加載編輯器代碼this.insertScriptTag()}},insertScriptTag() {const _this = thislet playerScriptTag = document.getElementById('playerScriptTag')// 如果這個(gè)tag不存在，則生成相關(guān)代碼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 的時(shí)候，說明兩個(gè)必需引入的 js 文件都已經(jīng)被引入，且加載完成if (_this.scriptTagStatus === 2 &&(_this.instance === null || _this.reloadPlayer)) {_this.instance && _this.instance.dispose()document.querySelector('#' + _this.playerId).innerHTML = ''// Vue 異步執(zhí)行 DOM 更新，這樣一來代碼執(zhí)行到這里的時(shí)候可能 template 里面的 script 標(biāo)簽還沒真正創(chuàng)建// 所以，我們只能在 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>

（5），將組件封裝為一個(gè)插件js，然后引入js到nuxt中，以為組件里面有document，window,需要關(guān)閉ssr服務(wù)端渲染

import Vue from 'vue' import AliplayerVod from '~/components/VideoPlayVod.vue'Vue.component('ali-aliplayer-vod', AliplayerVod)

關(guān)閉ssr，如圖

（6），使用播放的組件

<ali-aliplayer-vod />

后臺(tái)java開發(fā)的接口代碼參照下篇博客，阿里云VOD 視頻點(diǎn)播(三)

阿里云VOD 視頻點(diǎn)播(三)

總結(jié)

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

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