首先thumbplayer-core中定义了几个重要对象如下:
IPlayerCore
:播放器的配置,例如是直播还是点播IUrlConfig
:播放地址的一个配置,包括cdn地址,一组备份地址(降低播放失败率),fileSize或者视频编码信息等等。IVideoInfo
:视频播放过程中产生的各种播放信息,例如视频的当前时间点、视频尺寸和当前状态等。
首先需要传入IPlayerCore
配置创建一个player对象,我们调用player对象的play接口时,传入IUrlConfig
(也就是包含了视频播放地址)。thumbplayer-core根据IUrlConfig
开始播放视频,在这个播放过程中,可以通过player对象的currentVideoInfo
来获取IVideoInfo
对象(也就是当前正在播放的视频的各种信息)。
而在thumbplayer-core内部,我们整体上可以概括为三层
- 第一层是接口层,定义了thumbplayer-core的公开方法、事件枚举、各种类型申明等
- 第二层即核心播放层,这一部分真正开始处理视频数据,解码视频和渲染视频。这里实际上由多个“播放内核”组成,每一种“播放内核”处理一种视频格式或视频编码。“播放内核”由接口层的“内核工厂”根据传入的视频格式和浏览器环境综合判断来决定使用哪一种“播放内核”
- 第三层为数据下载层,这里根据“播放内核”的不同使用不同的方式下载视频数据,比如通过xhr的range请求来模拟视频的流式加载,或者直接使用fetch进行真正的流式加载,或者使用p2p组件加载p2p数据(webrtc)。
我们可以从下图的调用图中大致描述出这三层的关系: