springboot + vue 整合 阿里云 视频点播 功能

这篇具有很好参考价值的文章主要介绍了springboot + vue 整合 阿里云 视频点播 功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

阿里云 视频播放操作

1.1、找到视频点播

springboot+vue整合阿里云视频,vue,阿里云,云计算,junit,spring boot,vue.js

1.2、进入管理控制台

springboot+vue整合阿里云视频,vue,阿里云,云计算,junit,spring boot,vue.js

1.2、开通服务

springboot+vue整合阿里云视频,vue,阿里云,云计算,junit,spring boot,vue.js

1.3、选择“按使用流量计费”,开通服务

springboot+vue整合阿里云视频,vue,阿里云,云计算,junit,spring boot,vue.js

1.4、开通后,进入管理控制台

springboot+vue整合阿里云视频,vue,阿里云,云计算,junit,spring boot,vue.js

1.5、上传音 / 视频

springboot+vue整合阿里云视频,vue,阿里云,云计算,junit,spring boot,vue.js

1.6、启用存储地址

springboot+vue整合阿里云视频,vue,阿里云,云计算,junit,spring boot,vue.js

1.7、已启用

springboot+vue整合阿里云视频,vue,阿里云,云计算,junit,spring boot,vue.js

1.8、选择上传的音频,开始上传

springboot+vue整合阿里云视频,vue,阿里云,云计算,junit,spring boot,vue.js

1.9、上传成功

springboot+vue整合阿里云视频,vue,阿里云,云计算,junit,spring boot,vue.js

springboot+vue整合阿里云视频,vue,阿里云,云计算,junit,spring boot,vue.js

1.10、分类管理

springboot+vue整合阿里云视频,vue,阿里云,云计算,junit,spring boot,vue.js

1.11、视频转码

springboot+vue整合阿里云视频,vue,阿里云,云计算,junit,spring boot,vue.js

1.12、再上传一个视频,添加转码,分类上传

springboot+vue整合阿里云视频,vue,阿里云,云计算,junit,spring boot,vue.js

1.13、上传后,显示转码中,需要一点时间

springboot+vue整合阿里云视频,vue,阿里云,云计算,junit,spring boot,vue.js

使用工具类进行视频上传

2.1、引入依赖
<dependencies>
     <dependency>
         <groupId>com.aliyun</groupId>
         <artifactId>aliyun-java-sdk-core</artifactId>
     </dependency>
     <dependency>
         <groupId>com.aliyun.oss</groupId>
         <artifactId>aliyun-sdk-oss</artifactId>
     </dependency>
     <dependency>
         <groupId>com.aliyun</groupId>
         <artifactId>aliyun-java-sdk-vod</artifactId>
     </dependency>
     <dependency>
         <groupId>com.aliyun</groupId>
         <artifactId>aliyun-sdk-vod-upload</artifactId>
     </dependency>
     <dependency>
         <groupId>com.alibaba</groupId>
         <artifactId>fastjson</artifactId>
     </dependency>
     <dependency>
         <groupId>org.json</groupId>
         <artifactId>json</artifactId>
     </dependency>
     <dependency>
         <groupId>com.google.code.gson</groupId>
         <artifactId>gson</artifactId>
     </dependency>

     <dependency>
         <groupId>joda-time</groupId>
         <artifactId>joda-time</artifactId>
     </dependency>
 </dependencies>
2.2、初始化类
public class InitObject {

    public static DefaultAcsClient initVodClient(String accessKeyId, String accessKeySecret) throws ClientException {
        String regionId = "cn-guangzhou";  // 点播服务接入区域
        DefaultProfile profile = DefaultProfile.getProfile(regionId, accessKeyId, accessKeySecret);
        DefaultAcsClient client = new DefaultAcsClient(profile);
        return client;
    }
}
2.3、测试类
public class TestVod {

    public static void main(String[] args) {
        String accessKeyId = "xxxx";
        String accessKeySecret = "xxxxx";

        String title = "6 - What If I Want to Move Faster - upload by sdk";   //上传之后文件名称
        String fileName = "E:\\aaaaa\\6 - What If I Want to Move Faster.mp4";  //本地文件路径和名称
        //上传视频的方法
        UploadVideoRequest request = new UploadVideoRequest(accessKeyId, accessKeySecret, title, fileName);
        /* 可指定分片上传时每个分片的大小,默认为2M字节 */
        request.setPartSize(2 * 1024 * 1024L);
        /* 可指定分片上传时的并发线程数,默认为1,(注:该配置会占用服务器CPU资源,需根据服务器情况指定)*/
        request.setTaskNum(1);

        UploadVideoImpl uploader = new UploadVideoImpl();
        UploadVideoResponse response = uploader.uploadVideo(request);

        if (response.isSuccess()) {
            System.out.print("VideoId=" + response.getVideoId() + "\n");
        } else {
            /* 如果设置回调URL无效,不影响视频上传,可以返回VideoId同时会返回错误码。其他情况上传失败时,VideoId为空,此时需要根据返回错误码分析具体错误原因 */
            System.out.print("VideoId=" + response.getVideoId() + "\n");
            System.out.print("ErrorCode=" + response.getCode() + "\n");
            System.out.print("ErrorMessage=" + response.getMessage() + "\n");
        }
    }

    //1 根据视频iD获取视频播放凭证
    public static void getPlayAuth() throws Exception{

        DefaultAcsClient client = InitObject.initVodClient("xxxx", "xxxx");

        GetVideoPlayAuthRequest request = new GetVideoPlayAuthRequest();
        GetVideoPlayAuthResponse response = new GetVideoPlayAuthResponse();

        request.setVideoId("990b13273e004b088da9a456ba425e28");

        response = client.getAcsResponse(request);
        System.out.println("playAuth:"+response.getPlayAuth());
    }
    //1 根据视频iD获取视频播放地址
    public static void getPlayUrl() throws Exception{
        //创建初始化对象
        DefaultAcsClient client = InitObject.initVodClient("xxxx", "xxxx");

        //创建获取视频地址request和response
        GetPlayInfoRequest request = new GetPlayInfoRequest();
        GetPlayInfoResponse response = new GetPlayInfoResponse();

        //向request对象里面设置视频id
        request.setVideoId("990b13273e004b088da9a456ba425e28");

        //调用初始化对象里面的方法,传递request,获取数据
        response = client.getAcsResponse(request);

        List<GetPlayInfoResponse.PlayInfo> playInfoList = response.getPlayInfoList();
        //播放地址
        for (GetPlayInfoResponse.PlayInfo playInfo : playInfoList) {
            System.out.print("PlayInfo.PlayURL = " + playInfo.getPlayURL() + "\n");
        }
        //Base信息
        System.out.print("VideoBase.Title = " + response.getVideoBase().getTitle() + "\n");
    }
}
2.4、运行

springboot+vue整合阿里云视频,vue,阿里云,云计算,junit,spring boot,vue.js

2.5、查看云服务器

springboot+vue整合阿里云视频,vue,阿里云,云计算,junit,spring boot,vue.js

使用springboot进行上传

3.1、引入依赖(同上)
3.2、配置application文件
# 服务端口
server.port=8003
# 服务名
spring.application.name=service-vod

# 环境设置:dev、test、prod
spring.profiles.active=dev

#阿里云 vod
#不同的服务器,地址不同
aliyun.vod.file.keyid=xxxx
aliyun.vod.file.keysecret=xxxx

# 最大上传单个文件大小:默认1M
spring.servlet.multipart.max-file-size=1024MB
# 最大置总上传的数据大小 :默认10M
spring.servlet.multipart.max-request-size=1024MB
3.3、获取配置中的值的Bean
@Component
public class ConstantVodUtils implements InitializingBean {

    @Value("${aliyun.vod.file.keyid}")
    private String keyid;

    @Value("${aliyun.vod.file.keysecret}")
    private String keysecret;

    public static String ACCESS_KEY_SECRET;
    public static String ACCESS_KEY_ID;

    @Override
    public void afterPropertiesSet() throws Exception {
        ACCESS_KEY_ID = keyid;
        ACCESS_KEY_SECRET = keysecret;
    }
}
3.4、controller代码

@RestController
@RequestMapping("/eduvod/video")
@CrossOrigin
public class VodController {

    @Autowired
    private VodService vodService;

    //上传视频到阿里云
    @PostMapping("uploadAlyiVideo")
    public R uploadAlyiVideo(MultipartFile file) {
        //返回上传视频id
        String videoId = vodService.uploadVideoAly(file);
        return R.ok().data("videoId",videoId);
    }
}
3.5、service代码
@Service
public class VodServiceImpl implements VodService {

    @Override
    public String uploadVideoAly(MultipartFile file) {

        try {
            //accessKeyId, accessKeySecret
            //fileName:上传文件原始名称
            // 01.03.09.mp4
            String fileName = file.getOriginalFilename();
            //title:上传之后显示名称
            String title = fileName.substring(0, fileName.lastIndexOf("."));
            //inputStream:上传文件输入流
            InputStream inputStream = file.getInputStream();
            UploadStreamRequest request = new UploadStreamRequest(ConstantVodUtils.ACCESS_KEY_ID,ConstantVodUtils.ACCESS_KEY_SECRET, title, fileName, inputStream);

            UploadVideoImpl uploader = new UploadVideoImpl();
            UploadStreamResponse response = uploader.uploadStream(request);

            String videoId = null;
            if (response.isSuccess()) {
                videoId = response.getVideoId();
            } else { //如果设置回调URL无效,不影响视频上传,可以返回VideoId同时会返回错误码。其他情况上传失败时,VideoId为空,此时需要根据返回错误码分析具体错误原因
                videoId = response.getVideoId();
            }
            return videoId;
        }catch(Exception e) {
            e.printStackTrace();
            return null;
        }

    }
}
3.6、swagger测试

springboot+vue整合阿里云视频,vue,阿里云,云计算,junit,spring boot,vue.js

3.7、服务器查看

springboot+vue整合阿里云视频,vue,阿里云,云计算,junit,spring boot,vue.js

整合前端进行上传

4.1 有nginx进行反向代理的设置
4.1.1、设置请求转发地址
location ~ /vod/ {           
    proxy_pass http://localhost:8003;
}
4.1.2、设置上传文件的大小限制

配置nginx上传文件大小,否则上传时会有 413 (Request Entity Too Large) 异常;
打开nginx主配置文件nginx.conf,找到http{},添加

client_max_body_size 1024m;
4.1.3、重启服务
nginx -s reload

或者 先关闭再启动

#关闭服务
nginx.exe -s stop
#启用
nginx.exe
4.2、前端实现-数据定义
fileList: [],//上传文件列表
BASE_API: process.env.BASE_API // 接口API地址
4.3、整合上传组件
<el-form-item label="上传视频">
     <el-upload
         :on-success="handleVodUploadSuccess"
         :on-remove="handleVodRemove"
         :before-remove="beforeVodRemove"
         :on-exceed="handleUploadExceed"
         :file-list="fileList"
         :action="BASE_API+'/eduvod/video/uploadAlyiVideo'"
         :limit="1"
         class="upload-demo">
     <el-button size="small" type="primary">上传视频</el-button>
     <el-tooltip placement="right-end">
         <div slot="content">最大支持1G,<br>
             支持3GP、ASFAVIDATDVFLVF4V<br>
             GIFM2TM4VMJ2MJPEGMKVMOVMP4<br>
             MPEMPGMPEGMTSOGGQTRMRMVB<br>
             SWFTSVOBWMVWEBM 等视频格式上传</div>
         <i class="el-icon-question"/>
     </el-tooltip>
     </el-upload>
 </el-form-item>
4.4、方法回调
 //上传视频成功调用的方法
 handleVodUploadSuccess(response, file, fileList) {
     //上传视频id赋值
     this.video.videoSourceId = response.data.videoId
     //上传视频名称赋值
     this.video.videoOriginalName = file.name
 },
 handleUploadExceed() {
     this.$message.warning('想要重新上传视频,请先删除已上传的视频')
 },
4.5、页面上传文件

springboot+vue整合阿里云视频,vue,阿里云,云计算,junit,spring boot,vue.js

4.6、查看服务器

springboot+vue整合阿里云视频,vue,阿里云,云计算,junit,spring boot,vue.js

点击x删除上传

5.1、初始化类
public class InitVodCilent {

    public static DefaultAcsClient initVodClient(String accessKeyId, String accessKeySecret) throws ClientException {
        String regionId = "cn-shanghai";  // 点播服务接入区域
        DefaultProfile profile = DefaultProfile.getProfile(regionId, accessKeyId, accessKeySecret);
        DefaultAcsClient client = new DefaultAcsClient(profile);
        return client;
    }
}
5.2、删除接口
//根据视频id删除阿里云视频
 @DeleteMapping("removeAlyVideo/{id}")
 public R removeAlyVideo(@PathVariable String id) {
     try {
         //初始化对象
         DefaultAcsClient client = InitVodCilent.initVodClient(ConstantVodUtils.ACCESS_KEY_ID, ConstantVodUtils.ACCESS_KEY_SECRET);
         //创建删除视频request对象
         DeleteVideoRequest request = new DeleteVideoRequest();
         //向request设置视频id
         request.setVideoIds(id);
         //调用初始化对象的方法实现删除
         client.getAcsResponse(request);
         return R.ok();
     }catch(Exception e) {
         e.printStackTrace();
         throw new GuliException(20001,"删除视频失败");
     }
 }
5.3、前端方法

springboot+vue整合阿里云视频,vue,阿里云,云计算,junit,spring boot,vue.js

5.4、点击x的事件,对应的方法

springboot+vue整合阿里云视频,vue,阿里云,云计算,junit,spring boot,vue.js

 //点击确定调用的方法
 handleVodRemove() {
 //调用接口的删除视频的方法
 video.deleteAliyunvod(this.video.videoSourceId)
     .then(response => {
         //提示信息
         this.$message({
             type: 'success',
             message: '删除视频成功!'
         });
         //把文件列表清空
         this.fileList = []
         //把video视频id和视频名称值清空
         //上传视频id赋值
         this.video.videoSourceId = ''
         //上传视频名称赋值
         this.video.videoOriginalName = ''
     })
},
//点击×调用这个方法
beforeVodRemove(file,fileList) {
 return this.$confirm(`确定移除 ${ file.name }`);
},
5.5、页面效果

springboot+vue整合阿里云视频,vue,阿里云,云计算,junit,spring boot,vue.jsspringboot+vue整合阿里云视频,vue,阿里云,云计算,junit,spring boot,vue.js

5.6、服务器查看,已经删除

springboot+vue整合阿里云视频,vue,阿里云,云计算,junit,spring boot,vue.js

结束!!!!文章来源地址https://www.toymoban.com/news/detail-784432.html


		   如果你困在一个地方,每天都完全一样,做什么都改变不了状况,你会怎么办?

到了这里,关于springboot + vue 整合 阿里云 视频点播 功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小程序中无法播放阿里云的视频点播

    视频直接存在自己的服务器,视频大了会存在卡顿现象,只能用阿里云或其它服务商的相关服务。 原来在APP中已有了视频播放的功能,而且已经能正常使用,但视频的url是 http。 现在期望在小程序中也添加视频播放的功能。 申请相关url的ssl证书, 进阿里云了搜索 ssl证书,进

    2024年02月06日
    浏览(51)
  • 【开发】视频集中存储/直播点播平台EasyDSS点播文件分类功能优化

    视频推拉流EasyDSS视频直播点播平台,集视频直播、点播、转码、管理、录像、检索、时移回看等功能于一体,可提供音视频采集、视频推拉流、播放H.265编码视频、存储、分发等视频能力服务。 TSINGSEE青犀视频的EasyDSS平台具有点播文件分类展示方法,有两种实现方式可供用户

    2024年02月09日
    浏览(39)
  • 视频集中存储/直播点播平台EasyDSS点播文件分类功能新升级

    视频推拉流EasyDSS视频直播点播平台,集视频直播、点播、转码、管理、录像、检索、时移回看等功能于一体,可提供音视频采集、视频推拉流、播放H.265编码视频、存储、分发等视频能力服务。 TSINGSEE青犀视频的EasyDSS平台具有点播文件分类展示方法,有两种实现方式可供用户

    2024年02月09日
    浏览(35)
  • Spring Boot集成阿里云视频点播服务的过程记录

    在对接阿里云视频点播服务时,踩了不少的坑。特此记录阿里云视频点播服务的相关使用。 同时使用Spring Boot集成阿里云视频点播服务,对接其上传SDK、服务端SDK、播放器SDK,最终完成如下Demo演示。 视频点播(ApsaraVideo VoD,简称VoD)是集视频采集、编辑、上传、媒体资源管

    2023年04月21日
    浏览(39)
  • LiveQing视频点播RTMP推流直播功能-点播拉转在线资源拉转转推到鉴权直播间云端录像集中录像存储

    LiveQing RTMP直播点播流媒体服务 接收RTMP推流服务、支持RTMP分发、HLS分发、HTTP-FLV分发、WS-FLV分发、WebRTC分发; 云端录像、云端录像检索、云端录像点播、云端录像下载; RTMP转推、推流鉴权验证、推流信息统计、播放信息统计; 直播分享、开放直播、拉转直播; 视频上传、视频转

    2024年02月17日
    浏览(45)
  • 基于JAVA+Springboot+Thymeleaf前后端分离项目:在线教育视频点播学习系统设计与实现

     博主介绍 :黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,学习后应对毕业设计答辩。 项目配有对应开发文档、

    2024年02月19日
    浏览(54)
  • 基于Java+Springboot+mysql在线教育视频点播学习系统设计与实现 毕业设计论文大纲参考

     博主介绍 :黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,学习后应对毕业设计答辩。 项目配有对应开发文档、

    2024年02月20日
    浏览(49)
  • 基于Java(SpringBoot框架)毕业设计作品成品(09)we在线教育视频点播学习系统设计与实现

    博主介绍: 《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、PPT、论文模版

    2024年02月07日
    浏览(61)
  • CRMEB知识付费二次开发 加密阿里云视频MP4点播链接为m3u8格式 hls blob协议

    只有添加分发加速的域名才能使用HLS加密,同时也要做HTTPS证书添加,不然也会报错。 1、这是电脑端视频播放页面效果 2、这个手机端H5视频播放页面效果 3、在网站后台上传你的视频内容 4、上传完之后可以进行预览 5、在阿里云控制台设置就好自己的转码模板 将不转码设为

    2024年02月08日
    浏览(55)
  • 浅述HLS视频服务器EasyDarwin视频直播点播平台如何快速搭建一个视频点播系统

    EasyDarwin视频直播点播平台能实现视频流媒体的上传、转码、存储、录像、推拉流、直播、点播等功能,可兼容Windows、Android、iOS、Mac等操作系统,系统支持HTTP、HLS、RTMP等播出协议,具备较强的可拓展性与灵活性。 EasyDarwin的特点包括: 1.开源免费:EasyDarwin以开源的形式发布

    2024年02月20日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包