背景是这样的：公司一直使用阿里云STS上传，如果不知道STS的话，可以自己去了解一下。
突然接了需求，是不想用户下载视频，因为sts是解密/拼接后是有一个链接播放的，那么这样的话，用户可以使用复制到浏览器就可下载。
那么我了解到阿里云点播上传是可以的。原理是使用阿里云播放SDK，可以播放是一段段的解密播放的，所以用户是下载不了，可以这么理解。阿里云sdk是一个黑盒，我们传一个参数，阿里云SDK在数据库中找到资源，然后一段段返回，用户就想破解都破解不了。
注意sts是不能使用阿里云点播的，别浪费时间在这里，原因是使用点播播放的话就要vedioId，而vedioId一定是通过点播上传，具体看官网
这篇文章主要是帮读者节省时间，让大家理解，并可以复制我的代码
需求是～视频不能给用户下载，只能在线看。
整个流程是使用阿里云点播上传，然后播放的时候使用阿里云SDK。
使用阿里云点播上传
首先需要使用阿里云的SDK上传。
我在我的码云上面提供，如果版本太老了，可以自己去官网找。
并且我使用的是Vue，React估计操作差不多。
首先我们需在 index.html 以script的形式引入SDK
看图应该能更好的看得懂，如果你们尝试到了其他的引入方案，希望可以告诉我，我其实不想放在这里的，看起来太丑了，而且加载项目的时候马上就会加载，但是官方就是这么推荐的。
引入了SDK就开始调用API上传了。
具体流程是，我们先让后台帮我们去阿里云那边搞一个 uploadAuth, uploadAddress, videoId，然后我们就可以马上开始自己传数据到阿里云了，我们是不需要自己传给后台的，后台的作用只有两个，帮我们拿到上面的参数，当上面的参数uploadAuth过期了，那帮我们刷新一下时间，一般让后台设置长一点时间 记得是大概这个范围 100秒--3000秒，默认值是100
uploadAuth：证明我们可以上传给阿里云，上传凭证。
uploadAddress：上传给阿里云中那个仓库
videoId：有了uploadAddress后可以根据videoId找到对应的视频，videoId就是那个视频的id，阿里云是先创建一个坑，然后再通过上传完文件后去覆盖，后面播放的时候videoId有大大的好处，
aliyunUpload(e) {
// 上传的文件对象
console.log( e.target.files, 'e.target.files')
const that = this
const uploader = new AliyunUpload.Vod({
//userID，必填，只需有值即可,这个值记录上传的ID。
userId: '122',
//分片大小默认1 MB，不能小于100 KB，这里是6M
partSize: 1048576 * 6,
//并行上传分片个数，默认5
parallel: 5,
//网络原因失败时，重新上传次数，默认为3
retryCount: 3,
//网络原因失败时，重新上传间隔时间，默认为2秒
retryDuration: 2,
//是否上报上传日志到视频点播，默认为true
enableUploadProgress: true,
// 添加文件成功
addFileSuccess: function (uploadInfo) {
console.log('addFileSuccess: ' + uploadInfo.file.name)
},
//开始上传
onUploadstarted: async function (uploadInfo) {
console.log(
'onUploadStarted:' + uploadInfo.file.name + ', endpoint:' + uploadInfo.endpoint + ', bucket:' + uploadInfo.bucket + ', object:' + uploadInfo.object
)
// 需要根据uploadInfo.videoId是否有值，
// 没有值就调用后台接口，让他们去和阿里云对接，让阿里云创建视频上传凭证提供获取 uploadauth和uploadAddress，返回回来。
// 如果有值，调用刷新视频上传凭证接口
if (uploadInfo.videoId) {
//如果uploadInfo.videoId存在，调用刷新视频上传凭证接口
let res = await refreshUploadVideo({ videoId: "上次创建的id" })
// res 是后台帮我们整的，我们只需调用即可，然后将这些参数设置给uploader，接着走后面的上传即可。
uploader.setUploadAuthAndAddress(uploadInfo, res.uploadAuth, res.uploadAddress, res.uideoId)
} else {
//如果uploadInfo.videoId不存在，调用获取视频上传地址和凭证接口
//从视频点播服务获取的uploadAuth、uploadAddress和videoId，设置到SDK里
let params = {
filename: e.target.files[0].name,
title:"文件title",
}
let res = await createUploadVideo(params) // 后台帮我们走创建逻辑，上面说清楚了。
// 拿到参数后，和上面也说过了。
uploader.setUploadAuthAndAddress(uploadInfo, res.uploadAuth, res.uploadAddress, res.videoId)
}
},
//文件上传成功
onUploadSucceed: function (uploadInfo) {
console.log(uploadInfo, 'uploadInfo')
console.log(
'onUploadSucceed: ' + uploadInfo.file.name + ', endpoint:' + uploadInfo.endpoint + ', bucket:' + uploadInfo.bucket + ', object:' + uploadInfo.object
)
that.loadingFlag = false
that.addDoc.info.fileHash = uploadInfo.fileHash
},
//文件上传失败
onUploadFailed: function (uploadInfo, code, message) {
console.log('onUploadFailed: file:' + uploadInfo.file.name + ',code:' + code + ', message:' + message)
that.loadingFlag = false
},
//文件上传进度，单位：字节
onUploadProgress: function (uploadInfo, totalSize, loadedPercent) {
console.log('onUploadProgress:file:' + uploadInfo.file.name + ', fileSize:' + totalSize + ', percent:' + Math.ceil(loadedPercent * 100) + '%')
that.viewFile[0].percentage = Math.ceil(loadedPercent * 100)
},
//上传凭证超时
onUploadTokenExpired: function (uploadInfo) {
console.log('onUploadTokenExpired')
//实现时，根据uploadInfo.videoId调用刷新视频上传凭证接口重新获取UploadAuth
//从点播服务刷新的uploadAuth，设置到SDK里
uploader.resumeUploadWithAuth(uploadAuth)
},
//全部文件上传结束
onUploadEnd: function (uploadInfo) {
console.log('onUploadEnd: uploaded all the files')
that.loadingFlag = false
},
})
// 这两个方法特别重要哦，是触发方法的关键，希望能帮到你，😁。
uploader.addFile(e.target.files[0], null, null, null, '{"Vod":{}}')
uploader.startUpload()
},
如果复制没问题的话，和接口没问题就是可以上传到阿里云了，大概流程是
先把文件添加给 uploader实例，接着开启上传。就是我上面的这两个方法。
注意，这种方式是没法做批量上传的，因为vedioId是每次都需要接口创建的
然后uploader就走 onUploadstarted，接着就判断 vedioId是否有，一般是没有就创建vedioId，就开始分片上传了，结果上传了半天没上传上去，后台又没有设置uploadAuth的有效期。然后就走刷新参数接口，接着愉快的上传了。上传就结束了。
使用阿里云点播播放
使用阿里云点播只需要 videoId + playauth 即可。大概代码你拿去大概能用，前提是后台能给你返回 playauth
组件已经封装好，使用方式给你了，记得参数记得初始化哦，复制即可。
<vod-play-com v-if="visible.vodPlayComDialog" :visible.sync="visible.vodPlayComDialog" :video-id="visible.videoId"></vod-play-com>
<template>
<div>
<el-dialog title="播放视频" width="800px" :close-on-click-modal="false" :before-close="close" :visible.sync="visible">
<div v-if="visible" id="J_prismPlayer" class="prism-player"></div>
</el-dialog>
</div>
</template>
<script>
import { getVideoPlayAuth } from '@/api/file-manage'
export default {
name: 'VodPlayCom',
props: {
visible: {
type: Boolean,
default: false,
},
videoId: {
type: [String, Number],
required: true,
},
},
data() {
return {}
},
created() {
this.getAuth()
},
methods: {
async getAuth() {
let params = {
videoId: this.videoId,
}
try {
let res = await getVideoPlayAuth(params)
console.log(res, 'res')
this.aliplayer(res.PlayAuth, res.VideoMeta.CoverURL)
} catch (error) {
console.log(error, 'error')
// this.close()
}
},
aliplayer(playauth, cover) {
const player = new Aliplayer(
{
id: 'J_prismPlayer',
vid: this.videoId,
qualitySort: 'asc',
format: 'mp4',
mediaType: 'video',
width: '100%',
height: '500px',
autoplay: true,
isLive: false,
rePlay: false,
playsinline: true,
preload: true,
controlBarVisibility: 'hover',
useH5Prism: true,
playauth: playauth,
cover: cover,
},
function (player) {
console.log('The player is created.')
}
)
},
close() {
this.$emit('update:visible', false)
},
},
}
</script>
<style scoped lang="scss"></style>
然后感觉没啥说的了。
实在不懂，又很急，V：real-gzb，没啥事就别加了。😁😁
最后有空还是看看官网吧，虽然没啥用，还是需要了解一下的。
各位看官如遇上不理解的地方，或者我文章有不足、错误的地方，欢迎在评论区指出，感谢阅读。
