点播场景

最近更新时间:2026-04-21 17:50:01

我的收藏

阅读对象

本文档部分内容为腾讯云专属能力,使用前请开通 腾讯云 相关服务,未注册用户可注册账号 免费试用

通过本文您可以学会

如何集成腾讯云视立方鸿蒙播放器 SDK。
如何使用播放器 SDK 进行点播播放。
如何使用播放器 SDK 底层能力实现更多功能。

SDK 集成

步骤1:集成 SDK 开发包

下载和集成 SDK 开发包,请参考 SDK 集成指引

步骤2:创建 Player

import { TXVodPlayer, TXVodConstants, TXVodDef, ITXVodPlayCallback } from 'liteavsdk';

// 创建播放器实例
this.player = new TXVodPlayer(getContext());

步骤3:设置渲染视图

@Entry
@Component
struct 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 支持两种播放模式,您可以根据需要自行选择:
通过 URL 方式
通过 FileId 方式
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/42436
let 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 ~ 100
this.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:通过 onNetStatusNET_STATUS_VIDEO_WIDTHNET_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; // 播放时最大缓冲大小。单位:MB
this.player.setConfig(config);

15、视频本地缓存

在短视频播放场景中,视频文件的本地缓存是很刚需的一个特性,对于普通用户而言,一个已经看过的视频再次观看时,不应该再消耗一次流量。
格式支持:SDK 支持 HLS(m3u8) 和 MP4 两种常见点播格式的缓存功能。
开启时机:SDK 并不默认开启缓存功能,对于用户回看率不高的场景,也并不推荐您开启此功能。
开启方式:全局生效,在使用播放器开启。开启此功能需要配置两个参数:本地缓存目录及缓存大小。
import { TXVodGlobalSetting } from 'liteavsdk';

// 设置播放引擎的全局缓存目录
TXVodGlobalSetting.setCacheFolderPath(getContext().filesDir + "/txcache");
// 设置播放引擎的全局缓存大小,单位 MB
TXVodGlobalSetting.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 {
// 其它字幕不需要的话,进行 deselectTrack
vodPlayer.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 {
// 不需要的音轨进行 deselectTrack
this.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 的 id
this.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:视频预播放使用

在短视频播放场景中,视频预播放功能对于流畅的观看体验很有帮助:在观看当前视频的同时,在后台加载即将要播放的下一个视频 ,这样一来,当用户真正切换到下一个视频时,已经不需要从头开始加载了,而是可以做到立刻播放。
预播放视频会有很好的秒开效果,但有一定的性能开销,会占用下载带宽和线程资源。建议视频预播放并发个数控制在3个以内。如果业务同时有较多的视频预加载需求,建议结合 视频预下载 一起使用。
这就是视频播放中无缝切换的背后技术支撑,您可以使用 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 设置为 false
let 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; // 播放时最大缓冲大小。单位:MB
this.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; // 预下载大小,单位 MB
let 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 方式
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 4k
let 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/42436
let 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,默认 true
config.progressInterval = 200; // 设置进度回调间隔,单位毫秒
config.maxBufferSize = 50; // 最大预加载大小,单位 MB
this.player.setConfig(config);
启播前指定分辨率
播放 HLS 的多码率视频源,如果您提前知道视频流的分辨率信息,可以在启播前优先指定播放的视频分辨率。 播放器会查找小于或等于偏好分辨率的流进行启播,启播后没有必要再通过 setBitrateIndex 切换到需要的码流。
let config: TXVodPlayConfig = new TXVodPlayConfig();
// 传入参数为视频宽和高的乘积(宽 * 高),可以自定义值传入,默认 720 * 1280
config.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);

播放器事件监听

您可以通过 TXVodPlayersetVodPlayCallback 来监听播放器的播放事件,来向您的应用程序同步信息。

播放事件通知(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;
}
});