---
title: 轻量播放器
summary: 介绍轻量播放器基于 IpcPlayer 封装，提供快速接入 IPC 播放功能。
---

# 轻量播放器

> 轻量播放器基于 Ray 的 **[IpcPlayer](https://developer.tuya.com/cn/miniapp/develop/ray/component/media-component/ipc-player)** 封装，整合了基础通用组件和拉流能力，便于业务快速接入 IPC 播放功能。

## 业务匹配

如果您的业务场景不需要融合播放器提供的丰富内置能力，且希望对 UI 和交互进行一定程度的定制，同时无需关注拉流控制等底层逻辑，推荐按以下步骤接入轻量播放器，快速构建符合业务需求的播放器。

### 安装依赖

```bash
yarn add @ray-js/ray-ipc-player
```

### 使用示例

> **注意**: 目前 IDE 开发暂不支持视频流的实时播放，还需通过真机进行调试。

```jsx
import IpcPlayer from '@ray-js/ray-ipc-player';

function Page() {

  const deviceId = '1234567890xxxxxx';
  // 设备在线状态
  const onlineStatus = true; 
  // 获取播放器实例, 可以调用播放器实例上的方法
  const onCtx = (ctx) => {
    console.log(ctx, 'ctx');
  };
  // 监听播放器状态
  const onChangeStreamStatus = (status) => {
     console.log(status, 'status');
  };

  return (
    // playerContainer 为播放器容器, 设置播放器的区域大小
    <View className={Styles.playerContainer}>
      <IpcPlayer
          objectFit='contain'
          onCtx={onCtx}
          devId={deviceId}
          onlineStatus={onlineStatus}
          onChangeStreamStatus={onChangeStreamStatus}
        />
     </View>    
  )
}

```

**播放器容器样式** 

```less
.playerContainer {
  width: 100%;
  height: 300px;
}
```

### 参数说明

| 参数名 | 类型 | 必填 | 描述 |
| --- | --- | --- | --- |
| devId | `string` | 是 | 设备 ID |
| onlineStatus | `bool` | 是 | 设备在线状态 |
| objectFit | `fillCrop` 或 `contain` | 否 | 视频填充模式 (tips: 横竖屏切换时，可匹配不同的填充模式)|
| privateState | `bool` | 否 | 隐私模式 |
| rotateZ | `number` | 否 | 画面旋转角度 |
| clarity | `ClarityType` | 否 | 画面清晰度 |
| muted | `bool` | 否 | 是否静音 |
| scalable | `bool` | 否 | 是否允许画面手动缩放 |
| ptzControllable | `bool` | 否 | 是否支持画面云台转动控制 |
| onCtx | `function` | 否 | 获取播放器实例 |
| onChangeStreamStatus | `function` | 否 | 监听播放器状态 |
| onVideoTap | `function` | 否 | 点击视频画面事件 |
| extend | `object` | 否 | 动态扩展参数(默认值为{}), 适用于随 APP 升级，新增属性使用 |


> 更多通用属性使用可参考 [IpcPlayer](https://developer.tuya.com/cn/miniapp/develop/ray/component/media-component/ipc-player)


**播放器推送状态主要说明 status**

| 参数名 | 说明 |
| --- | --- |
| 1001 | 建立连接成功 |
| -1001 | 建立连接失败 |
| 1002 | 拉流成功 |
| -1002 | 拉流失败 |

## 组件实现

> **提示**: 当然您也可以通过基础 **IpcPlayer** 与 **createIpcPlayerContext** 自主控制播放流程。  

### IpcPlayer

```jsx
import { IpcPlayer } from '@ray-js/ray';
```

用于渲染视频画面的核心组件。详细用法可参考官方文档：[IpcPlayer](https://developer.tuya.com/cn/miniapp/develop/ray/component/media-component/ipc-player)

### IpcContext 



```jsx
import { createIpcPlayerContext } from '@ray-js/api';

```

用于创建播放器实例, 建立设备绑定关系, 更多说明请参见: [createIpcPlayerContext](https://developer.tuya.com/cn/miniapp/develop/miniapp/api/media/ipc/createIpcContext)

用于管理播放器生命周期和控制指令的上下文对象。更多说明请参见：[IpcContext](https://developer.tuya.com/cn/miniapp/develop/miniapp/api/media/ipc/IpcContext)