springboot vue 阿里云实现视频播放

上传视频和删除功：https://www.cnblogs.com/konglxblog/p/14901688.html 

一、获取播放地址播放

获取播放地址

Aliplayer Web播放器功能介绍：https://developer.aliyun.com/article/236764
获取加密视频播放地址会返回如下错误信息
Currently only the AliyunVoDEncryption stream exists, you must use the Aliyun player to play or set the value of ResultType to Multiple.
目前只有AliyunVoDEncryption流存在，您必须使用Aliyun player来播放或将ResultType的值设置为Multiple。
因此在testGetPlayInfo测试方法中添加 ResultType 参数，并设置为true
privateParams.put("ResultType", "Multiple");
此种方式获取的视频文件不能直接播放，必须使用阿里云播放器播放

二、视频播放器

1、视频播放器介绍

阿里云播放器SDK（ApsaraVideo Player SDK）是阿里视频服务的重要一环，除了支持点播和直播的基础播放功能外，深度融合视频云业务，如支持视频的加密播放、安全下载、清晰度切换、直播答题等业务场景，为用户提供简单、快速、安全、稳定的视频播放服务。

2、集成视频播放器

引入脚本文件和css文件
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.1/skins/default/aliplayer-min.css" />
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js"></script>

初始化视频播放器

<body>
    <div  class="prism-player" id="J_prismPlayer"></div>
    <script>
        var player = new Aliplayer({
            id: 'J_prismPlayer',
            width: '100%',
            autoplay: false,
            cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png',  
            //播放配置
        },function(player){
            console.log('播放器创建好了。')
        });
    </script>
</body>

3、播放地址播放

在Aliplayer的配置参数中添加如下属性
//播放方式一：支持播放地址播放,此播放优先级最高，此种方式不能播放加密视频
source : '你的视频播放地址',

4、播放凭证播放（推荐）

阿里云播放器支持通过播放凭证自动换取播放地址进行播放，接入方式更为简单，且安全性更高。播放凭证默认时效为100秒（最大为3000秒），只能用于获取指定视频的播放地址，不能混用或重复使用。如果凭证过期则无法获取播放地址，需要重新获取凭证。

encryptType:'1',//如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项
vid : '视频id',
playauth : '视频授权码',
注意：播放凭证有过期时间，默认值：100秒 。取值范围：100~3000。
设置播放凭证的有效期
在获取播放凭证的测试用例中添加如下代码
request.setAuthInfoTimeout(200L);

在线配置参考：https://player.alicdn.com/aliplayer/setting/setting.html

5、播放组件相关文档

三、视频播放例子（播放凭证播放）

1、InitVodClient类，初始化对象

package com.stu.vod.utils;

import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.exceptions.ClientException;
import com.aliyuncs.profile.DefaultProfile;

public class InitVodClient {
    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;
    }
}

2、controller类，根据视频id获取视频的播放凭证

package com.stu.vod.controller;

import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.exceptions.ClientException;
import com.aliyuncs.vod.model.v20170321.GetVideoPlayAuthRequest;
import com.aliyuncs.vod.model.v20170321.GetVideoPlayAuthResponse;
import com.stu.commonutils.ResultData;
import com.stu.servicebase.exceptionHandler.GuliException;
import com.stu.vod.service.VodService;
import com.stu.vod.utils.ConstantVodUtils;
import com.stu.vod.utils.InitVodClient;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.util.List;

@RestController
@RequestMapping("/eduvod/video")

@CrossOrigin
public class VodController {


    //根据视频id获取视频的播放凭证
    @GetMapping("getAlyVideoAuth/{id}")
    public ResultData getAlyVideoAuth(@PathVariable String id){

        try {
            //1.1创建初始化对象
            //创建初始化对象
            DefaultAcsClient client = InitVodClient.initVodClient(ConstantVodUtils.KEY_ID,ConstantVodUtils.KEY_SECRET);
            //1.2创建获取视频地址response和request对象
            GetVideoPlayAuthRequest request = new GetVideoPlayAuthRequest();
            GetVideoPlayAuthResponse response = new GetVideoPlayAuthResponse();
            //1.3向request对象里面设置视频id
            request.setVideoId(id);
            //1.4调用初始化对象里的方法，取得凭证
            response = client.getAcsResponse(request);
            String playAuth = response.getPlayAuth();
            return ResultData.success().data("playAuth",playAuth);
        } catch (ClientException e) {
            throw new GuliException(20001,"获取凭证失败");
        }

    }
}

3、vue文件

<template>
  <div>

    <!-- 阿里云视频播放器样式 -->
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.1/skins/default/aliplayer-min.css" >
    <!-- 阿里云视频播放器脚本 -->
    <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js" />

    <!-- 定义播放器dom -->
    <div id="J_prismPlayer" class="prism-player" />
  </div>
</template>
<script>
import vod from '@/api/vod'
 
export default {
    
  layout: 'video',//应用video布局
  asyncData({ params, error }){
    //这个return teacheApi的return后边不能回车换行
    return vod.getAlyVideoAuth(params.vid)
    .then(res=>{

      // this.data = res.data.data;
      return {  
        vid: params.vid,
        playAuth: res.data.data.playAuth

      }
      
    })

  },
 　//创建播放器
   /**
   * 页面渲染完成时：此时js脚本已加载，Aliplayer已定义，可以使用
   * 如果在created生命周期函数中使用，Aliplayer is not defined错误
   */
  mounted() {
      new Aliplayer({
          id: 'J_prismPlayer',
          vid: this.vid, // 视频id
          playauth: this.playAuth, // 播放凭证
          encryptType: '1', // 如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项
          width: '100%',
          height: '500px',
          // 以下可选设置
          cover: 'http://guli.shop/photo/banner/1525939573202.jpg', // 封面
          qualitySort: 'asc', // 清晰度排序

          mediaType: 'video', // 返回音频还是视频
          autoplay: false, // 自动播放
          isLive: false, // 直播
          rePlay: false, // 循环播放
          preload: true,
          controlBarVisibility: 'hover', // 控制条的显示方式：鼠标悬停
          useH5Prism: true, // 播放器类型：html5
      }, function(player) {
          console.log('播放器创建成功')
      })
  }
}
</script> 

 

 
posted @ 2021-08-08 22:34  程序员小明1024  阅读(964)  评论(0)  编辑  收藏  举报