阿里播放器文档地址:https://help.aliyun.com/document_detail/62941.html?spm=a2c4g.11186623.2.24.6bed1c4ch1wxhu#h2-u9519u8BEFu4EE3u78014css
需加载文件:html
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.0/skins/default/aliplayer-min.css">浏览器
<script charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.0/aliplayer-h5-min.js"></script>cookie
阿里云默认vid方式切换高清度失败可自动切回,source方式不会自动切回ide
源码:阿里云
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.关于直播时切换清晰度的坑。spa
此时播放方式为source,官网的值为:'{“HD”:”address1”,”SD”:”address2”}’,即,每一个清晰度对应相应的地址,code
切换失败,不会自动切回,须要判断失败,此时,须要找到原来正确的播放画质,发现,存在cookie里,selectedStreamLevel,orm
。。鄙人的代码:cdn
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('当前浏览器不可自动播放,请点击左下角播放按钮开始播放') //显示提示用户点击播放 } });