阿里云直播Web

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

html 复制代码

<!-- 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>

html 复制代码

<div
 class="firstContent"
 :style="{ height: innerHeight }"
 >
  <div class="prism-player" id="player-con" style="height: 100%"></div>
</div>

javascript 复制代码

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.ready
        debug: false, //false代表关闭调试模式，true代表开启调试模式
        appId: "", //appId
        timestamp: 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("视频播放出错");
      });
    }
  );
}