<!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 {width: 900px !important;height: 400px !important;}.costom-prism-sharpness {width: 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;width: 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>
以上就是直播商城系统源码，播放器aliPlayer自定义清晰度切换， 更多内容欢迎关注之后的文章
支付宝扫一扫
微信扫一扫
.png)
.png)
.png)
