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
