react-native-youtube-sdk
Note
- Your android app needs to be using the androidx libraries instead of the old support libraries.
Video is unavailable problem
- Origin is already set up in the library but you will notice that some videos are not playing. This is because the video is shared as not embeddable by provider.
- You can use YouTube Data API to solve this problem
- Do not open an issue related to this
Getting started
$ npm install react-native-youtube-sdk --save
Mostly automatic installation
$ react-native link react-native-youtube-sdk
iOS With CocoaPods
- Create a blank Swift file with bridge in your project (you can name it whatever you want) (to build swift code easily)
$ cd /ios
$ pod install
- Have fun
Manual installation
iOS
- In XCode, in the project navigator, right click
Libraries
➜Add Files to [your project's name]
- Go to
node_modules
➜react-native-youtube-sdk
and addYouTubeSdk.xcodeproj
- In XCode, in the project navigator, select your project. Add
libYouTubeSdk.a
to your project'sBuild Phases
➜Link Binary With Libraries
- Run your project (
Cmd+R
)
Android
- Open up
android/app/src/main/java/[...]/MainApplication.java
- Add
import com.srfaytkn.reactnative.YouTubeSdkPackage;
to the imports at the top of the file - Add
new YouTubeSdkPackage()
to the list returned by thegetPackages()
method
- Append the following lines to
android/settings.gradle
:include ':react-native-youtube-sdk' project(':react-native-youtube-sdk').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-youtube-sdk/android')
- Insert the following lines inside the dependencies block in
android/app/build.gradle
:implementation project(':react-native-youtube-sdk')
Usage
Example Component
<YouTubePlayer ref= thisyouTubePlayer = ref videoId="t_aIEOqB8VM" autoPlay=true fullscreen=true showFullScreenButton=true showSeekBar=true showPlayPauseButton=true startTime=5 style= width: "100%" height: 200 onError= console onChangeState= console onChangeFullscreen= console/>
Example Usage
;;; Component { return <View style=stylescontainer> <ScrollView> <YouTubePlayer ref= thisyouTubePlayer = ref videoId="t_aIEOqB8VM" autoPlay=true fullscreen=false showFullScreenButton=true showSeekBar=true showPlayPauseButton=true startTime=5 style= width: "100%" height: 200 onReady= console onError= console onChangeState= console onChangeFullscreen= console /> <View> <TouchableOpacity style=stylesbutton onPress= thisyouTubePlayer> <Text style= color: "#ffffff" >loadVideo</Text> </TouchableOpacity> <TouchableOpacity style=stylesbutton onPress= thisyouTubePlayer> <Text style= color: "#ffffff" ></Text> </TouchableOpacity> <TouchableOpacity style=stylesbutton onPress= thisyouTubePlayer> <Text style= color: "#ffffff" >Play</Text> </TouchableOpacity> <TouchableOpacity style=stylesbutton onPress= thisyouTubePlayer> <Text style= color: "#ffffff" >Pause</Text> </TouchableOpacity> <TouchableOpacity style=stylesbutton onPress=async { const currentTime = await thisyouTubePlayer; ToastAndroid; } > <Text style= color: "#ffffff" >getCurrentTime</Text> </TouchableOpacity> <TouchableOpacity style=stylesbutton onPress=async { const duration = await thisyouTubePlayer; ToastAndroid; } > <Text style= color: "#ffffff" >getVideoDuration</Text> </TouchableOpacity> </View> </ScrollView> </View> ; } const styles = StyleSheet;
API
Props
Prop | Required | Type | Default value | Description |
---|---|---|---|---|
videoId | false | string | YouTube video id | |
autoPlay | false | bool | false | Plays when video loaded |
fullscreen | false | bool | false | The video is play in fullscreen |
showFullScreenButton | false | bool | false | Show or hide fullscreen button |
showSeekBar | false | bool | true | Show or hide seekbar |
showPlayPauseButton | false | bool | true | Show or hide play/pause button |
startTime | false | number | 0 | start time of video for first play |
onReady | false | func | triggered when the player ready | |
onError | false | func | triggered when error occurs | |
onChangeState | false | func | triggered when the state changes (UNKNOWN/UNSTARTED/ENDED/PLAYING/PAUSED/BUFFERING/VIDEO_CUED) | |
onChangeFullscreen | false | func | triggered when the player enters or exits the fullscreen mode |
Methods
Name | Params | Return | Descriptipon |
---|---|---|---|
seekTo | seconds | void | Seeks to a specified time in the video |
play | void | play the video | |
pause | void | pause the video | |
loadVideo | videoId, startTime | void | load a video to the player |
getCurrentTime | promise | Returns promise that results with the current time of the played video | |
getVideoDuration | promise | Returns promise that results with the duration of the played video |
Thanks
- >= 1.0.6 iOS (https://github.com/mukeshydv/YoutubePlayerView)
- <= 1.0.4- iOS (https://github.com/malkouz/youtube-ios-player-helper-swift)
- Android (https://github.com/PierfrancescoSoffritti/android-youtube-player)