使用阿里Web播放器aliPlayer，自定义清晰度切换
时间：2023-05-05 16:30:20 阅读：244237 作者：1811
<!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" rel="external nofollow" 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>
版权声明：该文观点仅代表作者本人。处理文章：请发送邮件至 三1五14八八95#扣扣.com 举报，一经查实，本站将立刻删除。