最近在做直播，用得阿里的地址推流，然後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.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);
    });

//這裡是 自定義倍數的  先建立播放器後才會生效
player.serseep(倍數數值)