Danmu is not showing up when playing live stream

您使用的西瓜播放器版本是多少？ What version of xglayer are you using?

    "xgplayer": "^2.27.3",
    "xgplayer-hls": "^2.4.32"

您使用的操作系统和浏览器分别是？ What OS and browser are you using? MacOS / Chrome

如何复现问题？ What did you do?

代码如下：

import React from 'react';
import ScrollAnim from 'rc-scroll-anim';
import Header from '@/common/components/header';
import Footer from '@/common/components/footer';
import { HeaderDataSource, FooterDataSource } from '@/meta';

import HlsPlayer from 'xgplayer-hls';

import './styles.less';

class LivePage extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    let player = new HlsPlayer({
      id: 'playerView',
      autoplay: true,
      // volume: 0.5,
      isLive: true,
      url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8',
      playsinline: true,
      width: window.innerWidth,
      height: window.innerWidth * 0.5,
      danmu: { // 弹幕面板
        panel: true,
        comments: [
          {
            duration: 15000, //弹幕持续显示时间,毫秒(最低为5000毫秒)
            id: '1', //弹幕id，需唯一
            start: 1000, //弹幕出现时间，毫秒
            prior: true, //该条弹幕优先显示，默认false
            color: true, //该条弹幕为彩色弹幕，默认false
            txt: '长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕', //弹幕文字内容
            style: {  //弹幕自定义样式
              color: '#ff9500',
              fontSize: '20px',
              border: 'solid 1px #ff9500',
              borderRadius: '50px',
              padding: '5px 11px',
              backgroundColor: 'rgba(255, 255, 255, 0.1)'
            },
            mode: 'top' //显示模式，top顶部居中，bottom底部居中，scroll滚动，默认为scroll
            // el: DOM //直接传入一个自定义的DOM元素作为弹幕，使用该项的话会忽略所提供的txt
            // eventListeners: [{ //支持自定义DOM设置DOM监听事件
            //   event: 'click',
            //   listener: function (e) {
            //     console.log('click')
            //   },
            //   useCapture: false,
            // }]
          }
        ],
        area: {  //弹幕显示区域
          start: 0, //区域顶部到播放器顶部所占播放器高度的比例
          end: 1 //区域底部到播放器顶部所占播放器高度的比例
        },
        closeDefaultBtn: true, //开启此项后不使用默认提供的弹幕开关，默认使用西瓜播放器提供的开关
        defaultOff: true //开启此项后弹幕不会初始化，默认初始化弹幕
      }
    });

    window.player = player;

  }

  render () {
    return (
      <>
        <Header
          id="Header"
          key="Header"
          dataSource={HeaderDataSource}
          // isMobile={this.state.isMobile}
        />
        <div id="content" className="fill-parent">
          <div id="playerView"
            style={{
            }}
          ></div>
        </div>
      </>
    );
  }

}

您期望的播放器正常行为是？ What did you expect to happen? 用户点击播放后，弹幕应正常显示

实际播放器的表现是？ What actually happened? 弹幕未出现

可填写您所在的公司和相关产品业务，方便我们提供更好的技术支持 You can write your company and product which uses xgplayer, for helping us provide better technical support.

bytedance / xgplayer

Danmu is not showing up when playing live stream #594