直播商城系統原始碼，播放器aliPlayer自定義清晰度切換
<!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="
    <script type="text/javascript" charset="utf-8"
        src="
    <script src="
    <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自定義清晰度切換，更多內容歡迎關注之後的文章
直播商城系統原始碼，播放器aliPlayer自定義清晰度切換

相關文章
