앱인토스 개발자센터 로고

Video ​

지원환경: React NativeReact Native SDKv1.0.3
실행환경: Toss AppSandbox App

Video 컴포넌트는 앱 내에서 비디오를 재생할 수 있는 컴포넌트예요.
앱이 백그라운드로 전환되면 자동으로 일시 정지되고,
다른 앱에서 음악이 재생 중일 때 오디오 포커스를 적절히 제어해
토스 앱이 그 음악을 중지시키지 않아요.

참고하세요

Video 컴포넌트는 react-native-video v6.0.0-alpha.6을 기반으로 동작해요.
일부 타입이나 기능은 최신 버전과 호환되지 않을 수 있어요.

시그니처 ​

typescript
Video: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<VideoRef>>

파라미터 ​

  • propsVideoProperties

    `react-native-video`에서 제공하는 속성들이에요.

    • props.mutedboolean · false

      비디오의 음소거 상태를 제어해요. true면 비디오의 오디오가 음소거되고, false면 오디오가 재생돼요. 기본값은 false에요.

    • props.pausedboolean · false

      비디오 재생을 제어하는 속성이에요. true이면 비디오가 일시 정지되고, false이면 비디오가 재생돼요. 기본값은 false이고, 자동 재생돼요.

    • props.onAudioFocusChangedOnAudioFocusChanged

      오디오 포커스가 변경될 때 호출되는 콜백 함수에요. muted 가 false 인 경우에 필수로 구현해야해요. 자세한 내용은 OnAudioFocusChanged를 참고해주세요.

  • props.source.uristring

    재생할 비디오의 소스에요. 파일 경로나 URL을 설정할 수 있어요.

  • ref필수 · Ref<VideoRef>

    비디오 인스턴스에 접근하기 위한 ref 객체에요. 이 ref를 통해 비디오 인스턴스의 여러 메서드에 접근할 수 있어요.

프로퍼티 ​

  • isAvailableboolean

    Video 컴포넌트를 사용할 수 있는지 확인하는 값이에요. 이 값을 확인해서 사용자가 비디오를 렌더링할 수 있는지 혹은 환경적 제약(예: 네트워크 연결 문제, 지원되지 않는 디바이스 등)으로 인해 비디오 기능을 사용할 수 없는지를 먼저 확인할 수 있어요. 이 값이 false라면, 비디오를 렌더링하지 않거나 대체 콘텐츠를 제공하는 등의 처리를 해야 해요.

반환 값 ​

  • JSX.Element

    비디오를 렌더링하는 JSX 엘리먼트를 반환해요. Animated를 사용해 부드러운 애니메이션 효과를 포함한 비디오 재생을 제공해요.

예제 ​

비디오 자동 재생하기 ​

아래 예시는 비디오를 자동 재생하는 간단한 예시예요.
muted를 true로 설정하면 무음 상태에서 재생할 수 있어요.

tsx
import { useRef } from 'react';
import { View } from 'react-native';
import { Video } from '@granite-js/react-native';

function VideoExample() {
  const videoRef = useRef(null);

  return (
    <View>
      <Video
        ref={videoRef}
        source={{ uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' }}
        muted={true}
        paused={false}
        resizeMode="cover"
        style={{ width: 300, height: 200, borderWidth: 1 }}
      />
    </View>
  );
}

참고 ​