React-native에 vimeo를 연동해야 하는데 어떻게 해야할까요?

vimeo 플레이어를 rn에서 구현하여 vimeo의 api를 사용할 수 있어야 합니다…

github 등에 있는 라이브러리는 오래되기도 했고 제대로 작동하고 있지 않더군요.

WebView를 통해서는 사실상 vimeo의 api와 통신이 불가능해보이는데,

이러면 사실상 native로 직접 player 구현한 다음 브릿지 통해 연동하는 방법밖에는 없으려나요?

네이티브쪽 전혀 모르는데 다른 방법이 있을까 해서 질문글 남겼습니다!

youtube 처럼 embed 링크를 제공할거에요
그냥 아래 링크를 WebView 에 넣어서 테스트해보세요 :slight_smile:
https://player.vimeo.com/video/336812660


제가 질문을 잘못 이해했네요!
어떤 vimeo api 사용이 필요하신건가요?

이렇게 해서 플레이어 api에 접근하는게 가능한가요?
play나 앞으로가기, 뒤로가기, 전체화면을 막는다던가…
webview상으로 통신이 되는지 해보는데 잘 안되더라구요.
일단 조금 더 삽질해보겠습니다. 감사합니다!

플레이어의 기본적인 사이클 콜백과 정지, 시작 앞뒤감기,
전체화면 여부, 화질조정, 영상 다운로드 등의 기능입니다.

WebView source 에 Player 생성하는 HTML 소스를 넣으시고

window.player = new VimeoPlayer("...")

WebView 의 ref 를 만든뒤에, injectJavascript 메소드를 사용해보세요
잘 될지는 모르겠지만 이 방법밖에 딱히 생각이 안나네요

this.webview.injectJavascript("window.player.play()")

에고 죄송합니다 ㅠ

source 에 HTML소스를 넣으라는게 어떤 말씀인가요?


간단한 예제입니다.

더 안전하게 핸들링 하시려면, htmlSource 에서 window.player.on 리스너에 ReactNative 쪽으로window.ReactNativeWebView.postMessage( … ) 이벤트 보내시고, RN에서 onMessage 로 통신해서 받아서
보완하면 될 듯 합니다.


postMessage / onMessage 예제도 추가했습니다

1 Like