本页目录
轻量播放器组件画面布局旋转角度融合播放器组件画面布局objectFit 方案封装方案画面旋转

流画面布局

在 IPC 播放器， 可以通过 objectFit 属性来控制视频画面的布局方式，支持以下两种布局方式：平铺 fillCrop 和适应 contain;

通过设置 rotateZ 属性来控制视频画面的旋转角度，支持 0、90、180、270 四个角度。

下面将列举几种常见的布局方式在不同组件上的实现示例

轻量播放器组件

💡 注意 轻量播放器组件 @ray-js/ray-ipc-player 版本需升级到最新版本

画面布局

  • 比例说明: 大多数视频比例为 16:9, 其它特殊比例可按照实际需求进行设置
  • 竖屏场景: 推荐使用平铺 fillCrop 以保证画面充满视区
  • 横屏场景: 推荐使用适应 contain 以保持完整比例显示
  • 呈现效果: 以原 16:9 比例展示。当手机屏幕宽高比大于 16:9 时，左右会出现一定黑边，这是正常情况

💡 温馨提醒: 进入全屏模式时请隐藏标题栏

const [screenType, setScreenType] = useState('portrait');
<TopBar title="title" style={{display:screenType === 'portrait' ? 'block' : 'none'}} />

示例代码

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

const deviceId = '1234567890xxxxxx';

// 定义屏幕状态，可通过 onResize 事件监听窗口大小变化，动态改变屏幕状态
const [screenType, setScreenType] = useState('portrait');

const onCtx = (ctx) => {
    console.log(ctx, 'ctx');
};

<view style={{ height: screenType === 'portrait' ? `300px` : '100vh', overflow: 'hidden' }}>
   <IpcPlayer
      objectFit={screenType === 'portrait' ? 'fillCrop' : 'contain'}
      onCtx={onCtx}
      devId={deviceId}
      onChangeStreamStatus={onChangeStreamStatus}
    />
</view>

旋转角度

在设置布局的基础上，可根据业务场景添加旋转角度。

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

    <IpcPlayer
      objectFit={'contain'}
      onCtx={onCtx}
      devId={deviceId}
      onChangeStreamStatus={onChangeStreamStatus}
      rotateZ={90}
    />

融合播放器组件

💡 注意 融合播放器组件 @ray-js/ipc-player-integration 版本需升级到最新版本

画面布局

融合播放器基于轻量播放器进行的二次封装，画面布局的实现方式与轻量播放器组件一致，主要将一些基础功功能进行内置。

一般视频比例为16:9, 推荐在竖屏场景下使用平铺 fillCrop 布局方式，横屏场景下使用适应 contain 布局方式。

画面效果呈现: 按原比例16:9展示, 手机宽高比大于16:9, 大部分屏幕左右留有黑边。

objectFit 方案

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

<view style={{ height: screenType === 'portrait' ? `300px` : '100vh', overflow: 'hidden' }}>
   <IPCPlayerIntegration
      instance={instance}
      objectFit={screenType === 'portrait' ? 'fillCrop' : 'contain'}
      devId={deviceId}
    />
</view>

封装方案

  • playerFit 参数用于定义竖屏的画面布局方式，默认画面 1 倍展示，默认值为 contain, 可选值为 contain ｜ cover。
  • landscapeMode 参数用于定义横屏屏的画面布局方式，默认画面 1 倍展示，默认值为 standard, 可选值为 standard ｜ fill。

💡 说明 该模式会根据横竖屏自定义组合布局，请勿同时设置 objectFit以免产生冲突。

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

<view style={{ height: screenType === 'portrait' ? `300px` : '100vh', overflow: 'hidden' }}>
   <IPCPlayerIntegration
      instance={instance}
      devId={deviceId}
      playerFit='contain'
      landscapeMode='standard'
    />
</view>

画面旋转

画面旋转统一使用 extend 参数透传轻量播放器支持的属性

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

<view style={{ height: screenType === 'portrait' ? `300px` : '100vh', overflow: 'hidden' }}>
   <IPCPlayerIntegration
      instance={instance}
      devId={deviceId}
      playerFit='contain'
      landscapeMode='standard'
      extend={{rotateZ: 90}}
    />
</view>