vue ali-oss 视频播放、下载封装组件

本文档介绍了如何在Vue项目中封装阿里云OSS视频播放和下载组件。首先,通过获取oss-client对象来调用阿里云OSS接口。接着展示页面布局及组件设计,组件接收一个数组参数,用于匹配上传时的数据,实现视频的播放和下载功能。文中还包含了点击下载和播放的交互效果展示,以及完整的代码实现。
摘要由CSDN通过智能技术生成

上面文章 https://blog.csdn.net/cxz792116/article/details/96906166 讲到了 ali-oss 视频上传组件的封装
单如果想播放或者利用浏览器下载,还需要进一步的调用ali-oss 的接口文档,下面就开始这方面的
介绍。

1、获取 oss-ali , client 对象参数

import OSS from "ali-oss"
	
// 说明,直接调用阿里云接口,有可能信息会暴露。建议请求自己后台加密后的接口

OSS.urllib.request(  后台接口, { method: 'GET' }, (err, response) => {
		let result = null
        if (err) return _this.$message.error('网络错误!')
        try {
          result = JSON.parse(response)
        } catch (e) {
          result = null
          return alter('网络错误!')
        }
       this.client = new OSS({
	      region: 'oss-cn-hangzhou',
	      accessKeyId: '<Your AccessKeyId>',
	      accessKeySecret: '<Your AccessKeySecret>',
	      bucket: 'Your bucket name',
	      secure: false
    })

2、编写页面

  <div id="download-cp">
    <ul class="list-box" v-if="downList.length > 0">
      <li class="video-item" v-for="(item,index) in fileList" :key="index">
        <p class="video-item__title">
          {
  {item.fileName}}
        </p>
        <p class="video-item__opera">
          <el-button size="mini" type="primary" @click="downVideo(item.url)">点击下载</el-button>
          <el-button v-if="isPlay" size&
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值