React Native에서 Youtube 재생하기

2020-06-27 hit count image

React Native에서 Youtube를 재생하기 위해서 react-native-youtube를 사용하는 방법에 대해서 알아봅시다.

개요

React Native로 토이프로젝트를 진행하면서 Youtube 비디오를 재생할 필요가 생겼습니다.

이번 블로그 포스트에서는 React Native 프로젝트에서 Youtube 비디오를 재생하기 위해서, react-native-youtube 라이브러리를 사용하는 방법에 대해서 설명합니다.

여기서 사용 소개하는 예제는 GitHub 저장소에서도 확인할 수 있습니다.

react-native-youtube 설치 및 준비

아래에 명령어를 사용하여 react-native-youtube를 설치합니다.

npm install --save react-native-youtube

iOS에서 사용하기 위해서는 아래에 명령어를 실행합니다.

cd ios
pod install

안드로이드에서 react-native-youtube를 사용하기 위해서는 Youtube developer API key가 필요합니다. 아래에 링크를 통해 Youtube developer API key를 생성하시기 바랍니다.

react-native-youtube 사용법

비디오 재생

react-native-youtube를 사용하여 React Native에서 Youtube를 재생하기 위해서 아래와 같이 소스 코드를 추가합니다.


import YouTube from 'react-native-youtube';
...
const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <YouTube
        videoId="KVZ-P-ZI6W4"
        apiKey="YOUR_YOUTUBE_DEVELOPER_API_KEY_FOR_ANDROID"
        play={true}
        fullscreen={false}
        loop={false}
        onReady={(e) => console.log('onReady')}
        onChangeState={(e) => console.log('onChangeState:', e.state)}
        onChangeQuality={(e) => console.log('onChangeQuality: ', e.quality)}
        onError={(e) => console.log('onError: ', e.error)}
        style={{width: '100%', height: 300}}
      />
    </SafeAreaView>
  );
};

FlatList에서 사용하기

안드로이드에서는 react-native-youtube를 사용하여 여러 Youtube를 한 화면에서 재생할 수 없습니다. 자세한 내용은 아래에 링크를 확인하시기 바랍니다.

따라서 안드로이드에서 FlatList를 사용하여 여러 비디오를 표시하고, 자동 재생하기 위해서는 FlatList의viewabilityConfigonViewableItemsChanged를 조합하여 구현할 수 있습니다.


...
import YouTube from 'react-native-youtube';

...

const Placeholder = () => {
  return (
    <View style={styles.item}>
      <ActivityIndicator size="large" color="white" />
    </View>
  );
};

const ListVideo = () => {
  const [visablePostIndex, setVisablePostIndex] = useState(0);

  const onViewRef = useRef(({viewableItems}) => {
    if (viewableItems && viewableItems[0]) {
      const index = viewableItems[0].index;
      if (typeof index === 'number') {
        setVisablePostIndex(index);
      }
    } else {
      setVisablePostIndex(-1);
    }
  });
  const viewConfigRef = useRef({viewAreaCoveragePercentThreshold: 80});

  return (
    <View style={styles.container}>
      <FlatList
        data={VIDEO_LIST}
        viewabilityConfig={viewConfigRef.current}
        onViewableItemsChanged={onViewRef.current}
        keyExtractor={(item, index) => `${index}`}
        renderItem={({item, index}) =>
          index === visablePostIndex ? (
            <YouTube
              videoId={item}
              apiKey="YOUR_YOUTUBE_DEVELOPER_API_KEY_FOR_ANDROID"
              play={true}
              fullscreen={false}
              loop={false}
              onReady={(e) => console.log('onReady')}
              onChangeState={(e) => console.log('onChangeState:', e.state)}
              onChangeQuality={(e) =>
                console.log('onChangeQuality: ', e.quality)
              }
              onError={(e) => console.log('onError: ', e.error)}
              style={{width: '100%', height: 300}}
            />
          ) : (
            <Placeholder />
          )
        }
      />
    </View>
  );
};
...

위에 소스를 좀 더 자세히 살펴보면,


...
const viewConfigRef = useRef({viewAreaCoveragePercentThreshold: 80});
...
<FlatList
  viewabilityConfig={viewConfigRef.current}
...

위와 같이 화면에 표시된 아이템이 어느정도 보이면, 화면에 표시되었다고 판단할 수 있도록 기준을 작성합니다.


...
const onViewRef = useRef(({viewableItems}) => {
    if (viewableItems && viewableItems[0]) {
      const index = viewableItems[0].index;
      if (typeof index === 'number') {
        setVisablePostIndex(index);
      }
    } else {
      setVisablePostIndex(-1);
    }
  });
...
<FlatList
  onViewableItemsChanged={onViewRef.current}
...

그리고 화면에 표시된 아이템이 변경되면 호출되는 onViewableItemsChanged을 통해 현재 표시된 여러 아이템중 첫번째 아이템의 Index를 useState를 통해 저장합니다.


<FlatList
  ...
 renderItem={({item, index}) =>
    index === visablePostIndex ? (
      <YouTube
        videoId={item}
        apiKey="YOUR_YOUTUBE_DEVELOPER_API_KEY_FOR_ANDROID"
        play={true}
        fullscreen={false}
        loop={false}
        onReady={(e) => console.log('onReady')}
        onChangeState={(e) => console.log('onChangeState:', e.state)}
        onChangeQuality={(e) =>
          console.log('onChangeQuality: ', e.quality)
        }
        onError={(e) => console.log('onError: ', e.error)}
        style={{width: '100%', height: 300}}
      />
    ) : (
      <Placeholder />
    )
  }
...

이렇게 저장한 Index를 비교하셔 첫번째 아이템의 비디오만을 재생하도록 설정할 수 있습니다. 이렇게 하면, 안드로이드에서도 여러 비디오를 자동 재생할 수 있습니다.

완료

이것으로 React Native에서 Youtube를 재생하는 방법에 대해서 알아보았습니다. 여기서 소개한 소스코드는 GitHub에서 확인이 가능하니, 전체 소스를 보고 참고하시면 좋을거 같습니다.

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

책 홍보

저도 블로그를 시작한지 1년만에...책을 다 써봅니다...인생에서 이런 날도 오는군요...타국에서 책 출판도 할 수 있고, 참 좋은 세상입니다.

이번에 쓴 책은 스무디 한 잔 마시며 끝내는 React Native입니다. 다양한 예제를 통해 리액트 네이티브를 공부할 수 있도록 구성해 보았습니다. 또한 설치부터 배포까지 실전에서도 사용할 수 있는 내용들을 담고 있습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.

스무디 한 잔 마시며 끝내는 React Native React Native로 실전 스마트폰 앱 만들기
Posts