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>
|