视频点播

简介: 视频点播

controller

@GetMapping("get-play-auth/{videoId}")
public R getVideoPlayAuth(@PathVariable("videoId") String videoId) throws Exception {
    //获取阿里云存储相关常量
    String accessKeyId = ConstantVodUtils.ACCESS_KEY_ID;
    String accessKeySecret = ConstantVodUtils.ACCESS_KEY_SECRET;
    String regionId = ConstantVodUtils.REGION_ID;
    //初始化
    DefaultAcsClient client = AliyunVodSDKUtils.initVodClient(regionId,accessKeyId, accessKeySecret);
    //请求
    GetVideoPlayAuthRequest request = new GetVideoPlayAuthRequest();
    request.setVideoId(videoId);
    //响应
    GetVideoPlayAuthResponse response = client.getAcsResponse(request);
    //得到播放凭证
    String playAuth = response.getPlayAuth();
    //返回结果
    return R.ok().message("获取凭证成功").data("playAuth", playAuth);
}

前端

<template>
  <body>
    <div id="J_prismPlayer"/>
  </body>
</template>
<script>
import vod from '@/api/vod'
//引入前先安装依赖 npm i aliyun-aliplayer
import Aliplayer from 'aliyun-aliplayer'
export default {
  /**
 * 页面渲染完成时:此时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'
    }, function(player) {
      console.log('播放器创建成功')
    })
  },
  layout: 'video', // 应用video布局
  asyncData({ params, error }) {
    return vod.getPlayAuth(params.vid).then(response => {
      // console.log(response.data.data)
      return {
        vid: params.vid,
        playAuth: response.data.data.playAuth
      }
    })
  }
}
</script>

// 以下可选设置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

 

 

相关文章
|
7月前
|
存储 安全 机器人
如何下载阿里云视频点播数据
如何下载阿里云视频点播(VOD)数据
298 0
|
13天前
|
应用服务中间件 API 开发工具
阿里云视频点播功能
阿里云视频点播功能
21 0
|
8月前
|
存储 编解码 API
阿里云视频点播VoD
阿里云视频点播VoD
456 0
|
弹性计算 编解码 负载均衡
阿里云视频点播VOD降价15%
阿里云视频点播VOD降价15%,阿里云产品大规模调价,核心云产品价格全线下调,技术红利释放核心产品最高降幅50%,以下产品的价格调整将于2023年5月7日生效,最终以产品详情页实际情况为准,阿里云百科分享阿里云官网发布的降价产品及降价幅度说明:
210 0
|
存储 C#
C# 阿里云视频点播
C# 阿里云视频点播
268 0
C# 阿里云视频点播
|
编解码 C#
C# 阿里云视频点播--视频转码
C# 阿里云视频点播--视频转码
437 0
C# 阿里云视频点播--视频转码
|
存储 编解码 边缘计算
阿里云视频点播服务介绍|学习笔记
快速学习阿里云视频点播服务介绍
742 1
阿里云视频点播服务介绍|学习笔记
|
开发工具 开发者 微服务
技术点-阿里云视频点播(上传视频) | 学习笔记
快速学习技术点-阿里云视频点播(上传视频)
291 0
|
机器学习/深度学习 编解码 人工智能
技术点-阿里云视频点播介绍 | 学习笔记
快速学习技术点-阿里云视频点播介绍
154 0
技术点-阿里云视频点播介绍 | 学习笔记
|
存储 编解码 对象存储
技术点-阿里云视频点播控制台 | 学习笔记
快速学习技术点-阿里云视频点播控制台
207 0