阿里的 播放器接口 文档

都是需要

	

		
		

			
			

				
				

					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

引用JS和css（这是必须引入的）

<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.7/skins/default/aliplayer-min.css" />
    <script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.7/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;

  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;

// 截图
    player.on("snapshoted", function(data) {
        console.log(data.paramData.time);
        console.log(data.paramData.base64);
        console.log(data.paramData.binary);
    });

//这里是 自定义倍数的  先创建播放器后才会生效
player.serseep(倍数数值)

原文链接：https://blog.csdn.net/xiao_xiao_meng/article/details/80567724