直播商城系统源码，播放器aliPlayer自定义清晰度切换

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