阿里云播放器Aliplayer-WEB走坑中

最近在做直播，用得阿里的地址推流，然后PC 端播放器的接口文档写的，反正我是看不懂，各种猜测，各种实验，

方便小白们研究脱坑

我先写我的代码然后加备注

截至 6.4日我这边写了

快捷键【空格暂停播放，快进/快退音量大小】

截图【事件自己写】【还不知道直播能不能截图，因为直播用的是falsh播放器暂时没发现能截图的操作，有大佬会的欢迎指点】

自定义倍数【自己设置把】

阿里的播放器接口文档

都是需要

 var player=new Aliplayer({}）； //创建播放器之后用的，里面所有的操作都是 player.XXXXXX 这样

官方简介

https://help.aliyun.com/document_detail/51991.html?spm=5176.doc51991.6.698.OHeEbs

官方接口说明

https://help.aliyun.com/document_detail/62941.html?spm=a2c4g.11186623.6.713.Q0wYfV

官方简单生成播放器

https://player.alicdn.com/aliplayer/setting/setting.html

<link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css" /><script charset="utf-8" type="text/javascript" src="//g.alicdn.com/de/prismplayer/2.6.0/aliplayer-min.js"></script>

这是必须引入的

 var  playbackurl = 播放地址     var playvideosnum = 0;    $('[data-role="play-0"]').addClass("active");    var player = new Aliplayer({            id: "J_prismPlayer",            autoplay: true,//是否自动播放            playsinline:true,//H5是否内置播放            useH5Prism:true,//强制H5播放器            isLive:false,//是不是直播            preload:true,//播放器自动加载            snapshot:true,//falsh启用截图            width:"100%",            height:"100%",            controlBarVisibility:"always",//控制面板的实现 ‘click’ 点击出现、‘hover’ 浮动出现、‘always’ 一直在             source:JSON.stringify(playbackurl), //这里 记住一定是JSON字符串类型 播放地址  如果有好几种格式 {'LD':556464,'HD':4564} 只有标准格式才能切换清晰度               extraInfo:{ //定制型接口参数                crossOrigin:"anonymous"            },            skinLayout:[ //按钮UI   给一部分 其余自己试                {"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":"volume","align":"tr","x":10,"y":10},//声音                        {"name":"fullScreenButton","align":"tr","x":10,"y":10},                        {"name":"timeDisplay","align":"tl","x":10,"y":7},                        {"name":"snapshot","align":"tr","x":10,"y":10},//截图                        {"name":"speedButton","align":"tr","x":10,"y":10},//倍数 {这个可以自定义 但是怎么调我一直搞不懂 会的可以帮我补充一下}                        {"name":"streamButton","align":"tr",'x':0,'y':10},//截图                        ]},                {"name":"fullControlBar","align":"tlabs","x":0,"y":0,"children":[{"name":"fullTitle","align":"tl","x":25,"y":6},                        {"name":"fullNormalScreenButton","align":"tr","x":24,"y":13},                        {"name":"fullTimeDisplay","align":"tr","x":10,"y":12},                        {"name":"fullZoom","align":"cc"},                        ]},                {"name":"errorDisplay","align":"tlabs","x":0,"y":0},                {"name":"H5Loading","align":"cc"},                {"name":"infoDisplay","align":"cc"},//显示信息            ]},function(player){             console.log("播放器创建了。");        }    );

然后我在这里写点播放事件

  function getkeyval(){ //绑定按钮事件        document.οnkeydοwn=function(e){            var keyNum=window.event ? e.keyCode :e.which;            return keyNum;        };    }    player.on("ended", endedHandle());    //播放器快捷键    document.οnkeydοwn=function(e){        var keyNum=window.event ? e.keyCode :e.which;//空格暂停播放        if(keyNum=='32'){         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(keyNum=='37'){//快进           var videotimes =  player.getDuration();           var playnum =  player.getCurrentTime();           playnum =parseInt(playnum-10);           if(playnum<=(videotimes-30)){               player.seek(playnum);           }        }else if(keyNum=='39'){//快进/快退/声音大小调节 我是用方向键来操作的var videotimes = player.getDuration(); var playnum = player.getCurrentTime(); playnum =parseInt(playnum +10); if(playnum>15){ player.seek(playnum); }else{ player.seek(0); } }else if(keyNum=='38'){ //音量大小 //获得当前音量 var volume =parseInt(player.getVolume()*100); if(volume<100){ volume = (volume+1)/100; player.setVolume(volume); }else{ } }else if(keyNum=='40'){ var volume =parseInt(player.getVolume()*100); if(volume>0){ volume = (volume-1)/100; player.setVolume(volume); } } };// 截图    player.on("snapshoted", function(data) {        console.log(data.paramData.time);        console.log(data.paramData.base64);        console.log(data.paramData.binary);    });//这里是 自定义倍数的  先创建播放器后才会生效player.serseep(倍数数值)

阿里云播放器Aliplayer-WEB走坑中相关推荐

阿里云播放器SDK的正确打开方式 | Aliplayer Web播放器介绍及功能实现(三)
阿里云播放器SDK(ApsaraVideo for Player SDK)是阿里视频云端到云到端服务的重要一环,除了支持点播和直播的基础播放功能外,还深度融合视频云业务,支持视频的加密播放.安全下载. ...
nuxt项目打包后阿里云播放器错误：ReferenceError Aliplayer is not defined
nuxt项目打包后阿里云播放器错误:ReferenceError: Aliplayer is not defined 这个问题搞了我一天,阿里云视频播放有时点进去是好的,有时候就报错,而且一刷新也报这 ...
关于，VUE中，阿里云播放器报错：Aliplayer is not defined。
VUE中,阿里云播放器报错:Aliplayer is not defined.-Java-CSDN问答感谢@iMingzhen大哥的解答!
h5阿里云播放器常规使用
阿里云播放器: 引入js和css <script type="text/javascript" charset="utf-8" src="htt ...
阿里云播放器AliyunPlayer的走马灯组件的位置
引入当前组件, 播放器配置中添加如下代码: components: [{name: 'BulletScreenComponent',type: AliPlayerComponent.BulletScr ...
在vue项目中使用阿里云播放器
在官方文档中分为HTML5和Flash两种播放模式我用的是html5的播放模式,下面是阿里云官方文档阿里云播放器的使用说明_视频点播-阿里云帮助中心首先在index.html文件中引入 <l ...
Swift 第三方播放器AliyunPlayer,音乐(阿里云播放器)(源码)
一直觉得自己写的不是技术,而是情怀,一个个的教程是自己这一路走来的痕迹.靠专业技能的成功是最具可复制性的,希望我的这条路能让你们少走弯路,希望我能帮你们抹去知识的蒙尘,希望我能帮你们理清知识的脉络,希 ...
解决ijkplayer和阿里云播放器冲突的解决
ijkplayer和阿里云播放器的冲突问题解决今天遇到导入阿里云的播放器跟自身的ijkplayer播放器产生冲突的问题 ijkplayer 报错 IJKSDLGLView: setupDisplay ...
腾讯迁移至阿里云播放器
目前APP中视频模块使用了腾讯及阿里两套播放器,造成维护困难.包体增大.恰逢开谈项目下线决定进行播放器业务迁移. 首先需要熟悉一下各个播放器的使用方法以及业务中的应用场景.涉及的模块包括直播拉流.直播 ...
苹果CMS V10 整合阿里云播放器-带记忆播放
这篇整合教程加了阿里播放器的记忆功能,去除了弹幕,资源预加载等功能. 有人会说,我用ck .dp不好吗?为啥要用aliplayer,阿里播放器的记忆功能很给力,比如手机播放页面在后台放了很久,隔了几天 ...

阿里云播放器Aliplayer-WEB走坑中

阿里的播放器接口文档

阿里云播放器Aliplayer-WEB走坑中相关推荐

最新文章

热门文章

阿里云播放器Aliplayer-WEB走坑中

阿里的 播放器接口 文档

阿里云播放器Aliplayer-WEB走坑中相关推荐

最新文章

热门文章

阿里的播放器接口文档