哈尔滨网站设计公司好,自动发布 wordpress,以下选项中排序正确的是,wordpress嵌入哔哩哔哩视频官方文档#xff1a;Web播放器SDK常见问题_视频点播(VOD)-阿里云帮助中心
bug#xff1a;播流的不稳定#xff0c;直播总会进入 onM3u8Retry 监听#xff0c;用户端就会黑屏#xff0c;#xff08;但其实并没有关播#xff0c;正常关播进入的是pause这个监听#xff0…官方文档Web播放器SDK常见问题_视频点播(VOD)-阿里云帮助中心
bug播流的不稳定直播总会进入 onM3u8Retry 监听用户端就会黑屏但其实并没有关播正常关播进入的是pause这个监听目前没有解决。想到的方案是一旦进入这个监听就强制重刷页面再次获取直播详情但还没有具体实施。
!-- index.html需要引入的直播文件 --
link relstylesheet hrefhttps://g.alicdn.com/apsara-media-box/imp-web-player/2.26.0/skins/default/aliplayer-min.css /
script typetext/javascript charsetutf-8 srchttps://g.alicdn.com/apsara-media-box/imp-web-player/2.26.0/aliplayer-min.js/script
!-- 微信浏览器自动播放 --
script srchttps://res.wx.qq.com/open/js/jweixin-1.6.0.js/script
divclassfirstContent:style{ height: innerHeight }div classprism-player idplayer-con styleheight: 100%/div
/div
let player ref();
// 判断安卓端 ios端
let isAndroid ref(false);
let isIOS ref(false);
// 这个方法在获取直播详情的接口中 如果正在直播 并且有播流的情况下调用并赋值
function checkPlatform(iosLiveUrl, AndroidLiveUrl) {const userAgent navigator.userAgent || navigator.vendor || window.opera;if (userAgent.match(/iPad/i) ||userAgent.match(/iPhone/i) ||userAgent.match(/iPod/i)) {isIOS.value true;var ua window.navigator.userAgent.toLowerCase();if (ua.match(/micromessenger/i) micromessenger) {// 微信浏览器环境实现在微信浏览器自动播放wx.config({// 配置信息, 即使不正确也能使用 wx.readydebug: false, //false代表关闭调试模式true代表开启调试模式appId: , //appIdtimestamp: 1, //生成签名的时间戳nonceStr: , //生成签名的随机串signature: , //签名jsApiList: [], //需要使用的JS接口列表});wx.ready(function () {// 在此处初始化播放器liveStart(iosLiveUrl);});} else {liveStart(iosLiveUrl);}} else if (userAgent.match(/Android/i)) {isAndroid.value true;liveStart(AndroidLiveUrl);} else {// PC端liveStart(iosLiveUrl);}
}
// 播流URL
function liveStart(liveFlvUrl) {player.value new Aliplayer({id: player-con,source: liveFlvUrl,width: 100%,height: 56vw,// autoplay: true, // 延迟播放isLive: true,rePlay: false,playsinline: true,preload: true,enableStashBufferForFlv: true,stashInitialSizeForFlv: 32,controlBarVisibility: hover,useH5Prism: true,x5LandscapeAsFullScreen: false,enableWorker: false,mute: false,skinLayout: [{ name: bigPlayButton, align: cc }, // 大播放按钮位置调整{ name: infoDisplay, align: brabs, x: -100, y: -100 }, // 设置为静音位置调整],skinLayoutIgnore: [infoDisplay, // 隐藏“设置为静音”信息提示内容],},function (player) {//初始化后手动对视频进行静音处理这样设置之后按音量键也依旧是静音// player.mute();// 这种对直播没效果// player.setVolume(0.5);// 监听播放player.on(play, function () {console.log(视频开始播放);});// 监听暂停player.on(pause, function () {console.log(视频暂停);// 这个方法是获取直播详情 如果直播结束 详情接口会返回liveStatus 2 后面就是具体公司业务处理了getLiveDetail();});player.on(onM3u8Retry, function () {// 总是会莫名其妙到这步 直播没有结束 但是用户看到的是黑屏 刷新页面和重新进入直播间可以解决// 这里我想到的方案是页面强制刷新 没有尝试过 可以试下console.log(主播暂时离开请稍后......);// 这个方法是获取直播详情getLiveDetail();});// 监听结束player.on(ended, function () {console.log(视频播放结束);});// 监听加载中player.on(waiting, function () {console.log(视频加载中);});// 监听播放错误player.on(error, function (e) {console.log(视频播放出错);});});
}
