1.创建一个普通的html页面
我们先来到我们的阿里云控制台，先拿到我们的视频id
来到我们之前写的代码里，运行一下拿到授权码
//1 根据视频iD获取视频播放凭证 public static void getPlayAuth() throws Exception{ DefaultAcsClient client=InitObject.initVodClient("LTAI4G6wT9rRbhacy6YBj9Lt","04jdcJDdAgEJWD0pqLyf4smnW0Xou7"); GetVideoPlayAuthRequest request = new GetVideoPlayAuthRequest(); GetVideoPlayAuthResponse response = new GetVideoPlayAuthResponse(); request.setVideoId("00072df35c2748069f3eac3a536e2754"); response = client.getAcsResponse(request); System.out.println("playAuth:"+response.getPlayAuth()); }
双击即可复制，末尾还有一个等于号。
好了书写我们的页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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>
</head>
<body>
<div class="prism-player" id="J_prismPlayer"></div>
<script>
var player = new Aliplayer({
id: 'J_prismPlayer',
'100%',
autoplay: false,
cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png',
//播放配置
encryptType:'1',//如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项
vid : '00072df35c2748069f3eac3a536e2754',
playauth : 'eyJTZWN1cml0eVRva2VuIjoiQ0FJUzN3SjFxNkZ0NUIyeWZTaklyNURhZWNMZ2w1bGp3L1dLYjFMd25FRVJWcjFCamFmcWhUejJJSHBLZVhkdUFlQVhzL28wbW1oWjcvWVlsck1xRk1ZZEhCT2NOWk12dnNVT3JWMzlKcExGc3QySjZyOEpqc1VVK040Ty9GaXBzdlhKYXNEVkVma3VFNVhFTWlJNS8wMGU2TC8rY2lyWVhEN0JHSmFWaUpsaFE4MEtWdzJqRjFSdkQ4dFhJUTBRazYxOUszemRaOW1nTGlidWkzdnhDa1J2MkhCaWptOHR4cW1qL015UTV4MzFpMXYweStCM3dZSHRPY3FjYThCOU1ZMVdUc3Uxdm9oemFyR1Q2Q3BaK2psTStxQVU2cWxZNG1YcnM5cUhFa0ZOd0JpWFNaMjJsT2RpTndoa2ZLTTNOcmRacGZ6bjc1MUN0L2ZVaXA3OHhtUW1YNGdYY1Z5R0ZOLzducFNVUmJ2M2I0eGxMZXVrQVJtWGpJRFRiS3VTbWhnL2ZIY1dPRGxOZjljY01YSnFBWFF1TUdxQWRQTDVwZ2lhTTFyOUVQYmRnZmhtaTRBSjVsSHA3TWVNR1YrRGVMeVF5aDBFSWFVN2EwNDR4ckRoRzVnS3NNUWFnQUdzMDRDMVpySFlIb05KNWxlNTFYVUhVdC9tei9XZ0twSVdqQkdNUW4wZVY0eHp4SnZidUJNYVIvWCtOcXpyQTBwUGJTNU1ZZnZUM3Vyb1M3NEhJTlJwNnRSM3VHcWVxOGgvNDVKTVVWcVNGdzZzd2x5SXYvZ05yU1M0amJsSld4YXRQOStqZmxKdWlSKzlOVjl0OHhYRlgyeitEMWRIVE1NRnNvTGxoZkRGbmc9PSIsIkF1dGhJbmZvIjoie1wiQ0lcIjpcIk5qVVI1cXg5djlzaFZQbVFlMG4zV21qWk5SVDdkSm9BRkNtbkVOdEw5T1l6QVN6SmNUODBUWXpQM2F4MzR6eENcXHJcXG5cIixcIkNhbGxlclwiOlwiTUtzVFgyTm0wYW9WWXhNOW9URmwvWTNoaFE3WTZobkFWNlBuRUpzWHk4ND1cXHJcXG5cIixcIkV4cGlyZVRpbWVcIjpcIjIwMjAtMDUtMTBUMTI6MTQ6MzJaXCIsXCJNZWRpYUlkXCI6XCIwMDA3MmRmMzVjMjc0ODA2OWYzZWFjM2E1MzZlMjc1NFwiLFwiU2lnbmF0dXJlXCI6XCJWK1RRQ08wOStydlJWb0RrWnFCQUN1UGh5TFU9XCJ9IiwiVmlkZW9NZXRhIjp7IlN0YXR1cyI6Ik5vcm1hbCIsIlZpZGVvSWQiOiIwMDA3MmRmMzVjMjc0ODA2OWYzZWFjM2E1MzZlMjc1NCIsIlRpdGxlIjoiNiAtIFdoYXQgSWYgSSBXYW50IHRvIE1vdmUgRmFzdGVyIiwiQ292ZXJVUkwiOiJodHRwOi8vb3V0aW4tYTIwNGZlMzg4ZTA4MTFlYWIwZmIwMDE2M2UxYzkyNTYub3NzLWNuLXNoYW5naGFpLmFsaXl1bmNzLmNvbS8wMDA3MmRmMzVjMjc0ODA2OWYzZWFjM2E1MzZlMjc1NC9zbmFwc2hvdHMvZjA4NTc0NWYzM2E3NDFhNjkwMjdmZWVlNzY5YTc1NmUtMDAwMDEuanBnP0V4cGlyZXM9MTU4OTExNjM3MiZPU1NBY2Nlc3NLZXlJZD1MVEFJd2tLU0xjVWZJMnU0JlNpZ25hdHVyZT1kS2pCQTFoUGVOc1NocjZ5enNUeldVcFV5OTAlM0QiLCJEdXJhdGlvbiI6MTYuMjc2N30sIkFjY2Vzc0tleUlkIjoiU1RTLk5TbzJ4VHpGQnQ3YW10QXhBRFoybWJiQWciLCJBY2Nlc3NLZXlTZWNyZXQiOiI4M1ZNWlh6VkVldHpUcEt2WGhWM2ZiTGIxMTNyN0tGdFhINERMZ3c0Mm10biIsIlJlZ2lvbiI6ImNuLXNoYW5naGFpIiwiQ3VzdG9tZXJJZCI6MTcxMDE3MDAwNzg5MTQ2NH0=',
},function(player){
console.log('播放器创建好了。')
});
</script>
</body>
</html>
他这个码应该是只可以用一次
2、整合后端
我们就把之前的代码更改一下写在controller里
//获得视频凭证 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; } //1 根据视频iD获取视频播放凭证 @GetMapping("getPlayAuth/{videoId}") public R getPlayAuth(String videoId) throws Exception{ DefaultAcsClient client=initVodClient("LTAI4G6wT9rRbhacy6YBj9Lt","04jdcJDdAgEJWD0pqLyf4smnW0Xou7"); GetVideoPlayAuthRequest request = new GetVideoPlayAuthRequest(); GetVideoPlayAuthResponse response = new GetVideoPlayAuthResponse(); request.setVideoId(videoId); response = client.getAcsResponse(request); String Auth=response.getPlayAuth(); return R.OK().data("Auth",Auth); }
swagger测试
3、整合前端
1、更改跳转地址
2、书写页面布局
因为播放器的布局和其他页面的基本布局不一致，因此创建新的布局容器 layouts/video.vue
<template> <div class="guli-player"> <div class="head"> <a href="#" title="谷粒学院"> <img class="logo" src="~/assets/img/logo.png" lt="谷粒学院"> </a></div> <div class="body"> <div class="content"><nuxt/></div> </div> </div> </template> <script> export default {} </script> <style> html,body{ height:100%; } </style> <style scoped> .head { height: 50px; position: absolute; top: 0; left: 0; 100%; } .head .logo{ height: 50px; margin-left: 10px; } .body { position: absolute; top: 50px; left: 0; right: 0; bottom: 0; overflow: hidden; } </style>
3、创建api
创建api模块 api/vod.js，从后端获取播放凭证
import request from '@/utils/request' export default { getPlayAuth(vid) { return request({ url: `/eduvod/video/getPlayAuth/${vid}`, method: 'get' }) } }
4、书写页面
<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 vod.getPlayAuth(params.vid).then(response => {
// console.log(response.data.data)
return {
vid: params.vid,
playAuth: response.data.data.Auth
}
})
},
mounted() {
new Aliplayer({
id: 'J_prismPlayer',
vid: this.vid, // 视频id
playauth: this.playAuth, // 播放凭证
encryptType: '1', // 如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项
'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>
测试：
这里出了个问题就是我们的前端传id时没有值
我们来到后端发现实体类中没有声明这个视频id
然后再看看方法需不需要改
因为我们用的BeanUtils的复制方法所以就不需要更改别的东西了。
还有个问题就是没有加注解PathVirable
最终效果：
