点播场景

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}>
      <SuperPlayerViewComponent
        viewId="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',
  },
});

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;
  }, []);

  // ... 其他代码
}

import { useEffect } from 'react';

function PlayerScreen() {
  const playerRef = useRef<TXVodPlayer | null>(null);

  useEffect(() => {
    return () => {
      // 组件卸载时销毁播放器
      if (playerRef.current) {
        playerRef.current.destroy();
        playerRef.current = null;
      }
    };
  }, []);

  // ... 其他代码
}

// 停止播放
player.stop(true);

// 设置 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();

// 限制自适应播放的最高码率（单位 Kbps）
player.setAutoMaxBitrate(2000);

player.setBitrateIndex(-1); // index 参数传入 -1

const config: TXVodPlayConfig = {
  smoothSwitchBitrate: true,  // 设为 true，可平滑切换码率
};
player.setConfig(config);

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`);
    }
  },
});

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;          // 帧率
  },
  // ...
});

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);

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=外挂）
}

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);