skinLayout属性的配置的是video的controls
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge" >
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
<title>Aliplayer Functions</title>
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.3/skins/default/aliplayer-min.css" />
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-min.js"></script>
<script charset="utf-8" src="https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js"></script>
</head>
<body>
<div class="prism-player" id="player-con"></div>
<button onclick="playVideo()">播放</button>
<button onclick="stopVideo()">暂停</button>
<button onclick="disposeVideo()">播放器销毁</button>
<script>
var player = new Aliplayer({
"id": "player-con",
"source": JSON.stringify({
"高清":"http://vfile.9mededu.com/met_video/1280P/20210401160640.mp4",
"标清":"http://vfile.9mededu.com/met_video/720P/20210401160640.mp4",
"极速": "http://vfile.9mededu.com/met_video/480P/20210401160640.mp4"
}),
"width": "100%",
"height": "500px",
"autoplay": true,
"isLive": false,
"rePlay": false,
"playsinline": true,
"preload": true,
"controlBarVisibility": "hover",
"useH5Prism": true,
"skinLayout": [
{
"name": "H5Loading",
"align": "cc"
},
{
"name": "errorDisplay",
"align": "tlabs",
"x": 0,
"y": 0
},
{
"name": "infoDisplay"
},
{
"name": "tooltip",
"align": "blabs",
"x": 0,
"y": 56
},
{
"name": "thumbnail"
},
{
"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": 12
},
{
"name": "setting",
"align": "tr",
"x": 15,
"y": 12
},
{
"name": "volume",
"align": "tr",
"x": 5,
"y": 10
}
]
}
],
"components": [{
name: 'QualityComponent', // 清晰度组件
type: AliPlayerComponent.QualityComponent
}]
}, function (player) {
// player.seek(10) // 跳转到某个时刻进行播放，time的单位为秒
player.play()
player.on('sourceloaded', function(params) { // 切换清晰度
var paramData = params.paramData
var desc = paramData.desc
var definition = paramData.definition
player.getComponent('QualityComponent').setCurrentQuality(desc, definition)
})
});
let stopVideo = () => {
if(player) player.pause() // 暂停
}
let playVideo = () => {
if(player) player.play() // 播放
}
let disposeVideo = () => {
if(player) player.dispose() // 播放器销毁
}
</script>
<style>
.prism-player .prism-liveshift-progress .prism-progress-played, .prism-player .prism-progress .prism-progress-played{
background-color: #fff !important;
}
.prism-player .prism-liveshift-progress .prism-progress-loaded, .prism-player .prism-progress .prism-progress-loaded{
background-color: #b1b1b1 !important;
}
.quality-list li.current{
color: #3DAAFF !important;
}
</style>
</body>