视频点播

本文涉及的产品
视频点播 VOD,流量+存储+转码
简介: 视频点播

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

 

 

相关文章
如何下载阿里云视频点播数据
如何下载阿里云视频点播(VOD)数据
564 0
阿里云视频点播VOD降价15%
阿里云视频点播VOD降价15%,阿里云产品大规模调价,核心云产品价格全线下调,技术红利释放核心产品最高降幅50%,以下产品的价格调整将于2023年5月7日生效,最终以产品详情页实际情况为准,阿里云百科分享阿里云官网发布的降价产品及降价幅度说明:
252 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等