React Native Youtube Bridge
  • 한국어
  • 2.x

      • API 레퍼런스

      주요 export

      export {
  useYouTubeEvent,
  useYouTubePlayer,
  YoutubeView,
  useYoutubeOEmbed,
} from 'react-native-youtube-bridge';

      핵심 API

      • useYouTubePlayer(source, config?)
      • YoutubeView
      • useYouTubeEvent(player, event, ...)
      • useYoutubeOEmbed(url?)

      플레이어 메서드

      • play, pause, stop, seekTo
      • setVolume, getVolume, mute, unMute, isMuted
      • getCurrentTime, getDuration, getVideoUrl, getVideoEmbedCode
      • getPlaybackRate, setPlaybackRate, getAvailablePlaybackRates
      • getPlayerState, getVideoLoadedFraction
      • loadVideoById, cueVideoById, setSize

      비동기 getter 메서드의 값을 안정적으로 사용해야 한다면 ready 이벤트 이후에 호출하세요. 렌더 표면이 아직 연결되기 전에는 undefined를 반환할 수 있습니다.

      이벤트

      • ready
      • stateChange
      • error
      • progress
      • playbackRateChange
      • playbackQualityChange
      • autoplayBlocked
      • muteChange

      중요한 타입

      • YoutubeSource
      • YoutubePlayerVars
      • YoutubeError
      • ProgressData
      • PlayerInfo
      • PlayerState
      • YoutubeViewProps

      YoutubeView props

      player

      useYouTubePlayer에서 반환된 YoutubePlayer 인스턴스입니다. 훅과 메서드 호출에서 사용하는 컨트롤러를 렌더 표면에 연결하려면 같은 인스턴스를 YoutubeView에 전달하세요.

      const player = useYouTubePlayer('AbZH7XWDW_k');

return <YoutubeView player={player} />;

      width / height

      플레이어의 렌더링 크기를 제어합니다. 두 prop 모두 숫자, 'auto', 또는 '100%' 같은 퍼센트 문자열을 받을 수 있습니다.

      <YoutubeView player={player} width="100%" height={220} />

      style

      플레이어 컨테이너에 React Native view 스타일을 적용합니다.

      <YoutubeView player={player} style={{ borderRadius: 12, overflow: 'hidden' }} />

      iframeStyle (web only)

      React Native Web에서 iframe wrapper에 CSS 속성을 적용합니다.

      useInlineHtml (iOS / Android, 기본값: true)

      true이면 네이티브 WebView에 inline HTML을 전달합니다. false이면 WebView가 기본 호스팅 플레이어 페이지(https://react-native-youtube-bridge.pages.dev) 또는 webViewUrl로 전달한 URL을 로드합니다.

      webViewUrl (iOS / Android)

      WebView source URL을 재정의하거나, useInlineHtml이 true일 때 HTML 콘텐츠의 baseUrl로 사용됩니다.

      inline HTML을 사용할 때는 webViewUrl의 origin이 YouTube IFrame API origin 값과 정확히 일치해야 합니다. 필요한 경우 포트를 포함하고, baseUrl에는 trailing slash를 붙이고, origin에는 trailing slash를 붙이지 마세요.

      webViewStyle (iOS / Android)

      내부 WebView에 직접 React Native view 스타일을 적용합니다.

      webViewProps (iOS / Android)

      라이브러리가 내부적으로 제어하는 prop은 유지하면서 내부 WebView에 추가 prop을 전달합니다. ref, source, style, onMessage, javaScriptEnabled, onError는 내부에서 관리되므로 덮어쓸 수 없습니다.

      YoutubeViewProps type

      Go to source

      YoutubeViewProps
      /**
 * `YoutubeView` 컴포넌트의 props입니다.
 * @example
 * ```tsx
 * const player = useYouTubePlayer('AbZH7XWDW_k');
 *
 * <YoutubeView player={player} />
 * ```
 */
export type YoutubeViewProps = {
  /**
   * 플레이어 인스턴스입니다.
   * @example
   * ```tsx
   * const player = useYouTubePlayer('AbZH7XWDW_k');
   *
   * <YoutubeView player={player} />
   * ```
   */
  player: YoutubePlayer;
  /**
   * 플레이어의 너비입니다.
   */
  width?: number | 'auto' | `${number}%`;
  /**
   * 플레이어의 높이입니다.
   */
  height?: number | 'auto' | `${number}%`;
  /**
   * 플레이어의 스타일입니다.
   */
  style?: StyleProp<ViewStyle>;
  /**
   * iframe wrapper의 스타일입니다.
   * @platform web
   */
  iframeStyle?: CSSProperties;
  /**
   * true로 설정하면 플레이어가 inline HTML을 사용합니다.
   * @remarks
   * false이면 플레이어가 기본 URI(https://react-native-youtube-bridge.pages.dev)의 webview를 사용합니다.
   * 커스텀 webview를 사용하려면 `webViewUrl`을 직접 설정하세요.
   * @defaultValue true
   * @platform ios, android
   */
  useInlineHtml?: boolean;
  /**
   * WebView source로 사용할 URL입니다.
   * @remarks
   * `useInlineHtml`이 `true`이면 이 값은 HTML 콘텐츠의 `baseUrl`로 설정됩니다.
   * 이 경우 `webViewUrl`의 origin은 YouTube IFrame API `origin`과 정확히 일치해야 합니다.
   * - 필요한 경우 포트를 포함하세요. (예: baseUrl `https://localhost:8081/` ⇄ origin `https://localhost:8081`).
   * - `baseUrl`에는 trailing slash를 사용하되, `origin`에는 사용하지 마세요. (scheme + host [+ port] only).
   *
   * `useInlineHtml`이 `false`이면 이 값은 WebView source의 기본 URI(https://react-native-youtube-bridge.pages.dev)를 대체합니다.
   * @platform ios, android
   */
  webViewUrl?: string;
  /**
   * WebView의 스타일입니다.
   * @platform ios, android
   */
  webViewStyle?: StyleProp<ViewStyle>;
  /**
   * WebView에 전달할 props입니다.
   * @platform ios, android
   */
  webViewProps?: Omit<
    WebViewProps,
    'ref' | 'source' | 'style' | 'onMessage' | 'javaScriptEnabled' | 'onError'
  > & {
    source?: Omit<WebViewSourceUri, 'uri'>;
  };
};