阅读对象
通过本文您可以学会
如何集成腾讯云视立方鸿蒙播放器 SDK。
如何使用播放器 SDK 进行点播播放。
如何使用播放器 SDK 底层能力实现更多功能。
SDK 集成
步骤1:集成 SDK 开发包
步骤2:创建 Player
import { TXVodPlayer, TXVodConstants, TXVodDef, ITXVodPlayCallback } from 'liteavsdk';// 创建播放器实例this.player = new TXVodPlayer(getContext());
步骤3:设置渲染视图
@Entry@Componentstruct VodPlayerView {private xComponentController: XComponentController = new XComponentController();private surfaceId: string = '';@State surfaceSize: { width: number, height: number } = { width: 0, height: 0 };build() {Column() {XComponent({id: 'vodPlayer',type: XComponentType.SURFACE,controller: this.xComponentController,libraryname: 'liteavsdk'}).width('100%').height(200).onLoad(() => {// XComponent 加载完成,可以设置渲染目标this.surfaceId = this.xComponentController.getXComponentSurfaceId();// 设置用于视频渲染的目标this.player?.setVideoRenderTarget(this.surfaceId);})}.width('100%')}}
步骤4:设置监听事件
// 设置播放器回调this.player.setVodPlayCallback({onPlayEvent: (vodPlayer: TXVodPlayer, event: number, eventData?: Map<string, TXVodDef.ParamType>): void => {switch (event) {case TXVodConstants.VOD_PLAY_EVT_PLAY_BEGIN:// 视频播放开始break;case TXVodConstants.VOD_PLAY_EVT_PLAY_PROGRESS:// 播放进度更新let currentPositionMs = eventData?.get(TXVodConstants.EVT_PLAY_PROGRESS_MS) as number;let durationMs = eventData?.get(TXVodConstants.EVT_PLAY_DURATION_MS) as number;break;case TXVodConstants.VOD_PLAY_EVT_PLAY_END:// 视频播放结束break;case TXVodConstants.VOD_PLAY_EVT_CHANGE_RESOLUTION:// 视频分辨率改变let videoWidth = eventData?.get(TXVodConstants.EVT_PARAM1) as number;let videoHeight = eventData?.get(TXVodConstants.EVT_PARAM2) as number;break;}},onNetStatus: (player: TXVodPlayer, statusData: Map<string, TXVodDef.ParamType>): void => {// 网络状态更新let width = statusData.get(TXVodConstants.NET_STATUS_VIDEO_WIDTH) as number;let height = statusData.get(TXVodConstants.NET_STATUS_VIDEO_HEIGHT) as number;}});
步骤5:启动播放
TXVodPlayer 支持两种播放模式,您可以根据需要自行选择:
TXVodPlayer 内部会自动识别播放协议,您只需要将您的播放 URL 传给 startVodPlay 函数即可。
// 播放视频资源let playInfoParams: TXVodDef.TXPlayInfoParams =TXVodDef.TXPlayInfoParams.createWithUrl('http://1400329073.vod2.example.com/d62d88a7vodtranscq1400329073/59c68fe75285890800381567412/adp.10.m3u8');this.player.startVodPlay(playInfoParams);
// psign 即播放器签名,签名介绍和生成方式参见链接:https://cloud.tencent.com/document/product/266/42436let playInfoParams: TXVodDef.TXPlayInfoParams =TXVodDef.TXPlayInfoParams.createWithFileId(1252463788, '4564972819220421305', 'psignxxxxxxx');this.player.startVodPlay(playInfoParams);
在 媒资管理 找到对应的视频文件。在文件名下方可以看到 FileId。通过 FileId 方式播放,播放器会向后台请求真实的播放地址。如果此时网络异常或 FileId 不存在,则会收到 TXVodConstants.VOD_PLAY_ERR_GET_PLAYINFO_FAIL 事件,反之收到 TXVodConstants.VOD_PLAY_EVT_GET_PLAYINFO_SUCC 表示请求成功。
步骤6:结束播放
结束播放时记得调用 Player 的停止方法,尤其是在下次 startVodPlay 之前,否则可能会产生大量的内存泄露以及闪屏问题。
// 停止播放this.player.stopPlay(true);
基础功能使用
1、播放控制
开始播放
// 开始播放let playInfoParams = TXVodDef.TXPlayInfoParams.createWithUrl(url);this.player.startVodPlay(playInfoParams);
暂停播放
// 暂停播放this.player.pause();
恢复播放
// 恢复播放this.player.resume();
结束播放
// 结束播放this.player.stopPlay(true);
调整进度(seek)
当用户拖拽进度条时,可调用 seek 从指定位置开始播放,播放器 SDK 支持精准 seek。
let time: number = 60; // 单位为秒// 精准 seek(可选参数)this.player.seek(time, true); // true 为精准 seek,false 为非精准 seek
从指定时间开始播放
首次调用 startVodPlay 之前,支持从指定时间开始播放。
let startTimeInSecond: number = 60; // 单位:秒this.player.setStartTime(startTimeInSecond); // 设置开始播放时间this.player.startVodPlay(playInfoParams);
2、变速播放
点播播放器支持变速播放,通过接口
setRate 设置点播播放速率来完成,支持快速与慢速播放,如0.5X、1.0X、1.2X、2X等。// 设置1.2倍速播放this.player.setRate(1.2);
3、循环播放
// 设置循环播放this.player.setLoop(true);// 获取当前循环播放状态let isLoop = this.player.isLoop();
4、静音设置
// 设置静音,true 表示开启静音, false 表示关闭静音this.player.setMute(true);
5、音量设置
// 设置音量大小,范围:0 ~ 100this.player.setAudioPlayoutVolume(80);
6、贴片广告
播放器 SDK 支持在界面添加图片贴片,用于广告宣传等。实现方式如下:
将
autoPlay 设为 false,此时播放器会正常加载,但视频不会立刻开始播放。在播放器加载出来后、视频尚未开始时,即可在播放器界面查看图片贴片广告。
待达到广告展示结束条件时,使用 resume 接口启动视频播放。
this.player.setAutoPlay(false); // 设置为非自动播放this.player.startVodPlay(playInfoParams); // startVodPlay 后会加载视频,加载成功后不会自动播放// ......// 在播放器界面上展示广告// ......this.player.resume(); // 广告展示完调用 resume 开始播放视频
7、HTTP-REF
TXVodPlayConfig 中的 headers 可以用来设置 HTTP 请求头,例如常用的防止 URL 被到处拷贝的 Referer 字段(腾讯云可以提供更加安全的签名防盗链方案),以及用于验证客户端身份信息的 Cookie 字段。
import { TXVodPlayConfig } from 'liteavsdk';let config: TXVodPlayConfig = new TXVodPlayConfig();let headers: Map<string, string> = new Map();headers.set('Referer', 'Referer Content');config.headers = headers;this.player.setConfig(config);
8、清晰度设置
SDK 支持 HLS 的多码率格式,方便用户切换不同码率的播放流,从而达到播放不同清晰度的目标。可以通过下面方法进行清晰度设置。
// 在收到播放器 VOD_PLAY_EVT_PLAY_BEGIN 事件后调用 getSupportedBitrates 才会有值返回let bitrateItems: TXVodDef.TXBitrateItem[] = this.player.getSupportedBitrates(); // 获取多码率数组let index = bitrateItems[i].index; // 指定要播的码率下标this.player.setBitrateIndex(index); // 切换码率到想要的清晰度
在播放过程中,可以随时通过
this.player.setBitrateIndex(index) 切换码率。切换过程中,会重新拉取另一条流的数据,SDK 针对腾讯云的多码率文件做过优化,可以做到切换无卡顿。9、码流自适应
SDK 支持 HLS 的多码流自适应,开启相关能力后播放器能够根据当前带宽,动态选择最合适的码率播放。可以通过下面方法开启码流自适应。
this.player.setBitrateIndex(TXVodConstants.INDEX_AUTO); // index 参数传入 -1(INDEX_AUTO)
在播放过程中,可以随时通过
this.player.setBitrateIndex(index) 切换其它码率,切换后码流自适应也随之关闭。10、开启平滑切换码率
在启动播放前,通过开启平滑切换码率,在播放过程中切换码率,可以达到无缝平滑切换不同清晰度。对比关闭平滑切换码率,切换过程比较耗时、体验更好,可以根据需求进行设置。
let config: TXVodPlayConfig = new TXVodPlayConfig();// 设为 true,可平滑切换码率, 设为 false 时,可提高多码率地址打开速度config.smoothSwitchBitrate = true;this.player.setConfig(config);
11、播放进度监听
点播播放中的进度信息分为:加载进度和播放进度,SDK 目前是以事件通知的方式将这两个进度实时通知出来的。
通过
onPlayEvent 接口监听播放器事件,进度通知会通过 VOD_PLAY_EVT_PLAY_PROGRESS 事件回调到您的应用程序。
this.player.setVodPlayCallback({onPlayEvent: (vodPlayer: TXVodPlayer, event: number, eventData?: Map<string, TXVodDef.ParamType>): void => {if (event == TXVodConstants.VOD_PLAY_EVT_PLAY_PROGRESS) {// 可播放时长,即加载进度, 单位是毫秒let playableDuration = eventData?.get(TXVodConstants.EVT_PLAYABLE_DURATION_MS) as number;// 播放进度, 单位是毫秒let progress = eventData?.get(TXVodConstants.EVT_PLAY_PROGRESS_MS) as number;// 视频总长, 单位是毫秒let duration = eventData?.get(TXVodConstants.EVT_PLAY_DURATION_MS) as number;}},onNetStatus: (player: TXVodPlayer, statusData: Map<string, TXVodDef.ParamType>): void => {}});
12、播放网速监听
通过
onNetStatus 接口监听播放器的网络状态,如:NET_STATUS_NET_SPEED。this.player.setVodPlayCallback({onPlayEvent: (vodPlayer: TXVodPlayer, event: number, eventData?: Map<string, TXVodDef.ParamType>): void => {},onNetStatus: (player: TXVodPlayer, statusData: Map<string, TXVodDef.ParamType>): void => {let netSpeed = statusData.get(TXVodConstants.NET_STATUS_NET_SPEED) as number;}});
13、获取视频分辨率
播放器 SDK 通过 URL 字符串播放视频,URL 中本身不包含视频信息。为获取相关信息,需要通过访问云端服务器加载到相关视频信息,因此 SDK 只能以事件通知的方式将视频信息发送到您的应用程序中。
可以通过下面两种方法获取分辨率信息:
方法1:通过
onNetStatus 的 NET_STATUS_VIDEO_WIDTH 和 NET_STATUS_VIDEO_HEIGHT 获取视频的宽和高。方法2:在收到播放器的 VOD_PLAY_EVT_VOD_PLAY_PREPARED 事件回调后,直接调用
getWidth() 和 getHeight() 获取当前宽高。this.player.setVodPlayCallback({onPlayEvent: (vodPlayer: TXVodPlayer, event: number, eventData?: Map<string, TXVodDef.ParamType>): void => {if (event == TXVodConstants.VOD_PLAY_EVT_VOD_PLAY_PREPARED) {// 获取视频宽高let width = vodPlayer.getWidth();let height = vodPlayer.getHeight();}},onNetStatus: (player: TXVodPlayer, statusData: Map<string, TXVodDef.ParamType>): void => {let width = statusData.get(TXVodConstants.NET_STATUS_VIDEO_WIDTH) as number;let height = statusData.get(TXVodConstants.NET_STATUS_VIDEO_HEIGHT) as number;}});
14、播放缓冲大小
在视频正常播放时,控制提前从网络缓冲的最大数据大小。如果不配置,则走播放器默认缓冲策略,保证流畅播放。
let config: TXVodPlayConfig = new TXVodPlayConfig();config.maxBufferSize = 10; // 播放时最大缓冲大小。单位:MBthis.player.setConfig(config);
15、视频本地缓存
在短视频播放场景中,视频文件的本地缓存是很刚需的一个特性,对于普通用户而言,一个已经看过的视频再次观看时,不应该再消耗一次流量。
格式支持:SDK 支持 HLS(m3u8) 和 MP4 两种常见点播格式的缓存功能。
开启时机:SDK 并不默认开启缓存功能,对于用户回看率不高的场景,也并不推荐您开启此功能。
开启方式:全局生效,在使用播放器开启。开启此功能需要配置两个参数:本地缓存目录及缓存大小。
import { TXVodGlobalSetting } from 'liteavsdk';// 设置播放引擎的全局缓存目录TXVodGlobalSetting.setCacheFolderPath(getContext().filesDir + "/txcache");// 设置播放引擎的全局缓存大小,单位 MBTXVodGlobalSetting.setMaxCacheSize(200);
16、外挂字幕
注意:
此功能需要申请播放器移动端高级版 License 后才支持。
播放器 SDK 支持添加和切换外挂字幕,现已支持 SRT 和 VTT 这两种格式的字幕。
实践:建议在
startVodPlay 之前添加字幕,在收到 VOD_PLAY_EVT_VOD_PLAY_PREPARED 事件后,调用 selectTrack 选择字幕。 添加字幕后,并不会主动加载字幕, 调用 selectTrack 后,才会加载字幕,字幕选择成功会有 VOD_PLAY_EVT_SELECT_TRACK_SUCCESS 事件回调。选择字幕后,字幕文本内容会通过 onSubtitleData 回调。步骤 1:添加外挂字幕
// 添加外挂字幕,传入字幕 url、字幕名称、字幕类型,建议在启动播放器前添加this.player.addSubtitleSource('https://example.com/subtitle.vtt','subtitleName',TXVodConstants.VOD_PLAY_MIMETYPE_TEXT_VTT);
步骤2:播放后切换字幕
// 开始播放视频后,选中添加的外挂字幕,在收到 VOD_PLAY_EVT_VOD_PLAY_PREPARED 事件后调用this.player.setVodPlayCallback({onPlayEvent: (vodPlayer: TXVodPlayer, event: number, eventData?: Map<string, TXVodDef.ParamType>): void => {if (event == TXVodConstants.VOD_PLAY_EVT_VOD_PLAY_PREPARED) {let trackInfoList: TXVodDef.TXTrackInfo[] = vodPlayer.getSubtitleTrackInfo();for (let tempInfo of trackInfoList) {if (tempInfo.name == 'subtitleName') {// 选中字幕vodPlayer.selectTrack(tempInfo.trackIndex);} else {// 其它字幕不需要的话,进行 deselectTrackvodPlayer.deselectTrack(tempInfo.trackIndex);}}}if (event == TXVodConstants.VOD_PLAY_EVT_SELECT_TRACK_SUCCESS) {// 轨道切换成功let trackIndex = eventData?.get(TXVodConstants.EVT_KEY_SELECT_TRACK_INDEX) as number;}},onNetStatus: (player: TXVodPlayer, statusData: Map<string, TXVodDef.ParamType>): void => {}});
步骤3:监听字幕文本内容
// 监听字幕数据回调this.player.setVodPlayCallback({onPlayEvent: (vodPlayer: TXVodPlayer, event: number, eventData?: Map<string, TXVodDef.ParamType>): void => {},onNetStatus: (player: TXVodPlayer, statusData: Map<string, TXVodDef.ParamType>): void => {},onSubtitleData: (player: TXVodPlayer, subtitleData: TXVodDef.TXVodSubtitleData): void => {// 字幕文本内容,可用于显示let subtitleText = subtitleData.subtitleText;}});
17、多音轨切换
注意:
此功能需要申请播放器移动端高级版 License 后才支持。
播放器 SDK 支持切换视频内置的多音轨。用法参见如下代码:
// 返回音频轨道信息列表let trackInfoList: TXVodDef.TXTrackInfo[] = this.player.getAudioTrackInfo();for (let tempInfo of trackInfoList) {if (tempInfo.trackIndex == 0) {// 通过判断 trackIndex 或者 name 切换到需要的音轨this.player.selectTrack(tempInfo.trackIndex);} else {// 不需要的音轨进行 deselectTrackthis.player.deselectTrack(tempInfo.trackIndex);}}
18、截图功能
播放器 SDK 支持在播放过程中截取当前视频帧。
// 功能使用流程:// 1、定义待渲染的 image 变量@State snapshotImage: image.PixelMap | null = null;// 2、设置截图回调this.player.setVodPlayCallback({onPlayEvent: (vodPlayer: TXVodPlayer, event: number, eventData?: Map<string, TXVodDef.ParamType>): void => {},onNetStatus: (player: TXVodPlayer, statusData: Map<string, TXVodDef.ParamType>): void => {},onSnapshotComplete: (player: TXVodPlayer, pixelMap?: image.PixelMap): void => {// 截图结果回调this.snapshotImage = pixelMap;}});// 3、调用截图方法// snapshotAsync 方法需传入 UIContext 和 XComponent 的 idthis.player.snapshotAsync(this.getUIContext(), this.nativeXComponentID);// 4、渲染截图结果if (this.snapshotImage) {Image(this.snapshotImage).width(`${this.surfaceSize.width}px`).height(`${this.surfaceSize.height}px`);}
进阶功能使用
1、视频预播放
步骤1:视频预播放使用
在短视频播放场景中,视频预播放功能对于流畅的观看体验很有帮助:在观看当前视频的同时,在后台加载即将要播放的下一个视频 ,这样一来,当用户真正切换到下一个视频时,已经不需要从头开始加载了,而是可以做到立刻播放。
这就是视频播放中无缝切换的背后技术支撑,您可以使用 TXVodPlayer 中的 setAutoPlay 开关来实现这个功能,具体做法如下:

// 播放视频 A: 如果将 autoPlay 设置为 true,那么 startVodPlay 调用会立刻开始视频的加载和播放let urlA = 'http://1252463788.vod2.example.com/xxxxx/v.f10.mp4';this.playerA.setAutoPlay(true);this.playerA.startVodPlay(TXVodDef.TXPlayInfoParams.createWithUrl(urlA));// 在播放视频 A 的同时,预加载视频 B,做法是将 setAutoPlay 设置为 falselet urlB = 'http://1252463788.vod2.example.com/xxxxx/v.f20.mp4';this.playerB.setAutoPlay(false);this.playerB.startVodPlay(TXVodDef.TXPlayInfoParams.createWithUrl(urlB)); // 不会立刻开始播放,而只会开始加载视频
等到视频 A 播放结束,自动(或者用户手动切换到)视频 B 时,调用 resume 函数即可实现立刻播放。
注意:
设置了 autoPlay 为 false 之后,调用 resume 之前需要保证视频 B 已准备完成,即需要在监听到视频 B 的 VOD_PLAY_EVT_VOD_PLAY_PREPARED(2013,播放器已准备完成,可以播放)事件后调用。
this.playerA.setVodPlayCallback({onPlayEvent: (vodPlayer: TXVodPlayer, event: number, eventData?: Map<string, TXVodDef.ParamType>): void => {// 在视频 A 播放结束的时候,直接启动视频 B 的播放,可以做到无缝切换if (event == TXVodConstants.VOD_PLAY_EVT_PLAY_END) {this.playerA.stopPlay(true);this.playerB.resume();}},onNetStatus: (player: TXVodPlayer, statusData: Map<string, TXVodDef.ParamType>): void => {}});
步骤2:视频预播放缓冲配置
设置较大的缓冲可以更好的应对网络的波动,达到流畅播放的目的。
设置较小的缓冲可以帮助节省流量消耗。
预播放缓冲大小
此接口针对预加载场景(即在视频启播前,且设置 player 的 AutoPlay 为 false),用于控制启播前阶段的最大缓冲大小。
let config: TXVodPlayConfig = new TXVodPlayConfig();config.maxPreloadSize = 2; // 预播放最大缓冲大小。单位:MB, 根据业务情况设置去节省流量this.player.setConfig(config);
播放缓冲大小
在视频正常播放时,控制提前从网络缓冲的最大数据大小。如果不配置,则走播放器默认缓冲策略,保证流畅播放。
let config: TXVodPlayConfig = new TXVodPlayConfig();config.maxBufferSize = 10; // 播放时最大缓冲大小。单位:MBthis.player.setConfig(config);
2、视频预下载
不需要创建播放器实例,预先下载视频部分内容,使用播放器时,可以加快视频启播速度,提供更好的播放体验。
注意:
视频预下载会占用下载带宽和线程资源,建议进行队列控制,并发个数控制在3个以内。
使用示例
通过媒资 URL 预下载:
import { TXVodPreloadManager, ITXVodPreloadCallback } from 'liteavsdk';// 设置播放引擎的全局缓存目录和缓存大小TXVodGlobalSetting.setCacheFolderPath(getContext().filesDir);TXVodGlobalSetting.setMaxCacheSize(200);// 获取预下载管理器实例let preloadManager = TXVodPreloadManager.getInstance(getContext());let playUrl = 'http://****';let preloadSizeMB = 3; // 预下载大小,单位 MBlet preferredResolution = 720 * 1280; // 期望分辨率// 启动预下载let taskId = preloadManager.startPreloadUrl(playUrl, preloadSizeMB, preferredResolution, null, {onComplete: (taskId: number, url: string) => {console.log('preload complete! taskId:' + taskId + ' url: ' + url);},onError: (taskId: number, url: string, code: number, msg: string): void => {console.log('preload error! taskId: ' + taskId + ' url: ' + url + ' errorcode: ' + code + ' errmsg: ' + msg);}});// 取消预下载preloadManager.stopPreload(taskId);
3、视频下载
视频下载支持用户在有网络的条件下下载视频,随后在无网络的环境下观看。同时播放器 SDK 提供本地加密能力,下载后的本地视频仍为加密状态,仅可通过指定播放器对视频进行解密播放,可有效防止下载后视频的非法传播,保护视频安全。
由于 HLS 流媒体无法直接保存到本地,因此也无法通过播放本地文件的方式实现 HLS 下载到本地后播放,对于该问题,您可以通过基于
TXVodDownloadManager 的视频下载方案实现 HLS 的离线播放。说明:
视频下载支持下载 MP4 和 HLS 视频,对应嵌套 HLS 视频,需要指定偏好清晰度(preferredResolution)。
步骤1:准备工作
TXVodDownloadManager 被设计为单例,因此您不能创建多个下载对象。用法如下:import { TXVodDownloadManager, TXVodDownloadDataSource, TXVodDownloadMediaInfo, ITXVodDownloadCallback } from 'liteavsdk';// 设置缓存路径TXVodGlobalSetting.setCacheFolderPath(getContext().filesDir);
步骤2: 开始下载
开始下载有 FileId 和 URL 两种方式,具体操作如下:
Fileid 下载至少需要传入 AppID、 Fileid 和 qualityId。带签名视频需传入 pSign,userName 不传入具体值时,默认为“default”。
// QUALITY_240P 240p// QUALITY_360P 360P// QUALITY_480P 480p// QUALITY_540P 540p// QUALITY_720P 720p// QUALITY_1080P 1080p// QUALITY_2K 2k// QUALITY_4K 4klet downloadManager = TXVodDownloadManager.getInstance(getContext());// 设置下载回调downloadManager.setDownloadCallback({onDownloadStart: (mediaInfo: TXVodDownloadMediaInfo): void => {console.log('download start');},onDownloadProgress: (mediaInfo: TXVodDownloadMediaInfo): void => {console.log('download progress: ' + mediaInfo.getProgress());},onDownloadStop: (mediaInfo: TXVodDownloadMediaInfo): void => {console.log('download stop');},onDownloadFinish: (mediaInfo: TXVodDownloadMediaInfo): void => {console.log('download finish');},onDownloadError: (mediaInfo: TXVodDownloadMediaInfo, error: number, reason: string): void => {console.log('download error: ' + error + ' reason: ' + reason);}});// 通过 FileId 下载let dataSource = new TXVodDownloadDataSource(1252463788, '4564972819220421305', TXVodDownloadDataSource.QUALITY_720P, 'pSignxxxx');downloadManager.startDownloadDataSource(dataSource);
至少需要传入下载地址 URL。preferredResolution 取值为视频分辨率宽和高的乘积:preferredResolution = width × height。 如果是嵌套 HLS 格式,preferredResolution 不传入具体值时,默认值为921600。
let downloadManager = TXVodDownloadManager.getInstance(getContext());// 通过 URL 下载let mediaInfo = downloadManager.startDownloadUrl('http://1500005830.vod2.example.com/43843ec0vodtranscq1500005830/00eb06a88602268011437356984/video_10_0.m3u8', 720 * 1280);
步骤3:任务信息
在接收任务信息前,需要先设置回调 listener。
downloadManager.setDownloadCallback({onDownloadStart: (mediaInfo: TXVodDownloadMediaInfo): void => {// 任务开始,表示 SDK 已经开始下载},onDownloadProgress: (mediaInfo: TXVodDownloadMediaInfo): void => {// 任务进度,下载过程中,SDK 会频繁回调此接口// 可以通过 mediaInfo.getProgress() 获取当前进度},onDownloadStop: (mediaInfo: TXVodDownloadMediaInfo): void => {// 任务停止,当您调用 stopDownload 停止下载,收到此消息表示停止成功},onDownloadFinish: (mediaInfo: TXVodDownloadMediaInfo): void => {// 下载完成,收到此回调表示已全部下载。此时下载文件可以给 TXVodPlayer 播放},onDownloadError: (mediaInfo: TXVodDownloadMediaInfo, error: number, reason: string): void => {// 下载错误,下载过程中遇到网络断开会回调此接口,同时下载任务停止}});
步骤4:中断下载
停止下载请调用
downloadManager.stopDownload() 方法,参数为开始下载传入的 TXVodDownloadMediaInfo 对象。SDK 支持断点续传,当下载目录没有发生改变时,下次下载同一个文件时会从上次停止的地方重新开始。downloadManager.stopDownload(mediaInfo);
步骤5:管理下载
获取所有下载列表信息:
// 获取所有下载列表信息,耗时操作,建议在 worker 线程中调用let downloadInfoList: TXVodDownloadMediaInfo[] = downloadManager.syncGetDownloadMediaInfoList();
获取某个 FileId 相关下载信息:
// 获取某个视频相关下载信息let mediaInfo = downloadManager.syncGetDownloadMediaInfoByFileId(1500005830, '8602268011437356984', TXVodDownloadDataSource.QUALITY_720P);if (mediaInfo) {let duration = mediaInfo.getDuration(); // 获取总时长let playableDuration = mediaInfo.getPlayableDuration(); // 获取已下载的可播放时长let progress = mediaInfo.getProgress(); // 获取下载进度let playPath = mediaInfo.getPlayPath(); // 获取离线播放路径,传给播放器即可离线播放let downloadState = mediaInfo.getDownloadState(); // 获取下载状态}
获取某个 URL 相关下载信息:
let mediaInfo = downloadManager.syncGetDownloadMediaInfoByUrl('http://1253131631.vod2.example.com/xxx/playlist.m3u8');
删除下载信息:
// 删除下载信息,不支持删除正在下载的任务let result = downloadManager.deleteDownloadMediaInfo(mediaInfo);
步骤6: 播放离线视频
通过以上步骤获取到的 mediaInfo 的 downloadState 为下载完成状态,并且 mediaInfo 的 playPath 有值,则代表获取视频缓存完成,可以直接传给 player 进行播放,代码如下:
let cacheVideoUrl = mediaInfo.getPlayPath();let playInfoParams = TXVodDef.TXPlayInfoParams.createWithUrl(cacheVideoUrl);this.player.startVodPlay(playInfoParams);
4、加密播放
视频加密方案主要用于在线教育等需要对视频版权进行保护的场景。如果要对您的视频资源进行加密保护,就不仅需要在播放器上做改造,还需要对视频源本身进行加密转码,亦需要您的后台和终端研发工程师都参与其中。在 视频加密解决方案 中您会了解到全部细节内容。
在腾讯云控制台提取到 appId、加密视频的 fileId 和 psign 后,可以通过下面的方式进行播放:
// psign 即播放器签名,签名介绍和生成方式参见链接:https://cloud.tencent.com/document/product/266/42436let playInfoParams = TXVodDef.TXPlayInfoParams.createWithFileId(<appId>, '<fileId>', '<psign>');this.player.startVodPlay(playInfoParams);
5、播放器配置
在调用 startVodPlay 之前可以通过 setConfig 对播放器进行参数配置,例如:设置播放器连接超时时间、设置进度回调间隔、设置缓存文件个数等配置。使用示例:
let config: TXVodPlayConfig = new TXVodPlayConfig();// 如果不配置 preferredResolution,则在播放多码率视频的时候优先播放 720 * 1280 分辨率的码率config.preferredResolution = 720 * 1280;config.enableAccurateSeek = true; // 设置是否精确 seek,默认 trueconfig.progressInterval = 200; // 设置进度回调间隔,单位毫秒config.maxBufferSize = 50; // 最大预加载大小,单位 MBthis.player.setConfig(config);
启播前指定分辨率
播放 HLS 的多码率视频源,如果您提前知道视频流的分辨率信息,可以在启播前优先指定播放的视频分辨率。 播放器会查找小于或等于偏好分辨率的流进行启播,启播后没有必要再通过 setBitrateIndex 切换到需要的码流。
let config: TXVodPlayConfig = new TXVodPlayConfig();// 传入参数为视频宽和高的乘积(宽 * 高),可以自定义值传入,默认 720 * 1280config.preferredResolution = 720 * 1280;this.player.setConfig(config);
启播前指定媒资类型
当提前知道播放的媒资类型时,可以通过配置
TXVodPlayConfig.mediaType 减少播放器 SDK 内部播放类型探测,提升启播速度。let config: TXVodPlayConfig = new TXVodPlayConfig();config.mediaType = TXVodConstants.MEDIA_TYPE_FILE_VOD; // 用于提升 MP4 启播速度// config.mediaType = TXVodConstants.MEDIA_TYPE_HLS_VOD; // 用于提升 HLS 启播速度this.player.setConfig(config);
设置播放进度回调时间间隔
let config: TXVodPlayConfig = new TXVodPlayConfig();config.progressInterval = 200; // 设置进度回调间隔,单位毫秒this.player.setConfig(config);
播放器事件监听
您可以通过
TXVodPlayer 的 setVodPlayCallback 来监听播放器的播放事件,来向您的应用程序同步信息。播放事件通知(onPlayEvent)
事件 ID | 数值 | 含义说明 |
VOD_PLAY_EVT_PLAY_BEGIN | 2004 | 视频播放开始。 |
VOD_PLAY_EVT_PLAY_PROGRESS | 2005 | 视频播放进度,会通知当前播放进度、加载进度和总体时长。 |
VOD_PLAY_EVT_PLAY_LOADING | 2007 | 视频播放 loading,如果能够恢复,之后会有 LOADING_END 事件。 |
VOD_PLAY_EVT_VOD_LOADING_END | 2014 | 视频播放 loading 结束,视频继续播放。 |
VOD_PLAY_EVT_SEEK_COMPLETE | 2019 | Seek 完成。 |
结束事件
事件 ID | 数值 | 含义说明 |
VOD_PLAY_EVT_PLAY_END | 2006 | 视频播放结束。 |
VOD_PLAY_ERR_NET_DISCONNECT | -2301 | 网络断连,且经多次重连后不能恢复,更多重试请自行重启播放。 |
VOD_PLAY_ERR_HLS_KEY | -2305 | HLS 解密 key 获取失败。 |
警告事件
如下的这些事件您可以不用关心,它只是用来告知您 SDK 内部的一些事件。
事件 ID | 数值 | 含义说明 |
VOD_PLAY_WARNING_RECONNECT | 2103 | 网络断连,已启动自动重连(重连超过三次就直接抛出 VOD_PLAY_ERR_NET_DISCONNECT 了)。 |
VOD_PLAY_WARNING_HW_ACCELERATION_FAIL | 1103 | 硬解启动失败,采用软解。 |
连接事件
连接服务器的事件,主要用于测定和统计服务器连接时间:
事件 ID | 数值 | 含义说明 |
VOD_PLAY_EVT_VOD_PLAY_PREPARED | 2013 | 播放器已准备完成,可以播放。设置了 autoPlay 为 false 之后,需要在收到此事件后,调用 resume 才会开始播放。 |
VOD_PLAY_EVT_RCV_FIRST_I_FRAME | 2003 | 网络接收到首个可渲染的视频数据包(IDR)。 |
VOD_PLAY_EVT_FIRST_VIDEO_PACKET | 2017 | 收到首帧数据包事件。 |
画面事件
以下事件用于获取画面变化信息:
事件 ID | 数值 | 含义说明 |
VOD_PLAY_EVT_CHANGE_RESOLUTION | 2009 | 视频分辨率改变。 |
VOD_PLAY_EVT_CHANGE_ROTATION | 2011 | MP4 视频旋转角度。 |
视频信息事件
事件 ID | 数值 | 含义说明 |
VOD_PLAY_EVT_GET_PLAYINFO_SUCC | 2010 | 成功获取播放文件信息。 |
如果通过 fileId 方式播放且请求成功,SDK 会将一些请求信息通知到上层。您可以在收到
VOD_PLAY_EVT_GET_PLAYINFO_SUCC 事件后,解析 eventData 获取视频信息。视频信息 | 含义说明 |
EVT_PLAY_COVER_URL | 视频封面地址。 |
EVT_PLAY_URL | 视频播放地址。 |
EVT_PLAY_DURATION | 视频时长。 |
EVT_TIME | 事件发生时间。 |
EVT_UTC_TIME | UTC 时间。 |
EVT_DESCRIPTION | 事件说明。 |
EVT_PLAY_NAME | 视频名称。 |
EVT_IMAGESPRIT_WEBVTTURL | 雪碧图 web vtt 描述文件下载 URL。 |
EVT_IMAGESPRIT_IMAGEURL_LIST | 雪碧图图片下载 URL。 |
EVT_DRM_TYPE | 加密类型。 |
通过 onPlayEvent 获取视频播放过程信息示例:
this.player.setVodPlayCallback({onPlayEvent: (vodPlayer: TXVodPlayer, event: number, eventData?: Map<string, TXVodDef.ParamType>): void => {switch (event) {case TXVodConstants.VOD_PLAY_EVT_PLAY_BEGIN:// 视频播放开始break;case TXVodConstants.VOD_PLAY_EVT_PLAY_PROGRESS:// 播放进度更新let currentPositionMs = eventData?.get(TXVodConstants.EVT_PLAY_PROGRESS_MS) as number;let durationMs = eventData?.get(TXVodConstants.EVT_PLAY_DURATION_MS) as number;break;case TXVodConstants.VOD_PLAY_EVT_PLAY_END:// 视频播放结束break;case TXVodConstants.VOD_PLAY_EVT_CHANGE_RESOLUTION:// 视频分辨率改变let videoWidth = eventData?.get(TXVodConstants.EVT_PARAM1) as number;let videoHeight = eventData?.get(TXVodConstants.EVT_PARAM2) as number;break;}},onNetStatus: (player: TXVodPlayer, statusData: Map<string, TXVodDef.ParamType>): void => {}});
播放状态反馈(onNetStatus)
状态反馈每0.5秒都会被触发一次,目的是实时反馈当前的推流器状态,它就像汽车的仪表盘,可以告知您目前 SDK 内部的一些具体情况,以便您能对当前视频播放状态等有所了解。
评估参数 | 含义说明 |
NET_STATUS_CPU_USAGE | 当前瞬时 CPU 使用率。 |
NET_STATUS_VIDEO_WIDTH | 视频分辨率 - 宽。 |
NET_STATUS_VIDEO_HEIGHT | 视频分辨率 - 高。 |
NET_STATUS_NET_SPEED | 当前的网络数据接收速度,单位 Kbps。 |
NET_STATUS_VIDEO_FPS | 当前流媒体的视频帧率。 |
NET_STATUS_VIDEO_BITRATE | 当前流媒体的视频码率,单位 Kbps。 |
NET_STATUS_AUDIO_BITRATE | 当前流媒体的音频码率,单位 Kbps。 |
NET_STATUS_VIDEO_CACHE | 缓冲区(jitterbuffer)大小,缓冲区当前长度为0,说明离卡顿就不远了。 |
NET_STATUS_SERVER_IP | 连接的服务器 IP。 |
通过 onNetStatus 获取视频播放过程信息示例:
this.player.setVodPlayCallback({onPlayEvent: (vodPlayer: TXVodPlayer, event: number, eventData?: Map<string, TXVodDef.ParamType>): void => {},onNetStatus: (player: TXVodPlayer, statusData: Map<string, TXVodDef.ParamType>): void => {let videoWidth = statusData.get(TXVodConstants.NET_STATUS_VIDEO_WIDTH) as number;let videoHeight = statusData.get(TXVodConstants.NET_STATUS_VIDEO_HEIGHT) as number;let netSpeed = statusData.get(TXVodConstants.NET_STATUS_NET_SPEED) as number;}});