3.0 KiB
3.0 KiB
VideoPlayer
控件功能:一个支持多种视频格式(MP4、HLS .m3u8、DASH .mpd)的视频播放器控件,内置播放控制条,支持播放/暂停、音量调节、倍速播放、音轨切换和全屏功能。
类型:普通控件
父类控件:bricks.VBox
初始化参数
| 参数名 | 类型 | 说明 |
|---|---|---|
url |
String | 视频资源地址,支持 .mp4、.m3u8(HLS)、.mpd(DASH)格式 |
autoplay |
Boolean | 是否自动播放,默认为 false |
示例:
new bricks.VideoPlayer({ url: 'https://example.com/video.m3u8', autoplay: true });
主要事件
| 事件名 | 触发条件 |
|---|---|
domon |
控件被挂载到 DOM 时触发,用于初始化播放器 |
domoff |
控件从 DOM 中移除时触发,用于销毁播放器资源 |
click |
点击播放区域时显示控制栏,并启动隐藏倒计时 |
play_ok |
(由 Iptv 使用)视频成功开始播放时可通过外部监听上报 |
play_failed |
(由 Iptv 使用)视频加载失败或无法播放时触发上报 |
注意:
play_ok和play_failed并非直接由VideoPlayer派发,而是通过其子类或组合控件(如Iptv)在状态判断后手动调用。
Iptv
控件功能:专用于 IPTV 场景的播放控件,可动态获取频道信息并自动加载 VideoPlayer 进行播放,同时支持播放成功/失败时向服务器上报状态。
类型:容器控件
父类控件:bricks.VBox
初始化参数
| 参数名 | 类型 | 说明 |
|---|---|---|
iptv_data_url |
String | 获取频道数据的接口 URL,返回包含 url、tv_name、id 等字段的 JSON 数据 |
playok_url |
String | 播放成功时上报的接口地址(可选) |
playfailed_url |
String | 播放失败时上报的接口地址(可选) |
示例:
new bricks.Iptv({ iptv_data_url: '/api/iptv/channel', playok_url: '/api/report/playok', playfailed_url: '/api/report/playfailed' });
主要事件
| 事件名 | 触发条件 |
|---|---|
play_ok |
当内部 VideoPlayer 成功播放时,向 playok_url 发起 GET 请求进行上报 |
play_failed |
当 VideoPlayer 播放失败时,向 playfailed_url 发起 GET 请求进行上报 |
说明:这两个事件是通过监听
VideoPlayer的底层行为(如元数据加载完成且未出错)间接触发的,目前依赖于业务逻辑判断。
方法说明
setValue(data):更新当前播放频道的数据(如更换频道),会同步更新标题和视频源。- 参数
data: 包含url,tv_name,id的对象 - 示例:
iptvWidget.setValue({ id: "cctv1", tv_name: "CCTV-1 综合", url: "https://live.example.com/cctv1.m3u8" });
- 参数