关于阿里云播放器

最新推荐文章于 2022-12-26 16:16:33 发布

weixin_34254823

最新推荐文章于 2022-12-26 16:16:33 发布

阅读量663

点赞数

文章标签：移动开发 python

原文链接：https://my.oschina.net/u/3549294/blog/3047131

版权

2019独角兽企业重金招聘Python工程师标准>>>

阿里播放器文档地址：https://help.aliyun.com/document_detail/62941.html?spm=a2c4g.11186623.2.24.6bed1c4ch1wxhu#h2-u9519u8BEFu4EE3u78014

需加载文件：

1.阿里视频

阿里云默认vid方式切换高清度失败可自动切回，source方式不会自动切回

源码：

 var player = new Aliplayer({
        "id": "J_prismPlayer",
        "vid": VideoId,
        "playauth": PlayAuth,
        "qualitySort": "asc",
        "format": "m3u8",
        "mediaType": "video",
        "width": "100%",
        "height": playerheight,
        "autoplay": true,
        "isLive": false,
        "cover": CoverURL,
        "rePlay": false,
        "playsinline": true,
        "preload": true,
        "controlBarVisibility": "hover",
        "useH5Prism": true,
        "skinLayout": [{
                "name": "bigPlayButton",
                "align": "blabs",
                "x": 30,
                "y": 80
            },
            {
                "name": "H5Loading",
                "align": "cc"
            },
            {
                "name": "errorDisplay",
                "align": "tlabs",
                "x": 0,
                "y": 0
            },
            {
                "name": "infoDisplay"
            },
            {
                "name": "tooltip",
                "align": "blabs",
                "x": 0,
                "y": 56
            },
            {
                "name": "thumbnail"
            },
            {
                "name": "controlBar",
                "align": "blabs",
                "x": 0,
                "y": 0,
                "children": [{
                        "name": "progress",
                        "align": "blabs",
                        "x": 0,
                        "y": 44
                    },
                    {
                        "name": "playButton",
                        "align": "tl",
                        "x": 15,
                        "y": 12
                    },
                    {
                        "name": "timeDisplay",
                        "align": "tl",
                        "x": 10,
                        "y": 7
                    },
                    {
                        "name": "fullScreenButton",
                        "align": "tr",
                        "x": 10,
                        "y": 12
                    },
                    {
                        "name": "setting",
                        "align": "tr",
                        "x": 15,
                        "y": 12
                    },
                    {
                        "name": "volume",
                        "align": "tr",
                        "x": 5,
                        "y": 10
                    }
                ]
            }
        ]
    }, function(player) {
        player._switchLevel = 0;
        console.log("播放器创建了。");
    });
    player.on('ready', function(e) {
        player.play();
    });




    //播放器快捷键
    $(window).keydown(function(e) {
        e == e || Window.event;
        var Code = e.keyCode || e.which || e.charCode;
        if (Code == "32") { //空格键(暂停，播放)
            e.preventDefault();
            var videoplay = $('input[name="videoplay"]').val(); //定义一个隐藏域 来区分播放状态
            if (videoplay == 0) {
                player.pause();
                $('input[name="videoplay"]').val(1);
            } else {
                player.play();
                $('input[name="videoplay"]').val(0);
            }
        } else if (Code == "37") { //左箭头（后退）
            var videotimes = player.getDuration();
            var playnum = player.getCurrentTime();
            playnum = parseInt(playnum - 10);
            if (playnum <= (videotimes - 30)) {
                player.seek(playnum);
            }
        } else if (Code == "39") { //right（快进）
            var videotimes = player.getDuration();
            var playnum = player.getCurrentTime();
            playnum = parseInt(playnum + 10);
            if (playnum <= (videotimes + 30)) {
                player.seek(playnum);
            }
        } else if (Code == "38") { //up(音量+)
            e.preventDefault();
            var nowvioce = player.getVolume();
            if (nowvioce >= 1) {
                player.setVolume(1);
            } else {
                player.setVolume(nowvioce + 0.05);
            }
        } else if (Code == "40") { //down（音量-）
            e.preventDefault();
            var nowvioce = player.getVolume();
            if (nowvioce <= 0) {
                player.setVolume(0);
            } else {
                player.setVolume(nowvioce - 0.05);
            }
        }
    });

2.关于直播时切换清晰度的坑。

此时播放方式为source，官网的值为：'{“HD”:”address1”,”SD”:”address2”}’,即，每个清晰度对应相应的地址，

切换失败，不会自动切回，需要判断失败，此时，需要找到原来正确的播放画质，发现，存在cookie里，selectedStreamLevel，

。。鄙人的代码：

  player.on('error', function(e) {
        var getStatus = player.getStatus();
        if (getStatus == 'error') {
            setCookie('selectedStreamLevel', 'LD', 365);
        }
    });

可能两层判断有点多余哈，大致意思是，当播放失败时，切回默认的'标清'画质。此时，大部分浏览器会重新播放，but，，safari不行，，需要你手动点击刷新按钮，，safari这里暂时不知道如何处理。

另外：判断浏览器是否可以自动播放代码

   player.on('autoplay', function(data) {
        if (data.paramData) //可以自动播放
        {
            console.log('可以自动播放');
            // console.log(data) //隐藏提示
        } else //不可以自动播放
        {
            layer.msg('当前浏览器不可自动播放，请点击左下角播放按钮开始播放')
            //显示提示用户点击播放
        }

    });

转载于:https://my.oschina.net/u/3549294/blog/3047131