如何使用HTML和JS实现HLS直播并添加直播状态标识

你使用的Fluid Player本身内置了直播标识支持，同时也支持自定义控件扩展，可根据需求选择以下方案：

方案一：使用内置直播配置（最简单） #

Fluid Player 3.0+ 版本提供了原生的直播标识开关，只需要在初始化配置的layoutControls中新增isLive参数即可自动在控制栏显示直播标识，修改后的JS代码如下：

fluidPlayer(
        'hls-video',
        {
            layoutControls: {
                fillToContainer: false,
                autoPlay: true,
                title: 'My video title',
                // 开启直播标识
                isLive: true,
                // 可选：自定义标识文本，默认显示为 LIVE
                liveDisplayText: '直播'
            }
        }
    );

该方案不需要额外编写样式和DOM代码，标识会自动和播放器控制栏样式适配。

方案二：自定义直播标识（适合需要定制样式的场景） #

如果内置标识的样式不符合设计需求，可以手动插入自定义DOM和样式实现：

第一步：新增直播标识样式 #

/* 直播标识容器 */
.live-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 999;
    background: #e74c3c;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}
/* 直播闪烁红点效果 */
.live-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: liveBlink 1.2s infinite ease-in-out;
}
@keyframes liveBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

第二步：修改初始化JS代码插入标识 #

const player = fluidPlayer(
        'hls-video',
        {
            layoutControls: {
                fillToContainer: false,
                autoPlay: true,
                title: 'My video title',
            }
        }
    );
// 插入直播标识到播放器容器
const playerWrap = document.querySelector('.fluid-player');
playerWrap.style.position = 'relative';
const liveBadge = document.createElement('div');
liveBadge.className = 'live-badge';
liveBadge.innerText = '直播';
playerWrap.appendChild(liveBadge);

扩展：自动判断是否为直播流 #

如果需要根据HLS流的类型自动显示/隐藏直播标识，可以监听HLS实例的清单解析事件判断：

const player = fluidPlayer('hls-video', {
    layoutControls: {
        fillToContainer: false,
        autoPlay: true,
        title: 'My video title',
    }
});
// 监听HLS实例创建完成事件
player.on('hlsInstanceCreated', (hls) => {
    // 监听HLS清单解析完成事件
    hls.on(Hls.Events.MANIFEST_PARSED, () => {
        const isLiveStream = hls.levels[0]?.details?.live ?? false;
        if (isLiveStream) {
            // 动态开启内置直播标识
            player.setLayoutControls({
                isLive: true,
                liveDisplayText: '直播'
            })
        }
    })
})

内容的提问来源于stack exchange，提问作者Praveen Malviya