Youtube iframe api를 사용할 수있는 방법이 있을까요?

안녕하세요.

현재 react-native-youtube라는 라이브러리를 사용하여 youtube 영상들을 제공하고 있습니다.

이 라이브러리는 안드로이드 환경에서 저희가 원하는 도구들을 제공하지 않아
직접 webview iframe을 이용해서 영상을 불러오는데까지는 성공했습니다.

추가로 불러온 영상들을 컨트롤하기 위해 yotube iframe api를 불러와서 사용하고 싶은데
제가 아는 방법과 google에서 제공하는 방법은 전부 아래와 같이 웹 DOM을 기반으로 생성하여 컨트롤하는 방식뿐입니다.

<head>    
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
        <script src="https://www.youtube.com/iframe_api"></script>
        </head>
        <body>
            <div id ='player' 
            style="height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px;"/>
            <iframe id='MentorengVideo' src="https://www.youtube.com/embed/${videoID}?loop=1&autohide=1&rel=0&showinfo=0&enablejsapi=1&disablekb=1&controls=2&suggestedQuality=large"
frameborder="0"
style="height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px;" />

            <script type="text/javascript">
                var player;
                function onYouTubeIframeAPIReady() {
                    player = new YT.Player('player', {
                    height: '100%',
                    width: '100%',
                    videoId: ${videoID},
                    events: {
                        'onReady': onPlayerReady,
                        'onStateChange': onPlayerStateChange,
                        'onPlaybackQualityChange': onPlayerPlaybackQualityChange,
                        'onPlaybackRateChange': onPlayerPlaybackRateChange,
                        'onError': onPlayerError,
                        'onApiChange': onPlayerApiChange
                    },
                    playerVars: {
                        'autohide':1,
                        'rel': 0,
                        'showinfo': 0,
                        'enablejsapi': 1,
                        'disablekb': 1,
                        'controls': 2,
                        'suggestedQuality': 'large',
                        'origin' : 'https://www.youtube.com'
                    }
                    });
                }

위 코드와 같이 웹에서 사용하듯이 만들어서 react-native에 적용할 수 있는 방법이 있을까요??

답변 부탁드립니다.

감사합니다.

저는 react-native-webview 안에 해당처럼 만들어서 넣어서 돌리고 있습니다.
다만 안드로이드 최대화면으로 보는게 지원을 하지 않아서 react-native-webview를 좀 튜닝해서 쓰고있습니다.

답변 감사합니다.

<script src="https://www.youtube.com/iframe_api"></script>

웹처럼 스크립트 태그로 외부 api를 불러오는데 이 api도 정상적으로 사용 가능한가요??

저는 별도 html을 assets로 넣고 불러올 수 있도록 해서 잘 돌아가고있습니다~

1 Like

늦었지만 답변 감사합니다!!
덕분에 잘 해결했습니다

1 Like