阿里云直播Web

官方文档：Web播放器SDK常见问题_视频点播(VOD)-阿里云帮助中心

bug：播流的不稳定，直播总会进入 onM3u8Retry 监听，用户端就会黑屏，（但其实并没有关播，正常关播进入的是pause这个监听）目前没有解决。想到的方案是一旦进入这个监听，就强制重刷页面，再次获取直播详情，但还没有具体实施。

<!-- index.html需要引入的直播文件 -->
<link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.26.0/skins/default/aliplayer-min.css" />
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.26.0/aliplayer-min.js"></script>
<!-- 微信浏览器自动播放 -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

<divclass="firstContent":style="{ height: innerHeight }"><div class="prism-player" id="player-con" style="height: 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("视频播放出错");});});
}