Granite

한국어

English

한국어

English

Appearance

Video ​

Video 컴포넌트는 다른 앱에서 음악을 재생 중일 때, 앱에서 그 음악을 중지시키지 않도록 오디오 포커스를 제어하는 로직이 구현된 컴포넌트에요. 앱의 상태에 따라 자동으로 재생하거나 일시정지해요. 예를 들어, 앱이 백그라운드로 전환되면 비디오가 자동으로 일시정지돼요.

WARNING

Video 컴포넌트는 react-native-video 버전(6.0.0-alpha.6) 을 사용하고 있어요. 따라서 일부 타입이나 기능이 최신 버전과 호환되지 않을 수 있어요.

시그니처 ​

typescript
Video: import('react').ForwardRefExoticComponent<
  Omit<import('react-native-video').VideoProperties, 'onAudioFocusChanged'> & {
    onAudioFocusChanged?: (event: { hasAudioFocus: boolean }) => void;
  } & import('react').RefAttributes<VideoRef>
>;

파라미터 ​

  • props필수 · VideoProperties

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

    • props.mutedboolean · false

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

    • props.pausedboolean · false

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

    • props.onAudioFocusChangedcallback

      오디오 포커스가 변경될 때 호출되는 콜백 함수에요. muted 가 false 인 경우에 필수로 구현해야해요.

  • props.source.uristring

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

  • event필수 · Object

    - 오디오 포커스 정보를 담고 있는 이벤트 객체에요.

    • event.hasAudioFocus필수 · boolean

      - 비디오 컴포넌트가 오디오 포커스를 가지고 있는지 여부를 나타내요.

  • ref필수 · Ref<VideoRef>

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

프로퍼티 ​

  • isAvailableboolean

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

반환 값 ​

  • JSX.Element

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

예제 ​

동영상 자동 재생 예제 ​

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

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

참고 ​