登录控制台

HTML5播放器

作者:蔚可云 时间:2020-12-07
主要用于PC端Web平台播放功能,覆盖常规直播和点播业务。

一、产品功能

1.播放参数
解码方式:当前 video 标签暂不能自由选择软硬解,视各浏览器提供的默认解码模式,但通常会采用硬解模式。
支持格式
直播:HLS、HDL
点播:MP4、FLV、HLS
HTML5播放器 当选用 HDL 协议播放时,CDN 方面需配置:
HDL点播:视频文件所在域下,需要支持跨域访问及能识别并处理 http头中Range字段设置请求;
HDL直播:视频文件所在域下,需要支持跨域访问并配置支持 websocket协议。
支持音视频格式
基于 HTML5 标准支持的音视频格式情况如下所述,基于国内业界现状,当前播放器建议点播优先使用 MP4 文件。
HTML5播放器 iOS 和 Mac Safari 无法支持两层结构的 m3u8 文件
2.通用功能
基本功能
播放器支持符合格式要求的视频流/视频文件基本操作,包括播放、暂停、停止。
音频控制
播放器提供对音量的两种控制
(1)静音/恢复
(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等组件的支持,可能出现潜在兼容性问题,若尝试应用于移动端环境,需谨慎评估。
附已明确移动端浏览器兼容性数据:
HTML5播放器
本页目录