资讯专栏INFORMATION COLUMN

靠近阿里云--视频点播

RdouTyping / 980人阅读

摘要:在使用做前端项目需求视频直传阿里云服务器参考文档阿里云官方导入官方的事件获取上传权限采用上传方式,后台获取相关权限去上传去上传获取视频信息得到视频封面图片获取视频信息正在获取缩略图这里加定时器,等待响应下面是设置上传进度分片大小

在使用vue做前端项目需求视频直传阿里云服务器
参考文档(阿里云官方)
https://help.aliyun.com/docum...

导入官方sdk


input的@change事件

change(event) {
     let file = event.target.files[0]
     let url = URL.createObjectURL(file)
     this.getVideoUploadAuth(file) //获取上传权限
}

采用UploadAuthAndAddress上传方式,后台php获取相关权限

getVideoUploadAuth(file) {
    let path = document.getElementById("file").value
    let params = {
        video_title: file.name,
        video_url: path
    }
    axios.post("https://xxx/aliapi/upload.php", params).then(res => {
        uploadAuth = res.data.UploadAuth
        uploadAddress = res.data.UploadAddress
        videoId = res.data.VideoId
        uploader.addFile(file, null, null, null, userData);
        this.videoUploadFn() //去上传
    })
}

去上传

videoUploadFn() {
    uploader.startUpload();
    _videoUploadSuccess.ok = false
    let interval = setInterval(() => {
        if(_videoUploadSuccess.ok) {
               clearInterval(interval)
               this.getVideoInfo() // 获取视频信息得到视频封面图片
          }
     , 10);
}

获取视频信息

getVideoInfo() {
    let sett 
    this.$post(`https://xxxx/ali/info.php`,{videoId :_videoUploadSuccess.uploadInfo.videoId}).then(res => {
         res = res.data
         xmview.showLoading("正在获取缩略图..")
         if (res.Video.CoverURL) {
             this.posterimg = res.Video.CoverURL
             sessionStorage.setItem("video_content",_videoUploadSuccess.uploadInfo.videoId)
             sessionStorage.setItem("video_thumb",res.Video.CoverURL)
             xmview.hideLoading()
             clearTimeout(sett)
         } else {
             // 这里加定时器,等待响应
             sett = setTimeout(() => {
                 this.getVideoInfo()
             }, 3000);
         }               
    })
}

下面是sdk设置

var uploadAuth = ""
var uploadAddress = "" 
var videoId = ""
var _videoUploadSuccess = {
    ok: false,
    uploadInfo: {}
}
var _uploadprogress = 0 // 上传进度
const uploader = new AliyunUpload.Vod({
        //分片大小默认1M,不能小于100K
        partSize: 1048576,
        //并行上传分片个数,默认5
        parallel: 5,
        //网络原因失败时,重新上传次数,默认为3
        retryCount: 3,
        //网络原因失败时,重新上传间隔时间,默认为2秒
        retryDuration: 2,
        // 开始上传
        "onUploadstarted": function(uploadInfo) {
            console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
            //上传方式1, 需要根据uploadInfo.videoId是否有值,调用点播的不同接口获取uploadauth和uploadAddress,如果videoId有值,调用刷新视频上传凭证接口,否则调用创建视频上传凭证接口
            uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId);
        },
        // 文件上传成功
        "onUploadSucceed": function(uploadInfo) {
            _videoUploadSuccess.ok = true
            _videoUploadSuccess.uploadInfo = uploadInfo
            console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
        },
        // 文件上传失败
        "onUploadFailed": function(uploadInfo, code, message) {
            console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message);
        },
        // 文件上传进度,单位:字节
        "onUploadProgress": function(uploadInfo, totalSize, loadedPercent) {
            _uploadprogress = Math.ceil(loadedPercent * 100)
            console.log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(loadedPercent * 100) + "%");
        },
        // 上传凭证超时
        "onUploadTokenExpired": function(uploadInfo) {
            console.console.log("onUploadTokenExpired");
            //上传方式1  实现时,根据uploadInfo.videoId调用刷新视频上传凭证接口重新获取UploadAuth
            uploader.resumeUploadWithAuth(uploadAuth);
            // 上传方式2 实现时,从新获取STS临时账号用于恢复上传
            // uploader.resumeUploadWithSTSToken(accessKeyId, accessKeySecret, secretToken, expireTime);
        },
        //全部文件上传结束
        "onUploadEnd": function(uploadInfo) {
            console.log("onUploadEnd: uploaded all the files");
        }
    });
    const userData = "{"Vod":{"UserData":{"IsShowWaterMark":"false","Priority":"7"}}}"

2018-10-24
完。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/98650.html

相关文章

  • 阿里战略投入边缘计算技术领域 发布首款产品Link Edge

    摘要:月日,在云栖大会深圳峰会上,阿里云宣布年将战略投入边缘计算技术领域。月日,阿里巴巴集团宣布将列为继云计算后新的主赛道,并战略投入边缘计算,在全球形成一朵无处不在的云。 3月28日,在2018云栖大会·深圳峰会上,阿里云宣布2018年将战略投入边缘计算技术领域。 showImg(https://segmentfault.com/img/bV7fOA?w=975&h=584); 同时,推出...

    AlanKeene 评论0 收藏0
  • 阿里战略投入边缘计算技术领域 发布首款产品Link Edge

    摘要:月日,在云栖大会深圳峰会上,阿里云宣布年将战略投入边缘计算技术领域。月日,阿里巴巴集团宣布将列为继云计算后新的主赛道,并战略投入边缘计算,在全球形成一朵无处不在的云。 3月28日,在2018云栖大会·深圳峰会上,阿里云宣布2018年将战略投入边缘计算技术领域。 showImg(https://segmentfault.com/img/bV7fOA?w=975&h=584); 同时,推出...

    wuaiqiu 评论0 收藏0
  • 阿里战略投入边缘计算技术领域 发布首款产品Link Edge

    摘要:月日,在云栖大会深圳峰会上,阿里云宣布年将战略投入边缘计算技术领域。月日,阿里巴巴集团宣布将列为继云计算后新的主赛道,并战略投入边缘计算,在全球形成一朵无处不在的云。 3月28日,在2018云栖大会·深圳峰会上,阿里云宣布2018年将战略投入边缘计算技术领域。 showImg(https://segmentfault.com/img/bV7fOA?w=975&h=584); 同时,推出...

    LoftySoul 评论0 收藏0
  • 阿里战略投入边缘计算技术领域 发布首款产品Link Edge

    摘要:月日,在云栖大会深圳峰会上,阿里云宣布年将战略投入边缘计算技术领域。月日,阿里巴巴集团宣布将列为继云计算后新的主赛道,并战略投入边缘计算,在全球形成一朵无处不在的云。 3月28日,在2018云栖大会·深圳峰会上,阿里云宣布2018年将战略投入边缘计算技术领域。 showImg(https://segmentfault.com/img/bV7fOA?w=975&h=584); 同时,推出...

    williamwen1986 评论0 收藏0
  • 靠近阿里---图片上传(1)

    摘要:前端项目,基于框架实现阿里云图片上传单张安装依赖包编写后端提供数据直接使用使用的直传完。 前端项目,基于vue框架实现阿里云图片上传(单张) 1.安装依赖包 npm install ali-oss 2.编写alioss.js var OSS = require(ali-oss) export function client() { var client = new OSS({ ...

    JellyBool 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<