最近在做直播,用得阿里的地址推流,然后PC 端播放器的接口文档写的,反正我是看不懂, 各种猜测,各种实验,
方便小白们研究脱坑
我先写我的代码 然后加备注
截至 6.4日我这边写了
快捷键 【 空格暂停播放,快进/快退 音量大小】
截图【事件自己写】 【还不知道直播能不能截图】
官方简介
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.onkeydown=function(e){ var keyNum=window.event ? e.keyCode :e.which; return keyNum; }; } player.on("ended", endedHandle()); //播放器快捷键 document.onkeydown=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); });