1. 在页面中引入css,js文件,当时最新版本是2.8.2
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"></script>
2. 定义一个播放器容器
<div class="prism-player" id="myPlayer"></div>
3. 初始化Web播放器
其中source,cover是事先定义好的变量,及播放url和封面图
var player = new Aliplayer({
"id": "myPlayer", //播放器外层容器的dom元素id
"source":source, //视频播放地址url
"width": "100%",
"height": "300px",
"autoplay": false,
"isLive": false,
"cover": cover, //播放器默认封面图片,需要autoplay为’false’时,才生效
"rePlay": false,
"playsinline": true,
"preload": true,
"language": "zh-cn",
"controlBarVisibility": "hover",
"useH5Prism": true, //指定使用H5播放器
"skinLayout": [
{
"name": "bigPlayButton",
"align": "cc",
"x": 30,
"y": 80
},
{
"name": "errorDisplay",
"align": "tlabs",
"x": 0,
"y": 0
},
{
"name": "infoDisplay"
},
{
"name": "controlBar",
"align": "blabs",
"x": 0,
"y": 0,
"children": [
{name: "progress", align: "blabs", x: 0, y: 44}, //播放进度条
{name: "playButton", align: "tl", x: 15, y: 12}, //播放开始暂停按钮
{name: "timeDisplay", align: "tl", x: 10, y: 7}, //播放视频时间
{
"name": "fullScreenButton", //全屏按钮
"align": "tr",
"x": 10,
"y": 10
},
{
"name": "volume", //音量
"align": "tr",
"x": 5,
"y": 10
}
]
}
],
}, function (player) {
console.log("The player is created");
}
);