<!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 Online Settings</title>
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.7/skins/default/aliplayer-min.css" />
<script type="text/javascript" charset="utf-8"
src="https://g.alicdn.com/de/prismplayer/2.9.7/aliplayer-min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.3/jquery.js"></script>
<style>
.prism-player {
900px !important;
height: 400px !important;
}
.costom-prism-sharpness {
80px;
float: right;
position: relative;
user-select: none;
}
.costom-prism-sharpness .selectd-definition {
line-height: 44px;
color: #fff;
text-align: center;
cursor: pointer;
}
.costom-prism-sharpness .definition-list {
display: none;
position: absolute;
bottom: 44px;
80px;
text-align: center;
background-color: rgba(0, 0, 0, 0.6);
}
.costom-prism-sharpness .definition-item {
cursor: pointer;
line-height: 36px;
color: #fff;
}
.costom-prism-sharpness .definition-item:hover {
background: rgba(216, 216, 216, .1)
}
.costom-prism-sharpness .definition-item.active {
color: #409EFF;
}
</style>
</head>
<body>
<div class="prism-player" id="player-con"></div>
<script>
function init() {
var player = new Aliplayer({
"id": "player-con",
"source": "//player.alicdn.com/video/aliyunmedia.mp4",
"width": "100%",
"height": "100%",
"autoplay": true,
"isLive": false,
"rePlay": false,
"playsinline": true,
"preload": true,
"controlBarVisibility": "always",
"useH5Prism": true,
"skinLayout": [
{
"name": "bigPlayButton",
"align": "cc",
},
{
"name": "errorDisplay",
"align": "tlabs",
"x": 0,
"y": 0
},
{
"name": "controlBar",
"align": "blabs",
"x": 0,
"y": 0,
"children": [
{
"name": "fullScreenButton",
"align": "tr",
"x": 10,
"y": 10
},
{
"name": "volume",
"align": "tr",
"x": 5,
"y": 10
},
{ name: "playButton", align: "tl", x: 15, y: 12 },
{ name: "timeDisplay", align: "tl", x: 10, y: 4 },
]
}
]
}, function (player) {
function change(url) {
player.loadByUrl(url)
}
let html = `<div class='costom-prism-sharpness'>
<div class="selectd-definition">高清</div>
<div class="definition-list">
<div class="definition-item" value="1">流畅</div>
<div class="definition-item active" value="2">高清</div>
<div class="definition-item" value="3">高清2</div>
</div>
</div>`
$(html).insertAfter(".prism-volume")
$(function () {
$(".costom-prism-sharpness").click(function () {
$(".definition-list").toggle()
})
$(".definition-item").click(function () {
let text = $(this).text();
let lineId = $(this).attr("value")
$(this).addClass("active").siblings().removeClass("active");
$(".selectd-definition").text(text);
change("//player.alicdn.com/video/aliyunmedia.mp4")
})
})
}
);
}
init()
</script>
</body>