SuperPlayerViewComponent 组件作为视频渲染容器:import { SuperPlayerViewComponent } from 'react-native-superplayer';import { View, StyleSheet, Dimensions } from 'react-native';const { width: SCREEN_WIDTH } = Dimensions.get('window');const VIDEO_HEIGHT = (SCREEN_WIDTH * 9) / 16; // 16:9 比例function PlayerScreen() {const handleViewReady = (viewId: string) => {console.log('播放器视图已就绪:', viewId);// 在这里创建播放器实例并绑定视图};return (<View style={styles.container}><SuperPlayerViewComponentviewId="my_player_view"style={styles.player}onReady={handleViewReady}/></View>);}const styles = StyleSheet.create({container: {flex: 1,},player: {width: SCREEN_WIDTH,height: VIDEO_HEIGHT,backgroundColor: '#000',},});
onReady 回调中创建 TXVodPlayer 实例并绑定视图:import { TXVodPlayer, TXVodConstants } from 'react-native-superplayer';import { useRef, useCallback } from 'react';function PlayerScreen() {const playerRef = useRef<TXVodPlayer | null>(null);const handleViewReady = useCallback((viewId: string) => {// 创建播放器实例const player = new TXVodPlayer();// 绑定视图player.setPlayerView(viewId);// 设置事件监听player.setListener({onPlayEvent: (event, param) => {switch (event) {case TXVodConstants.VOD_PLAY_EVT_PLAY_BEGIN:console.log('播放开始');break;case TXVodConstants.VOD_PLAY_EVT_PLAY_END:console.log('播放结束');break;// 更多事件处理...}},});playerRef.current = player;}, []);// ... 其他代码}
startPlay 函数即可。// 播放视频 URLplayer.startPlay('https://example.com/video.mp4');
// psign 即播放器签名player.startPlayWithFileId(1500005830, // appId'387702307091793695', // fileId'your_psign' // 播放签名(可选));
VOD_PLAY_ERR_GET_PLAYINFO_FAIL 事件,反之收到 VOD_PLAY_EVT_VOD_PLAY_PREPARED 表示请求成功。import { useEffect } from 'react';function PlayerScreen() {const playerRef = useRef<TXVodPlayer | null>(null);useEffect(() => {return () => {// 组件卸载时销毁播放器if (playerRef.current) {playerRef.current.destroy();playerRef.current = null;}};}, []);// ... 其他代码}
startPlay 之前,否则可能会产生内存泄漏以及闪屏问题。// 停止播放player.stop(true);
player.pause();
player.resume();
player.stop(true);
// 跳转到指定时间点(秒)// 第二个参数 accurateSeek:true=精准 Seek(较耗时),false=快速 Seekplayer.seek(30, true); // 精准跳转到 30 秒player.seek(60, false); // 快速跳转到 60 秒
startPlay 之前,支持从指定时间开始播放。// 设置起播时间(需在 startPlay 前调用)player.setStartTime(10); // 从第 10 秒开始播放player.startPlay(url);
setRate 设置点播播放速率来完成,支持快速与慢速播放,如 0.5X、1.0X、1.2X、2X 等。// 设置 1.2 倍速播放player.setRate(1.2);
// 设置循环播放player.setLoop(true);// 获取当前循环播放状态const isLooping = player.isLoop();
// 设置静音,true 表示开启静音,false 表示关闭静音player.setMute(true);// 设置音量(0-100)player.setVolume(50);
player.stop(true);player.enableHardwareDecode(true);player.startPlay(url);
// 在收到播放器 VOD_PLAY_EVT_VOD_PLAY_PREPARED 事件调用 getSupportedBitrates 才会有值返回const bitrateList = player.getSupportedBitrates();// 返回 BitrateItem[]// [{ index: 0, width: 1920, height: 1080, bitrate: 2000000 }, ...]const index = bitrateList[0].index; // 指定要播的码率下标player.setBitrateIndex(index); // 切换码率到想要的清晰度// 获取当前清晰度索引const currentIndex = player.getBitrateIndex();
setBitrateIndex(index) 切换码率。切换过程中,会重新拉取另一条流的数据,SDK 针对腾讯云的多码率文件做过优化,可以做到切换无卡顿。// 限制自适应播放的最高码率(单位 Kbps)player.setAutoMaxBitrate(2000);
player.setBitrateIndex(-1); // index 参数传入 -1
setBitrateIndex(index) 切换其它码率,切换后码流自适应也随之关闭。const config: TXVodPlayConfig = {smoothSwitchBitrate: true, // 设为 true,可平滑切换码率};player.setConfig(config);
setListener 接口监听播放器事件,进度通知会通过 VOD_PLAY_EVT_PLAY_PROGRESS 事件回调到您的应用程序。player.setListener({onPlayEvent: (event, param) => {if (event === TXVodConstants.VOD_PLAY_EVT_PLAY_PROGRESS) {// 当前播放进度(毫秒)const currentMs = param[TXVodConstants.EVT_PLAY_PROGRESS_MS] ?? 0;// 视频总时长(毫秒)const durationMs = param[TXVodConstants.EVT_PLAY_DURATION_MS] ?? 0;// 可播放时长(毫秒),即加载进度const playableMs = param[TXVodConstants.EVT_PLAYABLE_DURATION_MS] ?? 0;console.log(`播放进度: ${currentMs / 1000}s / ${durationMs / 1000}s`);}},});
setListener 接口的 onNetStatus 回调监听播放器的网络状态。player.setListener({onNetStatus: (param) => {const speed = param.NET_SPEED; // 网速(kbps)const vBitrate = param.VIDEO_BITRATE; // 视频码率const aBitrate = param.AUDIO_BITRATE; // 音频码率const fps = param.VIDEO_FPS; // 帧率},// ...});
onNetStatus 的 VIDEO_WIDTH 和 VIDEO_HEIGHT 获取视频的宽和高。VOD_PLAY_EVT_VOD_PLAY_PREPARED 事件回调后,直接调用 getWidth() 和 getHeight() 获取当前宽高。player.setListener({onNetStatus: (param) => {const w = param.VIDEO_WIDTH;const h = param.VIDEO_HEIGHT;},// ...});// 获取视频宽高,需要在收到播放器的 VOD_PLAY_EVT_VOD_PLAY_PREPARED 事件回调后才返回值const width = player.getWidth();const height = player.getHeight();
// 当前播放时间(秒)const currentTime = player.getCurrentPlaybackTime();// 视频总时长(秒)const duration = player.getDuration();// 可播放时长(秒,已缓冲部分)const playableDuration = player.getPlayableDuration();// 缓冲时长(秒)const bufferDuration = player.getBufferDuration();// 视频宽度const width = player.getWidth();// 视频高度const height = player.getHeight();// 是否正在播放const isPlaying = player.isPlaying();
const config: TXVodPlayConfig = {maxBufferSize: 10, // 播放时最大缓冲大小。单位:MB};player.setConfig(config);
import { RNTXPlayerGlobalSetting } from 'react-native-superplayer';// 设置播放引擎的全局缓存目录RNTXPlayerGlobalSetting.setCacheFolderPath('txcache');// 设置最大缓存大小(MB)RNTXPlayerGlobalSetting.setMaxCacheSize(200);
// 截取当前帧,返回图片本地路径const imagePath = await player.snapshot();console.log('截图保存至:', imagePath);// 也可通过回调获取player.setListener({onSnapshot: (path) => {console.log('截图路径:', path);},// ...});
import { TXVodConstants } from 'react-native-superplayer';// 铺满模式(裁剪画面,无黑边)player.setRenderMode(TXVodConstants.RENDER_MODE_FULL_FILL_SCREEN);// 适应模式(等比缩放,可能有黑边)player.setRenderMode(TXVodConstants.RENDER_MODE_ADJUST_RESOLUTION);
// 设置画面旋转角度(0、90、180、270)player.setRenderRotation(90);
// 开启/关闭镜像player.setMirror(true);
startPlay 之前添加字幕,在收到 VOD_PLAY_EVT_VOD_PLAY_PREPARED 事件后,调用 selectTrack 选择字幕。字幕文本内容会通过 onSubtitleData 事件回调,字幕的显示需要业务方自行处理。import { SubtitleMimeType } from 'react-native-superplayer';// 【重要】必须在 startPlay 之前调用player.addSubtitleSource('https://example.com/subtitle_cn.srt', // 字幕 URL'Chinese', // 字幕名称(多条字幕 name 必须唯一)SubtitleMimeType.SRT // 字幕格式:0=SRT, 1=VTT);player.addSubtitleSource('https://example.com/subtitle_en.vtt','English',SubtitleMimeType.VTT);// 然后开始播放player.startPlay(videoUrl);
// 【重要】必须设置 extInfoMap['450'] = 0 才能收到 onSubtitleData 回调player.setConfig({extInfoMap: {'450': 0, // 开启字幕文本回调},});player.setListener({onSubtitleData: (data) => {// data.subtitleData: 字幕文本(空串表示清屏)// data.trackIndex: 当前字幕轨道索引console.log('字幕:', data.subtitleData);},// ...});
// 获取字幕轨道列表const subtitleTracks = player.getSubtitleTrackInfo();// 选中指定字幕轨道player.selectTrack(subtitleTracks[0].trackIndex);// 取消选中(关闭字幕)player.deselectTrack(subtitleTracks[0].trackIndex);
// 获取音频轨道列表const audioTracks = player.getAudioTrackInfo();// 切换音轨player.selectTrack(audioTracks[1].trackIndex);// TXTrackInfo 结构interface TXTrackInfo {trackIndex: number; // 轨道索引trackType: number; // 轨道类型:1=视频, 2=音频, 3=字幕name: string; // 轨道名称isSelected: boolean; // 是否选中isExclusive: boolean; // 是否互斥isInternal: boolean; // 是否内嵌(false=外挂)}
TXVodPlayer.bundle 里的内置资源,必须在编译前手动将其加入 Xcode 工程,不要修改 bundle 名称或其内部任何资源名,否则会导致无缝切换画中画失败。

setAutoPictureInPictureEnabled(true) 自动画中画时,用户需在系统设置中提前打开:
AndroidManifest.xml 中已声明 SYSTEM_ALERT_WINDOW 权限(SDK 自身已声明,引用 SDK 后无需额外配置)。import { TXVodPlayer } from 'react-native-superplayer';const code = TXVodPlayer.isDeviceSupportPip();// 返回值:// 0 = 支持(Android 含已授权)// -101 = Android 无悬浮窗权限// -201 = iOS 设备或系统版本不支持// 其它 = 平台相关错误码,详见错误码表
// 跳转到系统授权页,让用户手动开启悬浮窗权限TXVodPlayer.requestOverlayPermission();
// 进入画中画player.enterPictureInPictureMode();// 退出画中画player.exitPictureInPictureMode();
import { Platform } from 'react-native';import { TXVodPlayer } from 'react-native-superplayer';const handleEnterPip = () => {const player = playerRef.current;if (!player) return;if (Platform.OS === 'android') {const code = TXVodPlayer.isDeviceSupportPip();if (code !== 0) {TXVodPlayer.requestOverlayPermission();return;}}player.enterPictureInPictureMode();};
// 开启后:// - iOS:调用即可,系统在 App 切后台时自动进入画中画// - Android:SDK 不监听 App 生命周期,业务侧需用 AppState 自行监听player.setAutoPictureInPictureEnabled(true);
import { useEffect } from 'react';import { AppState, Platform } from 'react-native';useEffect(() => {if (Platform.OS !== 'android' || !autoPipEnabled) return;const sub = AppState.addEventListener('change', (next) => {const player = playerRef.current;if (!player) return;if (next === 'background' && player.isPlaying()) {player.enterPictureInPictureMode();} else if (next === 'active') {player.exitPictureInPictureMode();}});return () => sub.remove();}, [autoPipEnabled]);
import type { TXPipListener } from 'react-native-superplayer';player.setPipListener({onPipStart: () => {console.log('画中画已开启');},onPipStop: () => {console.log('画中画已关闭');},onPipRestore: () => {// 用户点击悬浮窗内恢复按钮console.log('用户点击恢复按钮');},onPipError: (code, message) => {console.warn(`画中画错误 code=${code} msg=${message ?? ''}`);},});// 移除监听player.setPipListener(null);
段位 | 平台 |
0 | 通用 — 无错误。 |
-1xx | Android 专属(悬浮窗实现)。 |
-2xx | iOS 专属(系统 PiP 实现)。 |
错误码 | 含义 | SDK 行为 | 业务建议 |
-101 | 缺少悬浮窗权限。 | 自动跳转系统授权页。 | 引导用户开权限,返回后重新调用 enterPictureInPictureMode()。 |
-102 | 找不到 playerId 对应的播放器实例。 | 直接返回。 | 检查是否过早 destroy 了 player。 |
-103 | WindowManager.addView 失败。 | 自动 cleanup 资源。 | 上报日志 + 提示用户重试。 |
错误码 | 含义 | 触发场景 |
-201 | 设备或系统版本不支持 PiP。 | isDeviceSupportPip() 同步预检使用。 |
-206 | 找不到 playerId 对应的播放器实例。 | RN 层校验,业务过早 destroy player 时触发。 |
-200 | 来自 SDK 的 PiP 错误(统一码)。 | 所有 AVPictureInPictureController 抛出的错误,具体错误类型通过 message 透传。 |
destroy(),否则悬浮窗会同步关闭。import {RNTXPlayerGlobalSetting,TXVodPreloadManager,type TXPlayInfoParams,} from 'react-native-superplayer';// 【重要】必须先设置缓存目录和大小,全局设置一次即可RNTXPlayerGlobalSetting.setCacheFolderPath('txcache');RNTXPlayerGlobalSetting.setMaxCacheSize(500); // 500MB// 添加回调监听const removeComplete = TXVodPreloadManager.addCompleteListener((event) => {console.log('预下载完成:', event.taskId, event.url);});const removeError = TXVodPreloadManager.addErrorListener((event) => {console.error('预下载失败:', event.code, event.message);});// 启动预下载const params: TXPlayInfoParams = {url: 'https://example.com/video.mp4',};const taskId = await TXVodPreloadManager.startPreload(params, // 预下载参数10, // 预下载大小(MB)921600 // 期望分辨率(1280×720 = 921600),不指定传 -1);// 停止预下载TXVodPreloadManager.stopPreload(taskId);// 不需要时移除监听removeComplete();removeError();
const removeStart = TXVodPreloadManager.addStartListener((event) => {console.log('预下载开始:', event.taskId);console.log('实际播放 URL:', event.url); // FileId 换链后的 URL});const params: TXPlayInfoParams = {appId: 1500005830,fileId: '387702307091793695',pSign: 'your_psign',};const taskId = await TXVodPreloadManager.startPreload(params, 10, 921600);
TXVodDownloadManager 的视频下载方案实现 HLS 的离线播放。import {RNTXPlayerGlobalSetting,TXVodDownloadManager,} from 'react-native-superplayer';// 设置下载目录,全局设置一次即可RNTXPlayerGlobalSetting.setCacheFolderPath('txcache');
const TXVodQuality = {'240P': 240,'360P': 360,'480P': 480,'540P': 540,'720P': 720,'1080P': 1080,};const mediaInfo = await TXVodDownloadManager.startDownload({appId: 1500005830,fileId: '387702307091793695',quality: TXVodQuality['720P'], // 下载清晰度pSign: 'your_psign',userName: 'default',});
const mediaInfo = await TXVodDownloadManager.startDownloadUrl('https://example.com/video.mp4',921600, // 期望分辨率'default' // 用户标识);
// 添加进度监听const removeProgress = TXVodDownloadManager.addProgressListener((event) => {const { progress, speed } = event.mediaInfo;console.log(`下载进度: ${(progress * 100).toFixed(1)}%, 速度: ${speed}KB/s`);});// 添加完成监听const removeFinish = TXVodDownloadManager.addFinishListener((event) => {console.log('下载完成:', event.mediaInfo.playPath);// 使用 playPath 播放离线视频player.startPlay(event.mediaInfo.playPath);});// 添加错误监听const removeError = TXVodDownloadManager.addErrorListener((event) => {console.error('下载错误:', event.errorCode, event.errorMsg);});
事件 | 说明 |
DownloadState.START | 任务开始,表示 SDK 已经开始下载。 |
DownloadState.FINISH | 下载完成,收到此回调表示已全部下载。此时下载文件可以给 TXVodPlayer 播放。 |
DownloadState.STOP | 任务停止,当您调用 stopDownload 停止下载,收到此消息表示停止成功。 |
DownloadState.ERROR | 下载错误,下载过程中遇到网络断开会回调此接口,同时下载任务停止。 |
stopDownload() 方法,参数为开始下载时返回的 mediaInfo 对象。SDK 支持断点续传,当下载目录没有发生改变时,下次下载同一个文件时会从上次停止的地方重新开始。TXVodDownloadManager.stopDownload(mediaInfo);
// 获取所有下载任务const list = await TXVodDownloadManager.getDownloadMediaInfoList();// 根据 URL 获取下载信息const info = await TXVodDownloadManager.getDownloadMediaInfo(url);// 删除下载(包括本地文件)const success = TXVodDownloadManager.deleteDownloadMediaInfo(mediaInfo);
DownloadState.FINISH,并且 mediaInfo 的 playPath 有值,则代表视频缓存完成,可以直接传给播放器进行播放:const cacheVideoUrl = cacheMediaInfo.playPath;player.startPlay(cacheVideoUrl);
// psign 即播放器签名player.startPlayWithFileId(1500005830, // appId'387702307091793695', // fileId'your_psign' // 播放签名);
import { TXVodConstants } from 'react-native-superplayer';// 设置 HEVC 降级配置player.setExtendedOption({// 指定原始视频编码类型为 HEVC[TXVodConstants.VOD_KEY_VIDEO_CODEC_TYPE]: TXVodConstants.VIDEO_CODEC_HEVC,// 设置 H.264 格式的备选播放链接[TXVodConstants.VOD_KEY_BACKUP_URL]: 'https://example.com/video_h264.mp4',// 可选:设置备选资源的媒体类型[TXVodConstants.VOD_KEY_BACKUP_URL_MEDIA_TYPE]: TXVodConstants.MEDIA_TYPE_AUTO,});// 播放 HEVC 视频,不支持时 SDK 会自动降级到备选 URLplayer.startPlay('https://example.com/video_hevc.mp4');
startPlay 之前可以通过 setConfig 对播放器进行参数配置,例如:设置播放器连接超时时间、设置进度回调间隔、设置缓存文件个数等配置。import type { TXVodPlayConfig } from 'react-native-superplayer';const config: TXVodPlayConfig = {// 网络配置connectRetryCount: 3, // 断连重试次数connectRetryInterval: 3, // 重连间隔(秒)timeout: 10, // 连接超时(秒)// Seek 配置enableAccurateSeek: true, // 开启精准 Seek// 进度回调progressInterval: 500, // 进度回调间隔(毫秒)// 缓冲配置maxBufferSize: 50, // 最大播放缓冲(MB)maxPreloadSize: 10, // 预加载缓冲(MB)// 清晰度配置preferredResolution: 921600, // HLS 起播优选分辨率(1280×720)// 字幕回调extInfoMap: {'450': 0, // 开启字幕文本回调},// 自定义 HTTP Headerheaders: {'User-Agent': 'MyApp/1.0',},};player.setConfig(config);
参数 | 类型 | 默认值 | 说明 |
connectRetryCount | number | 3 | 断连重试次数。 |
connectRetryInterval | number | 3 | 重连间隔(秒,范围 3-30)。 |
timeout | number | 10 | 连接超时时间(秒)。 |
enableAccurateSeek | boolean | true | 是否开启精准 Seek。 |
autoRotate | boolean | true | MP4 是否自动旋转。 |
smoothSwitchBitrate | boolean | false | 是否平滑切换码率。 |
progressInterval | number | 500 | 进度回调间隔(毫秒)。 |
maxBufferSize | number | - | 最大播放缓冲(MB)。 |
maxPreloadSize | number | - | 预加载缓冲(MB)。 |
preferredResolution | number | - | HLS 起播优选分辨率。 |
headers | object | - | 自定义 HTTP Header。 |
preferredAudioTrack | string | - | 启播优先音轨名称。 |
playerType | number | 1 | 播放器类型(0:系统播放器;1:自研播放器)。 |
mediaType | number | 0 | 媒资类型(0:自动)。 |
extInfoMap | object | - | 扩展配置。 |
setBitrateIndex 切换到需要的码流。const config: TXVodPlayConfig = {// 传入参数为视频宽和高的乘积(宽 × 高),可以自定义值传入preferredResolution: 720 * 1280,};player.setConfig(config);
mediaType 减少播放器 SDK 内部播放类型探测,提升启播速度。const config: TXVodPlayConfig = {mediaType: TXVodConstants.MEDIA_TYPE_FILE_VOD, // 用于提升 MP4 启播速度// 或mediaType: TXVodConstants.MEDIA_TYPE_HLS_VOD, // 用于提升 HLS 启播速度};player.setConfig(config);
import { RNTXPlayerGlobalSetting } from 'react-native-superplayer';// 设置缓存目录(使用相对路径)// Android: sdcard/Android/data/{包名}/files/txcache// iOS: Documents/txcacheRNTXPlayerGlobalSetting.setCacheFolderPath('txcache');// 设置最大缓存大小(MB)RNTXPlayerGlobalSetting.setMaxCacheSize(500);// 获取当前缓存目录const cachePath = RNTXPlayerGlobalSetting.getCacheFolderPath();// 获取当前最大缓存大小const maxSize = RNTXPlayerGlobalSetting.getMaxCacheSize();// 开启 License 柔性校验(首次启动来不及校验时使用)RNTXPlayerGlobalSetting.setLicenseFlexibleValid(true);
TXVodPlayer 的 setListener 来监听播放器的播放事件,向您的应用程序同步信息。事件 ID | 数值 | 含义说明 |
VOD_PLAY_EVT_PLAY_BEGIN | 2004 | 视频播放开始。 |
VOD_PLAY_EVT_PLAY_PROGRESS | 2005 | 视频播放进度,会通知当前播放进度、加载进度和总体时长。 |
VOD_PLAY_EVT_PLAY_LOADING | 2007 | 视频播放 loading,如果能够恢复,之后会有 VOD_PLAY_EVT_VOD_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_FILE_NOT_FOUND | -2303 | 文件不存在。 |
VOD_PLAY_ERR_HLS_KEY | -2305 | HLS 解密 key 获取失败。 |
事件 ID | 数值 | 含义说明 |
VOD_PLAY_ERR_HEVC_DECODE_FAIL | -2304 | H.265 解码失败。 |
VOD_PLAY_ERR_GET_PLAYINFO_FAIL | -2306 | 获取点播信息失败。 |
VOD_PLAY_ERR_INVALID_LICENCE | -5 | License 不合法。 |
事件 ID | 数值 | 含义说明 |
VOD_PLAY_EVT_VOD_PLAY_PREPARED | 2013 | 播放器已准备完成,可以播放。设置了 autoPlay 为 false 之后,需要在收到此事件后,调用 resume 才会开始播放。 |
VOD_PLAY_EVT_RCV_FIRST_I_FRAME | 2003 | 网络接收到首个可渲染的视频数据包(IDR)。 |
VOD_PLAY_EVT_HIT_CACHE | 2002 | 命中本地缓存。 |
事件 ID | 数值 | 含义说明 |
VOD_PLAY_EVT_CHANGE_RESOLUTION | 2009 | 视频分辨率改变。 |
事件 ID | 数值 | 含义说明 |
VOD_PLAY_EVT_SELECT_TRACK_COMPLETE | 2020 | 切换轨道完成。 |
VOD_PLAY_EVT_LOOP_ONCE_COMPLETE | 6001 | 循环一轮播放结束。 |
setListener 获取视频播放过程信息示例:player.setListener({onPlayEvent: (event, param) => {switch (event) {case TXVodConstants.VOD_PLAY_EVT_VOD_PLAY_PREPARED:console.log('准备完成');break;case TXVodConstants.VOD_PLAY_EVT_PLAY_BEGIN:console.log('播放开始');break;case TXVodConstants.VOD_PLAY_EVT_PLAY_PROGRESS:const current = param[TXVodConstants.EVT_PLAY_PROGRESS_MS] / 1000;const duration = param[TXVodConstants.EVT_PLAY_DURATION_MS] / 1000;console.log(`进度: ${current}s / ${duration}s`);break;case TXVodConstants.VOD_PLAY_EVT_PLAY_END:console.log('播放结束');break;case TXVodConstants.VOD_PLAY_EVT_CHANGE_RESOLUTION:const width = param[TXVodConstants.EVT_PARAM1];const height = param[TXVodConstants.EVT_PARAM2];console.log(`分辨率变化: ${width}x${height}`);break;default:if (event < 0) {const msg = param[TXVodConstants.EVT_DESCRIPTION];console.error(`播放错误 [${event}]: ${msg}`);}}},});
评估参数 | 含义说明 |
NET_SPEED | 当前的网络数据接收速度,单位 Kbps。 |
VIDEO_FPS | 当前流媒体的视频帧率。 |
VIDEO_BITRATE | 当前流媒体的视频码率,单位 Kbps。 |
AUDIO_BITRATE | 当前流媒体的音频码率,单位 Kbps。 |
VIDEO_CACHE | 缓冲区(jitterbuffer)大小,缓冲区当前长度为 0,说明离卡顿不远了。 |
VIDEO_WIDTH | 视频分辨率 - 宽。 |
VIDEO_HEIGHT | 视频分辨率 - 高。 |
onNetStatus 获取视频播放过程信息示例:player.setListener({onNetStatus: (param) => {const speed = param.NET_SPEED;const videoWidth = param.VIDEO_WIDTH;const videoHeight = param.VIDEO_HEIGHT;},// ...});
player.setListener({onSubtitleData: (data) => {// data.subtitleData: 字幕文本(空串表示清屏)// data.trackIndex: 字幕轨道索引if (data.subtitleData) {setSubtitleText(data.subtitleData);} else {setSubtitleText(''); // 清屏}},// ...});
文档反馈