使用阿里Web播放器aliPlayer，自定义清晰度切换

最新推荐文章于 2024-08-14 14:05:44 发布

码小白1

最新推荐文章于 2024-08-14 14:05:44 发布

阅读量1.7k

点赞数

分类专栏： js基础

本文链接：https://blog.csdn.net/weixin_41489378/article/details/119643805

版权

阿里Player 视频清晰度用户界面自定义设置 JavaScript

关键词由CSDN通过智能技术生成

js基础专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!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>