341 lines
14 KiB
Plaintext
341 lines
14 KiB
Plaintext
<template>
|
||
<!-- 此组件为前端引用阿里云的点播视频插件,可经过鉴黄,返回video_id,以及url-->
|
||
<view class="~cu-load ~load-modal ~load-icon" v-if="loadModal">
|
||
<!-- <view>{{ progressPercent }}%</view>-->
|
||
<!-- <view class='gray-text'>加载中...</view>-->
|
||
<image src="https://image.fulllinkai.com/202207/07/e58b3d9613b86f1baa48e929337edf85.gif" mode="widthFix"
|
||
style="width: 150rpx;height: auto;"></image>
|
||
<view class="~gray-text">上传中（<span class="~bold"> {{ progressPercent }}% </span>）</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import wepy from '@wepy/core'
|
||
import {service} from '../config.js'
|
||
import https from '../mixins/https'
|
||
import base from '../mixins/base'
|
||
import VODUpload from '../mixins/aliyun-upload-sdk-1.0.3.min'
|
||
|
||
// import ShareMessage from '../mixins/ShareMessage'
|
||
wepy.component({
|
||
mixins: [base, https],
|
||
props: {
|
||
pic: {
|
||
type: String,
|
||
default: '',
|
||
twoWay: true
|
||
},
|
||
options: {
|
||
type: Object,
|
||
default: {},
|
||
twoWay: true
|
||
}
|
||
},
|
||
data: {
|
||
uploader: {},
|
||
videos: [],
|
||
loadModal: false,
|
||
progressPercent: 0,
|
||
videosCount: 9 // 最多可以选择的视频数
|
||
},
|
||
|
||
ready() {
|
||
this.getSignature()
|
||
},
|
||
|
||
methods: {
|
||
getSignature() {
|
||
let that = this
|
||
|
||
let uploader = new VODUpload({
|
||
userId: '1303984639806000',
|
||
timeout: that.options.timeout || 60000,
|
||
region: that.options.region || 'cn-shanghai',
|
||
// 添加文件成功
|
||
addFileSuccess: (uploadInfo) => {
|
||
console.log('addFileSuccess' + JSON.stringify(uploadInfo))
|
||
that.uploader.startUpload()
|
||
},
|
||
// 开始上传
|
||
onUploadstarted: function (uploadInfo) {
|
||
console.log('文件开始上传...')
|
||
console.log('onUploadStarted:' + JSON.stringify(uploadInfo))
|
||
// var url
|
||
// if (uploadInfo.isImage) {
|
||
// url = 'https://alivc-demo.aliyuncs.com/demo/getImageUploadAuth?imageType=default&imageExt=' + that._getSuffix(uploadInfo.url) + '&title=title&tags=tags'
|
||
// } else {
|
||
// url = 'https://alivc-demo.aliyuncs.com/demo/getVideoUploadAuth?title=' + uploadInfo.url + '&fileName=' + uploadInfo.url + '&fileSize=' + uploadInfo.fileSize + '&description=description&coverURL=' + uploadInfo.coverUrl + '&tags=tags'
|
||
// }
|
||
let data = {
|
||
// title: uploadInfo.url,
|
||
// fileSize: uploadInfo.fileSize,
|
||
// description: 'description',
|
||
// coverURL: uploadInfo.coverUrl,
|
||
// tags: 'tags',
|
||
file_name: uploadInfo.url
|
||
}
|
||
that.$post({
|
||
url: `${service.host}/ali/upload/video`, data
|
||
})
|
||
.then(({code, data}) => {
|
||
console.log(data, 'data====')
|
||
if (code == 0) {
|
||
console.log(data.body.VideoId)
|
||
uploader.setUploadAuthAndAddress(uploadInfo, data.body.UploadAuth, data.body.UploadAddress, data.body.VideoId)
|
||
} else {
|
||
that.$showToast('上传失败了')
|
||
uploader.stopUpload()
|
||
}
|
||
wx.hideLoading()
|
||
})
|
||
},
|
||
// 文件上传成功
|
||
onUploadSucceed: function (uploadInfo) {
|
||
console.log(JSON.stringify(uploadInfo))
|
||
console.log('文件上传成功!')
|
||
that.loadModal = false
|
||
that.getVideoUrl(uploadInfo.videoId)
|
||
},
|
||
// 文件上传失败
|
||
onUploadFailed: function (uploadInfo, code, message) {
|
||
console.log('onUploadFailed: file:' + uploadInfo.file.name + ',code:' + code + ', message:' + message)
|
||
console.log('文件上传失败!')
|
||
uploader.stopUpload()
|
||
},
|
||
// 取消文件上传
|
||
onUploadCanceled: function (uploadInfo, code, message) {
|
||
console.log(JSON.stringify(uploadInfo) + code + message)
|
||
console.log('文件已暂停上传!')
|
||
uploader.stopUpload()
|
||
},
|
||
// 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
|
||
onUploadProgress: function (uploadInfo, totalSize, progress) {
|
||
let files = []
|
||
console.log()
|
||
if (uploadInfo.isImage) {
|
||
files = that.images || []
|
||
} else {
|
||
files = that.videos || []
|
||
}
|
||
|
||
files.forEach((file, idx) => {
|
||
if (file.url === uploadInfo.url) {
|
||
file.progress = progress
|
||
if (uploadInfo.isImage) {
|
||
that.setData({
|
||
images: files
|
||
})
|
||
} else {
|
||
that.setData({
|
||
videos: files
|
||
})
|
||
}
|
||
}
|
||
})
|
||
let progressPercent = Math.ceil(progress)
|
||
console.log('文件上传中...' + progressPercent)
|
||
wx.hideLoading()
|
||
that.loadModal = true
|
||
that.progressPercent = progressPercent
|
||
},
|
||
// 上传凭证超时
|
||
onUploadTokenExpired: function (uploadInfo) {
|
||
// // 如果是上传方式二即根据 STSToken 实现时，从新获取STS临时账号用于恢复上传
|
||
// // 上传文件过大时可能在上传过程中 sts token 就会失效, 所以需要在 token 过期的回调中调用 resumeUploadWithSTSToken 方法
|
||
// // 这里是测试接口, 所以我直接获取了 STSToken
|
||
// $('#status').text('文件上传超时!')
|
||
// var stsUrl = 'http://demo-vod.cn-shanghai.aliyuncs.com/voddemo/CreateSecurityToken?BusinessType=vodai&TerminalType=pc&DeviceModel=iPhone9,2&UUID=67999yyuuuy&AppVersion=1.0.0'
|
||
// $.get(stsUrl, function (data) {
|
||
// var info = data.SecurityTokenInfo
|
||
// var accessKeyId = info.AccessKeyId
|
||
// var accessKeySecret = info.AccessKeySecret
|
||
// var secretToken = info.SecurityToken
|
||
// var expiration = info.Expiration
|
||
// uploader.resumeUploadWithSTSToken(accessKeyId, accessKeySecret, secretToken, expiration)
|
||
// }, 'json')
|
||
},
|
||
// 全部文件上传结束
|
||
onUploadEnd: (uploadInfo) => {
|
||
console.log('文件上传完毕 onUploadEnd: uploaded all the files')
|
||
}
|
||
})
|
||
console.log(uploader, 'uploader')
|
||
this.uploader = uploader
|
||
},
|
||
|
||
// 获取视频URL
|
||
getVideoUrl(videoId) {
|
||
let vm = this
|
||
vm.$showLoading('加载中...')
|
||
let data = {
|
||
video_id: videoId
|
||
}
|
||
vm.$post({url: `${service.host}/ali/video/info`, data}).then(({code, data}) => {
|
||
console.log(data, data.body.PlayInfoList.PlayInfo[0].PlayURL, '1131231')
|
||
vm.$emit('uploadVideoSuccess', data.body.PlayInfoList.PlayInfo[0].PlayURL, videoId)
|
||
wx.hideLoading()
|
||
})
|
||
},
|
||
|
||
uploadFile(file) { // 上传视频
|
||
let vm = this
|
||
let videosCount = --vm.videosCount
|
||
vm.videosCount = videosCount
|
||
vm.videos = vm.videos.concat(file)
|
||
let uploader = vm.uploader
|
||
let userData = '{"Vod":{}}'
|
||
console.log(file, 'file')
|
||
console.log(uploader, 'file')
|
||
wx.hideLoading()
|
||
uploader.addFile(file, null, null, null, userData)
|
||
},
|
||
|
||
// 视频压缩
|
||
compressVideo(tempFilePath) {
|
||
console.log(tempFilePath)
|
||
// wx.showLoading({title: '视频压缩中...', mask: true})
|
||
let that = this
|
||
return new Promise((resolve, reject) => {
|
||
wx.compressVideo({
|
||
quality: 'high',
|
||
src: tempFilePath,
|
||
success: (res) => {
|
||
console.log(res)
|
||
// console.log((res.size / 1024).toFixed(2))
|
||
// console.log(parseFloat(res.size / 1024).toFixed(2))
|
||
// let size = parseFloat(res.size / 1024).toFixed(2)
|
||
// console.log('压缩后视频大小为' + size)
|
||
// console.log('压缩后视频的链接' + res.tempFilePath)
|
||
resolve(res)
|
||
}
|
||
})
|
||
})
|
||
},
|
||
|
||
// 剪辑视频
|
||
editorVideo(tempFilePath) {
|
||
console.log(tempFilePath)
|
||
// wx.showLoading({title: '视频压缩中...', mask: true})
|
||
let that = this
|
||
return new Promise((resolve, reject) => {
|
||
wx.openVideoEditor({
|
||
filePath: tempFilePath,
|
||
// minDuration: 3, // 限制时间
|
||
// maxDuration: 30, // 限制时间
|
||
success: (res) => {
|
||
if (parseFloat(res.duration / 1000).toFixed(0) > 30) { // 视频大于30秒
|
||
reject(res)
|
||
} else {
|
||
resolve(res) // 视频剪辑后少于30秒
|
||
}
|
||
console.log('剪辑后的视频时长：' + parseFloat(res.duration / 1000).toFixed(0))
|
||
console.log('剪辑后的视频大小：' + res.size)
|
||
console.log('剪辑后的视频链接：' + res.tempFilePath)
|
||
console.log('剪辑后的视频图片链接：' + res.tempThumbPath)
|
||
},
|
||
fail: (res) => {
|
||
// that.$showToast(res.errMsg)
|
||
}
|
||
})
|
||
})
|
||
},
|
||
choosevideo(maxTime = 30) {
|
||
let vm = this
|
||
console.log('上传视频的方法')
|
||
wx.chooseMedia({
|
||
count: 1, // 上传视频的个数
|
||
mediaType: ['video'], // 限制上传的类型为video
|
||
sourceType: ['album', 'camera'], // 视频选择来源
|
||
maxDuration: maxTime, // 拍摄限制时间
|
||
compressed: true,
|
||
camera: 'back', // 采用后置摄像头
|
||
success: (res) => { // 获取临时存放的视频资源
|
||
let tempFilePath = res.tempFiles[0].tempFilePath
|
||
// 获取该视频的播放时间
|
||
let duration = res.tempFiles[0].duration
|
||
console.log('视频播放时间为' + duration)
|
||
// 视频封面
|
||
let thumbTempFilePath = res.tempFiles[0].thumbTempFilePath
|
||
console.log('视频封面为' + thumbTempFilePath)
|
||
// 获取视频的大小(MB单位)
|
||
let size = parseFloat(res.tempFiles[0].size / 1024 / 1024).toFixed(1)
|
||
console.log('视频大小为' + size)
|
||
// 获取视频的高度
|
||
let height = res.tempFiles[0].height
|
||
console.log('视频高度为' + height)
|
||
// 获取视频的宽度
|
||
let width = res.tempFiles[0].width
|
||
console.log('视频宽度为' + width)
|
||
let file = {
|
||
url: tempFilePath,
|
||
coverUrl: thumbTempFilePath,
|
||
fileSize: size
|
||
}
|
||
// 校验大小后，符合进行上传
|
||
if (duration > maxTime) {
|
||
let beyongSize = parseFloat(duration - 30).toFixed(0)
|
||
// 获取视频超出限制大小的数量
|
||
wx.showModal({
|
||
title: '提示',
|
||
content: '上传的视频时长超限,超出' + beyongSize + '秒,是否剪辑视频！',
|
||
success(res) {
|
||
if (res.confirm) {
|
||
console.log('用户点击确定')
|
||
vm.$showLoading('压缩中...')
|
||
vm.compressVideo(tempFilePath).then((data) => { // 先压缩视频，再剪辑视频
|
||
vm.$showLoading('准备编辑中...')
|
||
vm.editorVideo(data.tempFilePath).then((resV2) => {
|
||
console.log(resV2)
|
||
file = {
|
||
url: resV2.tempFilePath,
|
||
coverUrl: resV2.thumbTempFilePath,
|
||
fileSize: resV2.size
|
||
}
|
||
vm.uploadFile(file) // 视频在30秒内，上传视频
|
||
}).catch((err) => {
|
||
console.log(err, '========================')
|
||
let time = parseFloat(err.duration / 1000).toFixed(0)
|
||
console.log(time)
|
||
if (time > maxTime) { // 视频大于30秒，重新上传视频
|
||
return wx.showModal({
|
||
title: '提示',
|
||
content: `视频超过${parseFloat(time - maxTime).toFixed(0)}秒，请重新上传哦！`,
|
||
showCancel: false,
|
||
success(res) {
|
||
console.log('用户点击确定')
|
||
}
|
||
})
|
||
}
|
||
})
|
||
})
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消')
|
||
}
|
||
}
|
||
})
|
||
} else {
|
||
vm.$showLoading('压缩中')
|
||
vm.compressVideo(tempFilePath).then((data) => { // 先压缩视频，然后再上传
|
||
console.log(data)
|
||
file = {
|
||
url: data.tempFilePath,
|
||
coverUrl: thumbTempFilePath,
|
||
fileSize: data.size
|
||
}
|
||
wx.hideLoading()
|
||
// 上传视频
|
||
vm.uploadFile(file)
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style type="less">
|
||
|
||
</style>
|