CDN共享版直播H5 SDK

最近更新时间:2018-05-10 18:00:00


背景说明

本SDK基于P2SP技术,致力于为播放端提供更低的延迟和更好的质量。

接入前提

由于H5播放器无法直接播放FLV封装格式的视频流,需要播放端将FLV转封装为Fragmented MP4后,通过Media Source Extensions API进行播放。
本SDK仅支持已有FLV转封装功能的H5播放器。

接入说明

本SDK提供JS库,由星域CDN维护,针对每个正式接入的客户会单独提供链接,同时支持HTTP和HTTPS,以下是测试用链接:

https://fcrc-video.xycdn.com/h5/test/xyvp-live.js

使用时,请确保SDK库已加载成功。判断加载成功的方法:window.xyvp存在。 加载成功后可从window.xyvp取到XYLiveXYLiveEvent,具体参看以下示例代码:

const {XYLive, XYLiveEvent} = xyvp;
if (XYLive.isSupported() === false) return; // 不支持SDK则返回,可以回退到原有的播放方式
const xylive = new XYLive({
    url: playUrl, // 直播流的URL
    video: video // Video标签,HTMLVideoElement
});
// 添加事件监听
xylive.on(XYLiveEvent.FLV_DATA, data => {
    // 处理收到的FLV数据,data <ArrayBuffer>
});
xylive.on(XYLiveEvent.ERROR, errMsg => {
    // 处理异常,errMsg <string> 错误信息
});
xylive.open(); // 开始下载
xylive.close(); // 停止下载
xylive.dispose(); // 停止下载并彻底释放资源
xylive = null; // 主动删除对xylive实例的引用,等待垃圾回收

接口说明

xyvp.XYLive


SDK的接口封装类。
参数:

  • options <Object> 配置选项,有以下字段:
    • url <string> 完整的流URL,包含参数部分
    • video <HTMLVideoElement> Video标签的引用

当参数不正确时会抛出`InvalidArgumentError`。

类方法:XYLive.isSupported();


检测当前的浏览器环境是否支持使用SDK。支持返回true,不支持返回false。

xylive.readyState;


当前状态,只读;0:CLOSED,1:OPENED,2:DISPOSED。

xylive.open();


开始下载,可在新建xylive实例或close()后调用;在dispose()后调用会抛出IllegalStateError

xylive.close();


停止下载,可在open()后调用;对于同一xylive实例,可在close()后重新open();在dispose()后调用会抛出IllegalStateError

xylive.dispose();


停止下载并释放资源,一般在需要彻底销毁xylive实例前调用。

xylive.on(eventName, listener);


添加事件监听;在dispose()后调用会抛出IllegalStateError
参数:

  • eventName <string> XYLiveEvent中定义的事件
  • listener <Function> 回调函数

xylive.off([eventName[, listener]]);


移除所有的监听,或指定eventName的监听,或指定eventName中的指定listener;在dispose()后调用会抛出IllegalStateError
参数:

  • eventName <string> XYLiveEvent中定义的事件
  • listener <Function> 回调函数

xyvp.XYLiveEvent


包含XYLive中可监听的事件名称常量。

XYLiveEvent.FLV_DATA


当接收到数据时调度,回调函数的参数为FLV数据:data <ArrayBuffer>

XYLiveEvent.ERROR


当发生错误时调度,回调函数的参数为错误信息:errMsg <string>