跳到主要内容
版本：4.0

HLS 实时播放示例 (异步 HTTP API)

本示例在 异步 FLV 示例 基础上，将客户端协议改为 HLS（proto: 1），并演示 hls.js / 原生播放器 的选型与封装。API 调用流程（登录、STOMP、异步 open、保活）与 example-2 相同，本文重点说明 HLS 播放差异。

项目说明
示例页面live-example-3-hls
示例代码live-example-3-hls.zip
依赖库axios、hls.js、stomp-websocket
打开模式异步（async: true）+ STOMP 通知

相关文档：客户端播放协议的选择 · example-2-live

适合场景​

  • 需兼容 iPhone / iPad Safari（原生不支持 FLV）
  • 可接受 HLS 较高延时（通常数秒）
  • 浏览器覆盖面优先于低延时

桌面端低延时场景请用 example-1-live 或 example-2-live（FLV）。

与 FLV 示例的差异​

FLV（example-2）HLS（本示例）
proto01
播放器flv.js / mpegts.jshls.js 或原生 <video>
Safari不支持 FLV原生支持 HLS
异步 ready=false可提前 load 等待建议等 act=ready 再播放
延时低较高

整体流程​

与 example-2-live 一致，仅 open 参数 与 播放器 不同：

登录 → STOMP 订阅 → POST /strm/live/open (proto=1, async=true)
  → 收到 ready 通知 → hls.js / 原生播放 → keep_alive → close

API 调用：唯一关键差异​

axios.post(apiUrlPrefix() + 'strm/live/open', {
    simNo: sn,
    channel: channelId(),
    dataType: 0,
    codeStream: codeStream(),
    proto: 1,          // HLS（默认 fMP4 分段）
    async: true
}, { headers: { 'X-Auth-Token': token } });

可选 subProto：fmp4（默认，支持 H.265）或 mpegts（旧播放器兼容）。见 打开实时音视频。

HLS 特别注意： 异步模式下若 ready=false，应等到 StrmNotif act=ready 后再创建播放器；不宜像 HTTP-FLV 那样过早 load。见 生命周期 · 播放。

WebSocket 订阅、保活、关闭等与 example-2-live 相同，此处不再重复。

HLS 播放器选型​

环境检测方式播放器
支持 MSEHls.isSupported()hls.js（Chrome / Firefox / Edge）
原生 HLSvideo.canPlayType('application/vnd.apple.mpegurl')原生 <video src>（Safari）

示例采用 hls.js 优先，不支持时再退原生：

function createPlayerAndLoad(url, mediaTyp) {
    if (Hls.isSupported()) {
        player = new HlsPlayer(url, mediaTyp, onPlayerClosed);
    } else if (videoElement.canPlayType('application/vnd.apple.mpegurl')) {
        player = new NativePlayer(url, mediaTyp, onPlayerClosed);
    } else {
        errLog('当前浏览器不支持 HLS');
        return;
    }
    player.load();
}

hls.js 要点​

this.hlsPlayer = new Hls();
this.hlsPlayer.attachMedia(videoElement);
this.hlsPlayer.on(Hls.Events.MANIFEST_PARSED, () => videoElement.play());
this.hlsPlayer.on(Hls.Events.ERROR, (_, data) => {
    if (data.fatal) {
        // NETWORK_ERROR → startLoad(); MEDIA_ERROR → recoverMediaError()
        this.close();
    }
});
this.hlsPlayer.loadSource(url);

原生播放器要点​

videoElement.src = url;
videoElement.onerror = () => this.close();
videoElement.load();
videoElement.play();

示例中对 AbstractPlayer / HlsPlayer / NativePlayer 做了简单抽象，便于主流程与 FLV 示例结构一致，详见源码 live-example-3-hls.zip。

检查清单​

  • proto: 1，且已订阅 STOMP（同 example-2）
  • HLS 在 ready 后再创建播放器
  • 错误时停止保活并 strm/close
  • Safari 走原生分支时确认 playUrl 为 HTTPS 可访问

常见错误​

现象处理
Safari 黑屏确认走 NativePlayer，playUrl 有效
桌面 Chrome 不播检查 Hls.isSupported()，勿误用原生分支
一直 loading未收到 ready 或分段未生成，查 WS 通知

下一步​

目标文档
FLV 异步完整流程example-2-live
协议选型flv-vs-hls
v4 单连接 APIws-example-1-live