xgplayer直播没有直播流时显示自定义页面

在xgplayer中，可以通过监听error事件来实现在没有直播流时显示自定义页面的功能。具体步骤如下：

在html中引入xgplayer的js和css文件：

<link rel="stylesheet" href="path/to/xgplayer.css">
<script src="path/to/xgplayer.js"></script>

在html中创建一个容器用于显示xgplayer的播放器：

<div id="player"></div>

在javascript中初始化xgplayer并监听error事件：

var player = new Player({
    id: 'player',
    url: 'your_live_stream_url',
    width: '100%',
    height: '100%',
    poster: 'path/to/poster.jpg'
});

player.on('error', function() {
    // 显示自定义页面
    var customPage = document.createElement('div');
    customPage.innerHTML = 'Custom Page Content';
    document.getElementById('player').appendChild(customPage);
});

在上述代码中，你需要将your_live_stream_url替换为你自己的直播流地址，path/to/poster.jpg替换为你自己的封面图地址。当xgplayer在播放直播流时发生错误时，会触发error事件，此时可以在回调函数中添加自定义页面的显示逻辑。在上述代码中，我们创建一个div元素作为自定义页面，然后将其添加到播放器的容器中。

注意：在显示自定义页面时，你可以根据需要进行自定义样式和内容的设置