直接上代码:
<!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.2/skins/default/aliplayer-min.css" />
</head>
<body>
<div class="prism-player" id="J_prismPlayer"></div>
<script charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"></script>
<!-- 阿里云视频播放器组件 -->
<script charset="utf-8" src="https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js"></script>
<script>
/* 弹幕组件集成了 CommentCoreLibrary 框架, 更多 Api 请查看文档 https://github.com/jabbany/CommentCoreLibrary/ */
var danmukuList = [{
"mode": 1,
"text": "哈哈",
"stime": 1000,
"size": 25,
"color": 0xffffff
}, {
"mode": 1,
"text": "前方高能",
"stime": 2000,
"size": 25,
"color": 0xff0000
}, {
"mode": 1,
"text": "灵魂歌手",
"stime": 30000,
"size": 25,
"color": 0xff0000
}, {
"mode": 1,
"text": "顺手一划",
"stime": 10000,
"size": 25,
"color": 0x00c1de
}]
var player = new Aliplayer({
id: 'J_prismPlayer',
width: '100%',
//播放配置
//方式一:单一数据源的非加密视频
//支持播放地址播放,此播放优先级最高,此种方式不能播放加密视频
source : 'https://outin-49af16d3c60911edbbf700163e1a65b6.oss-cn-shanghai.aliyuncs.com/sv/53bd40eb-186fa2f7b6f/53bd40eb-186fa2f7b6f.mp4?Expires=1679242073&OSSAccessKeyId=LTAIVVfYx6D0HeL2&Signature=u9NEb5vXVHEvobsO3Px3b0VxoE4%3D',
cover: 'https://movie-dyb.oss-cn-nanjing.aliyuncs.com/user.jpg',
//播放方式二:加密视频和多数据源视频的播放
// vid : '43d6225f1e844bdcadf6f042580614a6',
// playauth : 'eyJTZWN1cml0eVRva2VuIjoiQ0FJUzN3SjFxNkZ0NUIyeWZTaklyNWVNR3ZHRmdKY1M0SmFvVDFMY2lVUStPTm9kbUpXZm16ejJJSGxQZTNGaEFPb2V2L2svbVc5VTdmb2Nsck1xRnNjYkh4T2ZOSlV2c2NzT3ExdjRKcExGc3QySjZyOEpqc1V3d04wcStWaXBzdlhKYXNEVkVma3VFNVhFTWlJNS8wMGU2TC8rY2lyWVhEN0JHSmFWaUpsaFE4MEtWdzJqRjFSdkQ4dFhJUTBRazYxOUszemRaOW1nTGlidWkzdnhDa1J2MkhCaWptOHR4cW1qL015UTV4MzFpMXYweStCM3dZSHRPY3FjYThCOU1ZMVdUc3Uxdm9oemFyR1Q2Q3BaK2psTStxQVU2cWxZNG1YcnM5cUhFa0ZOd0JpWFNaMjJsT2RpTndoa2ZLTTNOcmRacGZ6bjc1MUN0L2ZVaXA3OHhtUW1YNGdYY1Z5R0d0RHhrWk9aUXJ6emJZNWhLK2lnQVJtWGpJRFRiS3VTbWhnL2ZIY1dPRGxOZjljY01YSnFBWFF1TUdxRGNmRC9xUW1RT2xiK0cvWGFqUHBxajRBSjVsSHA3TWVNR1YrRGVMeVF5aDBFSWFVN2EwNDRxTDZvYnQ4WG1zUWFnQUY2T0FPT1FkRlNWS01DTEljblJhZk9UREZqRERPYXdzR0NKSlhHVFk5WlM0QUlzcEFtKzZxSmZzY3ZYQnJoOWFsdDBrYzlaTGFpVFRSL3gySXl2bkxKckxqTEZpYW9nWXhYN0M1YWhwdGNsZjFhNWZhU2Z2eUxoNmg3Ym11Ym5UWCthZENNdWJlNUJTZUNJYkJwRk5IcW5LTE1vaFhSQjRRc1ZST2RMTnRZTGc9PSIsIkF1dGhJbmZvIjoie1wiQ0lcIjpcIlY0NzlwVXArSkppc3NpeWNBL0NkSkZmTTc2b3JGRER0UForamxBaWNWbGs5eVJQMGtWS1BXcmlMenhKbkZuTDVJMWJlU1VaSHhJdURcXHJcXG5LSUpWbGZybUM4MXhwcDB2b2krQ0J3R1E1enlSV2dVPVxcclxcblwiLFwiQ2FsbGVyXCI6XCJkV05yWkZsTTJaVGRWTnhhQU9qbG5XWTZSSXB2U01GL0p6ZGk1N0hKaGhFPVxcclxcblwiLFwiRXhwaXJlVGltZVwiOlwiMjAyMC0wNC0yNFQwMjoyODowNlpcIixcIk1lZGlhSWRcIjpcIjQzZDYyMjVmMWU4NDRiZGNhZGY2ZjA0MjU4MDYxNGE2XCIsXCJQbGF5RG9tYWluXCI6XCJ2aWRlby5ndWxpLnNob3BcIixcIlNpZ25hdHVyZVwiOlwidGpBcGNudkYzZ0kzdjg3L1M0QURKZTF5SVhrPVwifSIsIlZpZGVvTWV0YSI6eyJTdGF0dXMiOiJOb3JtYWwiLCJWaWRlb0lkIjoiNDNkNjIyNWYxZTg0NGJkY2FkZjZmMDQyNTgwNjE0YTYiLCJUaXRsZSI6IuesrOWFq+mbhiIsIkNvdmVyVVJMIjoiaHR0cDovL3ZpZGVvLmd1bGkuc2hvcC80M2Q2MjI1ZjFlODQ0YmRjYWRmNmYwNDI1ODA2MTRhNi9zbmFwc2hvdHMvMzlhYjRlOWIyNmZmNDU5YTkyNmUwMzRjN2E2YmE0YjctMDAwMDQuanBnIiwiRHVyYXRpb24iOjY0LjQxMTd9LCJBY2Nlc3NLZXlJZCI6IlNUUy5OVDlRSzFtSDNXVENNdG1tRGs0VTF3UDR5IiwiUGxheURvbWFpbiI6InZpZGVvLmd1bGkuc2hvcCIsIkFjY2Vzc0tleVNlY3JldCI6IkdKaEdNdUR3TUxpRnBwVThXSzk0dFdUcXhKNGNycGdSQmNibWFCTkVOdXhjIiwiUmVnaW9uIjoiY24tc2hhbmdoYWkiLCJDdXN0b21lcklkIjoxNTA2MjczMTY3NzcxMjAxfQ==',
// encryptType:1, //当播放私有加密流时需要设置。
components: [{
name: 'BulletScreenComponent', // 跑马灯组件
type: AliPlayerComponent.BulletScreenComponent,
/** 跑马灯组件三个参数 text, style, bulletPosition
* text: 跑马灯文字内容
* style: 跑马灯样式
* bulletPosition: 跑马灯位置, 可选的值为 'top' (顶部), 'bottom' (底部), 'random' (随机), 不传值默认为 'random'
*/
args: ['欢迎Tom来到谷粒学院', { fontSize: '20px', color: '#FFFFFF' }, 'random']
},
{
name: 'AliplayerDanmuComponent', // 弹幕组件
type: AliPlayerComponent.AliplayerDanmuComponent,
args: [danmukuList]
},
{
name: 'RotateMirrorComponent',
type: AliPlayerComponent.RotateMirrorComponent
}]
},function(player){
console.log('播放器创建好了。')
})
</script>
</body>
</html>
效果如下:
如果是vue页面,则把弹幕列表参数放到data中,使用this调用如下 :
const app = new Vue({
el: '#app',
data: {
categoryList: [],
movie: {},//接收影视详情
danmukuList:[{
"mode": 1,
"text": "哈哈",
"stime": 1000,
"size": 25,
"color": 0xffffff
}, {
"mode": 1,
"text": "前方高能",
"stime": 2000,
"size": 25,
"color": 0xff0000
}, {
"mode": 1,
"text": "灵魂歌手",
"stime": 30000,
"size": 25,
"color": 0xff0000
}, {
"mode": 1,
"text": "顺手一划",
"stime": 10000,
"size": 25,
"color": 0x00c1de
}]
},
methods: {
//查询影视详情
findMovieDetailById(movieId) {
axios.get('/portal/movie/findById?id=' + movieId).then(resp => {
this.movie = resp.data;
let player = new Aliplayer({
id: 'J_prismPlayer',
width: '100%',
height: '500px',
autoplay: false,
controlBarVisibility: 'hover',
isLive: false,
components: [{
name: 'MemoryPlayComponent',
type: AliPlayerComponent.MemoryPlayComponent,
args: [false, getTime, saveTime]
},
{
name: 'AliplayerDanmuComponent', // 弹幕组件
type: AliPlayerComponent.AliplayerDanmuComponent,
args: [this.danmukuList]
},],
cover: this.movie.image,//图片
vid: this.movie.playId,//视频id
playauth: this.movie.playAuth,//视频播放秘钥
encryptType: 1, //是否加密播放
}, function (player) {
console.log('播放器创建好了。')
});
})
},
},
})