快速进阶
播放控制条
简单播放控制条可参考demo中的PlayControl类。该类由播放按钮、播放进度条等组成。 涉及到的接口有:
| 接口名 | 参数 | 返回值 | 说明 |
|---|---|---|---|
| start | 无 | void | 开始/恢复播放 |
| pause | 无 | void | 暂停播放 |
| isPlaying | 无 | boolean | 查看是否正在播放状态 |
| seekTo | msec: string | void | seek到指定位置播放 |
| setVolume | leftVolume: string,rightVolume: string | void | 设置音量 |
| setSpeed | speed: string | void | 设置播放倍速 |
| getSpeed | 无 | number | 获取设置的倍速 |
| getDuration | 无 | number | 获取视频时长,单位为毫秒 |
| getCurrentPosition | 无 | number | 获取当前播放位置,单位为毫秒 |
| setLoopCount | looping: boolean | void | 设置循环播放 |
| isLooping | 无 | boolean | 查看当前是否循环播放 |
| setOnBufferingUpdateListener | listener: OnBufferingUpdateListener | void | 监听,回调时返回已缓存时长占视频播放时长的百分比,根据该值更新二级进度条(缓存进度) |
暂停与播放
1// 暂停播放
2
3this.mBDCloudMediaPlayer.pause()
4
5// 恢复播放
6
7this.mBDCloudMediaPlayer.start()
8
9// 查看是否是播放状态
10
11this.mBDCloudMediaPlayer.isPlaying
Seek 到指定位置播放
1// 演示 seek 到 1 秒的位置
2 this.mBDCloudMediaPlayer.start('1000')
3
设置音量
1 // 静音
2 this.mBDCloudMediaPlayer.setVolume('0','0')
3 // 取消静音
4 this.mBDCloudMediaPlayer.setVolume('1','1')
5
倍速播放
1 // 设置倍速 可取值:'0.75f'、 '1.0f'、'1.5f' 、'1.75f'、'2.0f'
2 this.mBDCloudMediaPlayer.setSpeed('1.5f');
3 // 获取倍速
4 this.mBDCloudMediaPlayer.getSpeed()
5
获取视频时长
1 // 获取播放的总时长
2 this.mBDCloudMediaPlayer.getDuration()
3
4 // 获取播放当前时长
5 this.mBDCloudMediaPlayer.getCurrentPosition()
6
循环播放
1// 设置循环播放
2 this.mBDCloudMediaPlayer.setLoopCount(true)
3
4// 查看当前是否循环播放
5this.mBDCloudMediaPlayer.isLooping()
多码率有感切换
当播放的是HLS多码率视频时,播放器支持在播放过程中实时切换码率。
获取多码率视频(Master M3U8)的index数目
1this.mBDCloudMediaPlayer?.getVariantInfo() as Array<string>;
- 该variantinfo直接从Master m3u8文件中取值,根据(#EXT-X-STREAM-INF)格式的不同,取到的值 可能为:1920x1080,3541000也可能为,232370(不规范的视频)。逗号前是分辨率,逗号后是码率;
- 数组的大小即为多码率的数目;
选择多码率
播放过程中,选择多码率:
1this.mBDCloudMediaPlayer?.selectResolutionByIndex(index);
- 该函数会使得player内部的状态变化
stop --> prepareAsync --> prepared。 - BDCloudMediaPlayer还开放了
selectVariantByIndex接口。该接口不帮忙维护mediaplayer状态。如果想使用该接口,需要保证在prepareAsync之前调用。
多码率无缝切换
播放器不仅支持HLS的多码率快速切换,同时也支持MP4等主流媒体格式的无缝切换功能。具体操作如下:
Master playlist 的HLS格式多码率无缝切换
- 设置输入格式:
this.mBDCloudMediaPlayer?.setMediaInputType(mode)。 - 在监听到
onPrepared状态后,调用this.mBDCloudMediaPlayer?.getMediaItems()获取多码率信息列表,更新UI。 - 用户根据对应索引切换到指定码率:
this.mBDCloudMediaPlayer?.selectMediaByIndex(index)。 - 当播放器缓冲播放完成后即会切换到新的码率显示会收到
onVideoSizeChanged(...)回调表示视频分辨率发生变化。
MP4等非嵌套码率的无缝切换
- 设置输入格式:
this.mBDCloudMediaPlayer?.setMediaInputType(mode)。 - 设置多码率视频链接(注意这里和HLS的区别):
this.mBDCloudMediaPlayer?.setMediaItems(mediaItems)。 - 在
onPrepared状态后,调用getVariantInfo()获取多码率信息列表,更新UI。 - 用户根据对应索引切换到指定码
this.mBDCloudMediaPlayer?.selectMediaByIndex(index)。 - 当播放器缓冲播放完成后即会切换到新的码率显示会收到收到
onVideoSizeChanged(...)回调表示视频分辨率发生变化。
播放HLS加密视频
百度智能云MCP服务和VideoWorks服务支持转码成HLS加密视频。
不同的加密方式,播放时的方法略有不同:
-
PlayerBinding加密模式
按普通视频播放即可,必须使用百度播放器
-
Token模式
token需要您的服务器与百度智能云服务器合作来生成,您的App从您的服务器拿到token后,设置给播放器即可。 prepare之前需要先设置token:
Plain Text1 this.mBDCloudMediaPlayer.setDecryptTokenForHLS("your-token");
视频下载
播放器支持对M3U8、mp4、flv、mp3等常见的音视频进行下载和管理。
下载管理器
1、oh-package.json5添加sdk依赖
1 "dependencies": {
2 "baidudownloader":"file:../libs/baidudownloader.har",
3 }
2、项目中引入baidudownloader组件sdk:
1import { IDownloadEngine, Download, DownloadEventListener, DownloadProgress, DownloadResult ,CacheItem,CacheManager,LocalHlsSec} from 'baidudownloader';
3、下载管理器以单例的形式提供:
1private downloadEngine: IDownloadEngine = Download.getEngine();
使用步骤
1、调用downloadEngine: IDownloadEngine = Download.getEngine();获得下载管理单例。
2、调用downloadEngine.downloadVideo(VideoDownloadOptions)启动下载任务。
1 await this.downloadEngine.downloadVideo({
2 url: "XX.m3u8",
3 title: "XX.m3u8",
4 thumbnail: $r('app.media.ic_internet'),
5 enableHLS: true,
6 enableResume: false,
7 drmToken: "XXX"
8 } as VideoDownloadOption);
VideoDownloadOption接口说明
1 interface VideoDownloadOptions extends DownloadOptions {
2 enableHLS?: boolean; // 是否启用HLS下载(可选,默认自动检测)
3 enableResume?: boolean; // 是否启用断点续传(可选,默认true)
4 chunkSize?: number; // 分块大小,字节(可选,默认2MB)
5 drmToken?: string; // DRM加密token,用于HLS加密视频下载(可选)
6 accountId?: string; // 账号ID(可选),用于用户数据隔离。传了则按账号隔离存储,不传则按原有方式共享存储
7 }
DownloadOptions接口说明
1 interface DownloadOptions {
2 url: string; // 视频URL(必需)
3 title: string; // 视频标题(必需)
4 thumbnail?: Resource; // 缩略图资源(可选)
5 quality?: string; // 清晰度:'720p' | '1080p' | '4K'(可选)
6 headers?: Record<string, string>; // HTTP请求头(可选)
7 timeout?: number; // 超时时间,毫秒(可选)
8 }
3、设置监听事件
1// 下载进度更新
2const progressHandler = (progress: DownloadProgress) => {
3};
4// 下载完成
5const completedHandler = (result: DownloadResult) => {
6
7};
8const errorHandler = (error: string) => {
9 console.error('下载错误:', error);
10};
11class DownloadListenerImpl implements DownloadEventListener {
12 onProgress = progressHandler;
13 onCompleted = completedHandler;
14 onError = errorHandler;
15}
16this.downloadEngine.addEventListener(new DownloadListenerImpl());
DownloadProgress接口
1interface DownloadProgress {
2 id: string;
3 progress: number; // 0-100
4 downloadSpeed: string; // '1.5MB/s'
5 downloadedSize: number;
6 totalSize: number;
7 status: 'downloading' | 'paused' | 'completed' | 'error' | 'pending';
8 }
DownloadResult接口
1interface DownloadResult {
2 id: string;
3 status: 'success' | 'failed' | 'cancelled';
4 localPath?: string;
5 fileSize?: number;
6 duration?: number;
7 error?: string;
8}
4、相关方法及接口说明
1 /**
2 * 暂停下载
3 */
4this.downloadEngine.pauseDownload(item.id);
5
6 /**
7 * 恢复下载
8 */
9this.downloadEngine.resumeDownload(item.id);
10
11 /**
12 * 取消下载
13 */
14this.downloadEngine.cancelDownload(item.id); // 取消下载
15 /**
16 * 获取所有下载任务
17 * @param accountId 账号ID(可选),传入则只返回该账号的下载任务,不传则返回所有
18 */
19this.downloadEngine.getAllDownloads(accountId?: string): Promise<DownloadProgress[]>;
20 /**
21 * 删除缓存
22 * @param id 缓存ID
23 * @param accountId 账号ID(可选),传入则验证该缓存是否属于该账号,防止误删其他账号的缓存
24 */
25this.downloadEngine.deleteCache(id: string, accountId?: string): Promise<boolean>;
26
27 /**
28 * 清空所有缓存
29 * @param accountId 账号ID(可选),传入则只清空该账号的缓存,不传则清空共享缓存
30 */
31 clearAllCache(accountId?: string): Promise<void>;
32
33 /**
34 * 获取缓存大小
35 * @param accountId 账号ID(可选),传入则统计该账号的缓存大小,不传则统计共享缓存大小
36 */
37 getCacheSize(accountId?: string): Promise<number>;
38
39 /**
40 * 检查是否已缓存
41 * @param url 视频URL
42 * @param accountId 账号ID(可选),传入则检查该账号是否已缓存,不传则检查共享缓存
43 */
44 isCached(url: string, accountId?: string): Promise<boolean>;
相关demo示例在src/main/ets/views/HomeTabContentListItem.ets和entry/src/main/ets/pages/CachePage.ets。
边播边录制
1 // 是否正在录制中
2let isRecord = this.mBDCloudMediaPlayer?.isRecord();
3
4// 开始录制
5this.mBDCloudMediaPlayer.startRecord(outputfd:number)
6
7// 结束录制
8await this.mBDCloudMediaPlayer?.stopRecord()
使用方式详见demo中VideoController.ets,录制完成保存到相册
外挂字幕
通过下面的接口可以添加外挂字幕,当前支持的字幕格式包括srt\ssa\ass\webvtt。需要注意的是,该接口需要在收到播放器onPrepared回调后调用,并且对于同一个播放器,同一时刻仅能添加一个外挂字幕轨道,添加新的外挂字幕会自动代替旧的外挂字幕
1// subtitleSrc对应外挂字幕地址
2this.mBDCloudMediaPlayer.addExtSubtitleUrl(subtitleSrc:string);
在播放内核中,当外挂字幕成功读取后,会通过下面的回调进行通知
1 let mOnExtSubtitleOpenListener:OnExtSubtitleOpenListener = {
2 onExtSubtitleOpen:(info:string) => {
3 console.log(`外挂字幕url:${info}`)
4 promptAction.showToast({
5 duration: PlayConstants.PLAY_ERROR_TIME,
6 message: "外挂字幕已开启"
7 });
8 }
9}
具体的字幕内容也会在OnTimedTextListener中回调,这一点与内嵌字幕相同。
1let mOnTimedTextListener: OnTimedTextListener = {
2 onTimedText: (mp: BDCloudMediaPlayer,text:string) => {
3 Logger.info("[PlayVideoModel] onTimedText"+text);
4 this.context.eventHub.emit(Events.SUBTITLE_TEXT,text)
5 }
6}
7this.mBDCloudMediaPlayer.setOnTimedTextListener(mOnTimedTextListener)
