---
title: 流画面布局
summary: 介绍 IPC 播放器通过 objectFit 和 rotateZ 属性控制视频画面布局与旋转方式。
---
# 流画面布局
在 IPC 播放器， 可以通过 `objectFit` 属性来控制视频画面的布局方式，支持以下两种布局方式：平铺 `fillCrop` 和适应 `contain`;
通过设置 `rotateZ` 属性来控制视频画面的旋转角度，支持 0、90、180、270 四个角度。
下面将列举几种常见的布局方式在不同组件上的实现示例
## 轻量播放器组件
> 💡 **注意** 轻量播放器组件 `@ray-js/ray-ipc-player` 版本需升级到最新版本
### 画面布局
- **比例说明:** 大多数视频比例为 16:9, 其它特殊比例可按照实际需求进行设置
- **竖屏场景:** 推荐使用平铺 `fillCrop` 以保证画面充满视区
- **横屏场景:** 推荐使用适应 `contain` 以保持完整比例显示
- **呈现效果:** 以原 16:9 比例展示。当手机屏幕宽高比大于 16:9 时，左右会出现一定黑边，这是正常情况
> 💡 **温馨提醒:** 进入全屏模式时请隐藏标题栏
```jsx
const [screenType, setScreenType] = useState('portrait');
```
**示例代码**
```jsx
import IpcPlayer from '@ray-js/ray-ipc-player';
const deviceId = '1234567890xxxxxx';
// 定义屏幕状态，可通过 onResize 事件监听窗口大小变化，动态改变屏幕状态
const [screenType, setScreenType] = useState('portrait');
const onCtx = (ctx) => {
console.log(ctx, 'ctx');
};
```
### 旋转角度
在设置布局的基础上，可根据业务场景添加旋转角度。
```jsx
import IpcPlayer from '@ray-js/ray-ipc-player';
```
## 融合播放器组件
> 💡 **注意** 融合播放器组件 `@ray-js/ipc-player-integration` 版本需升级到最新版本
### 画面布局
融合播放器基于轻量播放器进行的二次封装，画面布局的实现方式与轻量播放器组件一致，主要将一些基础功功能进行内置。
一般视频比例为16:9, 推荐在竖屏场景下使用平铺 `fillCrop` 布局方式，横屏场景下使用适应 `contain` 布局方式。
画面效果呈现: 按原比例16:9展示, 手机宽高比大于16:9, 大部分屏幕左右留有黑边。
#### objectFit 方案
```jsx
import { IPCPlayerIntegration, useCtx } from '@ray-js/ipc-player-integration';
import { useState } from 'react';
const deviceId = '1234567890xxxxxx';
// 定义屏幕状态，可通过 onResize 事件监听窗口大小变化，动态改变屏幕状态
const [screenType, setScreenType] = useState('portrait');
const instance = useCtx({
devId: deviceId,
});
```
#### 封装方案
- **playerFit** 参数用于定义竖屏的画面布局方式，默认画面 1 倍展示，默认值为 `contain`, 可选值为 `contain` ｜ `cover`。
- **landscapeMode** 参数用于定义横屏屏的画面布局方式，默认画面 1 倍展示，默认值为 `standard`, 可选值为 `standard` ｜ `fill`。
> 💡 **说明** 该模式会根据横竖屏自定义组合布局，请勿同时设置 `objectFit`以免产生冲突。
```jsx
import { IPCPlayerIntegration, useCtx } from '@ray-js/ipc-player-integration';
import { useState } from 'react';
const deviceId = '1234567890xxxxxx';
// 定义屏幕状态，可通过 onResize 事件监听窗口大小变化，动态改变屏幕状态
const [screenType, setScreenType] = useState('portrait');
const instance = useCtx({
devId: deviceId,
});
```
### 画面旋转
画面旋转统一使用 `extend` 参数透传轻量播放器支持的属性
```jsx
import { IPCPlayerIntegration, useCtx } from '@ray-js/ipc-player-integration';
import { useState } from 'react';
const deviceId = '1234567890xxxxxx';
// 定义屏幕状态，可通过 onResize 事件监听窗口大小变化，动态改变屏幕状态
const [screenType, setScreenType] = useState('portrait');
const instance = useCtx({
devId: deviceId,
});
```