CDN加速

文档中心 播放SDK 播放SDK HTML5播放器说明书

HTML5播放器说明书

更新时间:2021-07-01 17:10:44

产品概述

产品名称
网宿 HTML5 播放器

业务和范围
主要用于PC端Web平台播放功能,覆盖常规直播和点播业务。

产品功能

1.播放参数

解码方式
当前 video 标签暂不能自由选择软硬解,视各浏览器提供的默认解码模式,但通常会采用硬解模式。

支持格式
直播:HLS、HDL
点播:MP4、FLV、HLS

云游戏或成5G“杀手级应用” CDN迎来新蓝海

当选用 HDL 协议播放时,CDN 方面需配置:
HDL点播:视频文件所在域下,需要支持跨域访问及能识别并处理 http头中Range字段设置请求;
HDL直播:视频文件所在域下,需要支持跨域访问并配置支持 websocket协议。

支持音视频格式
基于 HTML5 标准支持的音视频格式情况如下所述,基于国内业界现状,当前播放器建议点播优先使用 MP4 文件。

格式 格式说明
Ogg 带有 Thedora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG 4 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
FLV 带有 AVC 视频编码和 AAC 音频编码的 flv 文件
HLS 带有 AVC 视频编码和 AAC 音频编码的 m3u8+ts 文件
iOS 和 Mac Safari 无法支持两层结构的 m3u8 文件

2. 通用功能

基本功能
播放器支持符合格式要求的视频流/视频文件基本操作,包括播放、暂停、停止。

音频控制
播放器提供对音量的两种控制

  • 静音/恢复
  • 音量高低调整/当前音量获取

播放进度
播放器提供获取播放进度接口,用于判断用户观看进度:
在点播条件下可获取到视频当前播放进度和总时长;
直播时则只能获取到从开始观看直播到目前为止时长,总时长接口未定义,将返回无限。

画面控制
视频播放过程涉及两个画面参数配置,一个是画面比例调整,一个是对比度、亮度等用户适应性参数。
1.8.3版本提供视频原比例、全屏、4:3和16:9四种选项供使用,同时提供亮度、对比度和饱和度在0-200范围内调整,默认均设置为100。
2.0版本不再提供比例切换(包括4:3和16:9)、亮度、对比度和饱和度控制,但新增网页全屏控制。

自动播放
可通过配置autoplay属性使视频在播放器加载完毕后自动触发播放,但该功能在移动端受到系统机制限制,可能无法实现。

水印
参数为logo。可支持在画面左上、左下、右上、右下四个角落放置图片水印。

右键菜单
播放器范围内的右键菜单设置功能,允许管理菜单中的文字内容与对应监听事件关系。

3. 直播场景

直播插播
在直播过程中,主播端可能遭遇禁播或短暂停播出现故障时,可在此时插播广告等来播放其他内容,只需简单配置插播地址 URL (必须是 MP4 文件)即可,待复播后再切回直播功能。

纯音频背景
无论视频源是音视频或为纯音频,播放器均支持只播放音频。
且可模拟电台主播场景,实现播放界面显示一张图片作为背景,优化用户体验。
需注意,该功能与 视频封面 不可同时使用。

4. 点播场景

跳转播放
点播过程中,用户可以通过拖拽进度条跳转到指定位置播放视频,SDK提供按照时间单位(秒)和百分比两种参数方式控制。

播放列表
对于电视剧、专辑等列表视频,H5 播放器支持列表设置,可对列表一些共性功能进行统一设置,比如专辑封面等等。需要注意的是,列表内所列视频必须都是 MP4 文件或者都是 m3u8 文件(目前不建议),二者不能同时存在。
2.0版本不支持该功能。

广告
支持视频播放前、中、后展示对应的前贴、中贴、后贴广告,广告类型前/后贴支持视频,中贴支持图片。

倍速播放
支持点播文件倍速播放,倍速区间为{0.5,1,1.5,2,4},App 可根据需要设定想支持的倍速速度。开启倍速功能后,音视频均进行倍速播放。
2.0版本中可自定义倍速区间,但必须包含1.0倍速。

循环播放
播放器支持循环播放视频列表。
若需要单一循环,需要保证列表中仅有一个视频。
2.0版本只支持单一循环。

记忆播放
播放器基于cookie可实现记忆播放,即加载视频时直接跳转至上次退出播放所在位置。
该功能要求不能开启前贴广告。
2.0版本不支持该功能。

5. 其他功能

皮肤切换
提供默认、优雅、经典、炫酷四种皮肤类型供选择,并且可设置中英文外观,但1.8.3版本不支持 UI 界面再定义。

清晰度切换
提供多种清晰度切换选项,包含原画、流畅、标清、高清、超清。
需要注意的是,对于播放器而言,不同清晰度的视频只是不同的请求地址而已,因此想要达到多种清晰度的效果需要与 CDN 配合使用进行转码。
2.0版本新增可动态更新不同清晰度下视频地址功能。

视频封面
播放器提供接口填写视频封面图片地址,可用格式包括PNG、JPEG和BMP等常见图片格式。
需注意,该功能与 纯音频背景 不可同时使用。

微窗预览
2.0版本新增功能。
播放器可以6秒为间隔,加入128×72大小的缩略图。
需要注意的是,该功能在移动端浏览器上无法使用,仅限于PC场景。

控制栏
1.8.3版本可依据参数控制是否隐藏。
2.0版本新增控制栏自定义能力,支持对包括播放暂停按钮、播放时长、视频时长、进度条、直播提示、音量栏和全屏按钮的可视化控制,极大提升了自定义空间。

特殊播放
播放全景、VR视频。
对于全景视频,可以重置视角。
对于VR视频,由于缺乏实际使用场景,实际未验证,不建议推广。

跑马灯
2.0版本新增功能。
为增强内容保护,播放器支持视频顶端跑马灯滚动文字,可根据客户需求控制字体、大小和滚动速率。

SEI
播放器可解析视频流中包含的SEI信息并回调到外部,通常用于时间轴的同步或少量信息下发。
2.0版本中不支持该功能。

系统时间显示
可以在视频正上方显示系统当前时间。
2.0版本支持调整时间信息的字体、颜色和大小。

注意事项

HTML5播放器本身为PC端环境设计,移动端或可使用其中部分功能,但总体受限于浏览器内核对MSE等组件的支持,可能出现潜在兼容性问题,若尝试应用于移动端环境,需谨慎评估。
附已明确移动端浏览器兼容性数据:

云游戏或成5G“杀手级应用” CDN迎来新蓝海