官方文檔：Web播放器SDK常見問題_視頻點播(VOD)-阿里云幫助中心

bug：播流的不穩(wěn)定，直播總會進入?onM3u8Retry 監(jiān)聽，用戶端就會黑屏，（但其實并沒有關(guān)播，正常關(guān)播進入的是pause這個監(jiān)聽）目前沒有解決。想到的方案是一旦進入這個監(jiān)聽，就強制重刷頁面，再次獲取直播詳情，但還沒有具體實施。

<!-- 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);
// 這個方法在獲取直播詳情的接口中 如果正在直播 并且有播流的情況下調(diào)用并賦值
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") {// 微信瀏覽器環(huán)境（實現(xiàn)在微信瀏覽器自動播放）wx.config({// 配置信息, 即使不正確也能使用 wx.readydebug: false, //false代表關(guān)閉調(diào)試模式，true代表開啟調(diào)試模式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" }, // 大播放按鈕位置調(diào)整{ name: "infoDisplay", align: "brabs", x: -100, y: -100 }, // "設(shè)置為靜音"位置調(diào)整],skinLayoutIgnore: ["infoDisplay", // 隱藏“設(shè)置為靜音”信息提示內(nèi)容],},function (player) {//初始化后，手動對視頻進行靜音處理（這樣設(shè)置之后，按音量鍵也依舊是靜音）// player.mute();// 這種對直播沒效果// player.setVolume(0.5);// 監(jiān)聽播放player.on("play", function () {console.log("視頻開始播放");});// 監(jiān)聽暫停player.on("pause", function () {console.log("視頻暫停");// 這個方法是獲取直播詳情 如果直播結(jié)束 詳情接口會返回liveStatus == 2 后面就是具體公司業(yè)務(wù)處理了getLiveDetail();});player.on("onM3u8Retry", function () {// 總是會莫名其妙到這步 直播沒有結(jié)束 但是用戶看到的是黑屏 刷新頁面和重新進入直播間可以解決// 這里我想到的方案是頁面強制刷新 沒有嘗試過 可以試下console.log("主播暫時離開，請稍后......");// 這個方法是獲取直播詳情getLiveDetail();});// 監(jiān)聽結(jié)束player.on("ended", function () {console.log("視頻播放結(jié)束");});// 監(jiān)聽加載中player.on("waiting", function () {console.log("視頻加載中");});// 監(jiān)聽播放錯誤player.on("error", function (e) {console.log("視頻播放出錯");});});
}