最近开发一个视频网站项目,想学习一些新东西,所以用了vue开发前台,用的是阿里云的视频点播服务,估计有条件的就自己开发了,,,
因为是个新手,还要对接这种服务,特别头大,去网上各种搜索,但是贴子几乎没有,没办法,只能自己硬啃,几经磨难,终于立地成佛,废话不多说,说一下我对接的过程和所犯的错误,避免以后忘记
ps:阿里云的文档怎麽说呢,非常好,每一句话都是经典,但是可能比较适合强有力的选手,我有点弱鸡,只能在做完之后才明白整体的思路,以及大致应该走的流程和知识点,所以下面我会理一下文档的观看流程,因为我当时是跳着看的!!!
首先是第一步,接入阿里云的视频点播,从文档开始撸,这里需要注意的是 CNAME绑定 和 视频转码 的问题,我会在视频播放篇说到
接下来就是上传了,我们先来看 开发指南->帐号 ,我用的是AccessKey,STS没用,不做说明,这里需要注意的是生成一个RAM子帐号,主帐号会有风险,没错,这是阿里云说的
然后是上传,上传我用的是客户端上传,因为服务端上传目前只支持JAVA,而我是最好的PHP
客户端上传有两种方式,有demo,非常好用,参考demo,仔细阅读文档一定可以成功,一定要仔细看看,我就是没仔细看卡住的
第一种是使用HTTP请求,也就是阿里云官方API上传,这种需要携带公共参数,具体的大家自己看文档吧,或者参考下这个https://forum.vuejs.org/t/vue/23732,当初上传时卡到,是这个代码帮助了我找到了错误,感谢贴出这个代码的作者
第二种是前端向后端携带参数发送请求,我感觉这样简单点,所以用的这个,需要后端接入SDK,版本有Java,Python,PHP, .NET,Go
上传基本逻辑(后面 vue上传 也是这个逻辑):
1.引入js文件(vue是在index.html引入下载的demo的js文件,我放在static目录下了)
2.获取上传凭证(服务端或api,api需要携带好参数)
3.选择视频,change事件改变加入上传列表(uploader.addFile,注意选中的文件一定要加入上传列表,我当时是这里忘了添加卡住了)
4.开始上传,调用new出的对象上传
5.,返回定义的全局属性值,进行本地数据库上传
下面贴一下我的代码供大家参考:
这里我写在了页面<script></script>里面,export default {}外面,也可以把这个对象单独定义一个文件,用 import引入
当选中视频上传时,获取参数(这里会在阿里云点播控制台生成一个临时的文件),然后把视频加入到上传列表中
uploader.addFile视频加入到上传列表
这样,视频就可以上传成功了,如果不行,去看一下阿里云的demo和文当,需要仔细观看,或者留言
如果有错误,希望大家指出我的错误,以便于我改正,我也是个新手,然后希望有一个好的社区环境,大家互帮互助,但绝对不是不去思考,品尝过苦的东西才能令人记忆深刻