bjquanjiang
/
pinganxiaoyuan

<!DOCTYPE html>
<html style="overflow: hidden;">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <title>Aliplayer Rts Demo</title>
  <link rel="stylesheet"
    href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/skins/default/aliplayer-min.css" />
  <script type="text/javascript" charset="utf-8"
    src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/aliplayer-min.js"></script>
</head>

<body style="margin: 0;">
  <div class="prism-player" id="player-con"></div>
  <script>
    // 使用: /static/rtsPlayer.html?rtsUrl=
    /**
     * 播放器默认播放 source 提供的 rts 拉流地址，如果失败，则会自动降级至 rtsFallbackSource 提供的拉流地址（如 HLS 地址）。
     * 可能的降级场景包括：
     * 1. 浏览器不支持 RTS，直接降级
     * 2. RTS 信令请求失败（拉流地址无效、https配置无效、RTS配置无效等），直接降级
     * 3. RTS 起播超时或中途断流，按自定义策略重试失败后降级
     **/

    // 更多播放器配置请参考 https://player.alicdn.com/aliplayer/index.html
    let rtsUrl = getUrlParams(location.href)['rtsUrl'] || ''
    let height = getUrlParams(location.href)['height'] || "500px"
    var options = {
      "id": "player-con",
      "source": rtsUrl,
      "rtsFallbackSource": "降级地址，如HLS",
      "width": "100%",
      "height": height,
      "autoplay": true,
      "isLive": true,
      "playsinline": true,
      "skipRtsSupportCheck": false, // 对于不在 https://help.aliyun.com/document_detail/397569.html 中的浏览器，可以传 true 跳过检查，强制使用 RTS（有风险，需要自测保证）

      /**
       * RTS 拉流超时会默认重试
       * 以下两个参数用来控制降级之前的重试策略，比如 3000 毫秒超时，重试一次，如果再拉不到流就降级，那么总共等待 6000 毫秒降级
       **/
      // RTS 多久拉不到流会重试，默认 3000 ms
      // rtsLoadDataTimeout: 2000,

      // RTS 拉不到流重试的次数，默认 5，此参数建议设为 1，即重试 1 次后降级，可以减少降级等待时间
      liveRetry: 1,
    };

    var player = new Aliplayer(options, function () {/* player ready */ });
    player.setVolume(0)
    // 降级时会触发此事件
    player.on('rtsFallback', function (event) {
      console.log('[EVENT]rtsFallback', event.paramData);
      // event.paramData.reason 降级的原因
      // event.paramData.fallbackUrl 降级到的地址
    })

    player.on('error', function (event) {
      console.log('[EVENT]error', event.paramData);
    })

    // 当RTS拉流成功时触发，通过订阅该事件，可以获取到RTS TraceId
    player.on('rtsTraceId', function (data) {
      console.log('[EVENT]rtsTraceId', data.paramData);
      let fullscreenBtn = document.querySelector('.prism-controlbar .prism-fullscreen-btn')
      if(fullscreenBtn)fullscreenBtn.style.display = 'none'
      // event.paramData.traceId 拉流的TraceId
      // event.paramData.source 当前RTS流的播放地址
    })


    function getUrlParams(url) {
      const reg = /(\w+)=([^&]+)/g;
      const params = {};
      let match;
      
      while ((match = reg.exec(url)) !== null) {
        params[match[1]] = match[2];
      }
      
      return params;
    }
  </script>
</body>