Product
Introducing Ruby Support in Socket
Socket is launching Ruby support for all users. Enhance your Rails projects with AI-powered security scans for vulnerabilities and supply chain threats. Now in Beta!
react-native-youtube
Advanced tools
A <YouTube />
component for React Native.
Uses Google's official youtube-ios-player-helper for iOS and Android Player API for Android and exposes much of the API, as declaratively as possible, into React Native.
<YouTube
ref={(component) => {
this._youTubePlayer = component;
}}
videoId="KVZ-P-ZI6W4" // The YouTube video ID
playlist="PLF797E961509B4EB5" // A playlist's ID, overridden by `videoId`
play={true} // control playback of video with true/false
fullscreen={true} // control whether the video should play in fullscreen or inline
loop={true} // control whether the video should loop when ended
onReady={e => this.setState({ isReady: true })}
onChangeState={e => this.setState({ status: e.state })}
onChangeQuality={e => this.setState({ quality: e.quality })}
onError={e => this.setState({ error: e.error })}
onProgress={e => this.setState({ currentTime: e.currentTime, duration: e.duration })}
style={{ alignSelf: 'stretch', height: 300, backgroundColor: 'black', marginVertical: 10 }}
/>
this._youTubePlayer.seekTo(20);
this._youTubePlayer.nextVideo();
this._youTubePlayer.previousVideo();
this._youTubePlayer.playVideoAt(2);
apiKey
(Android): This parameter is required on Android for the YouTube API to work. More Info.videoId
: The YouTube video ID to play. Can be changed while mounted to change the video playing.videoIds
: An array of YouTube video IDs to be played as an interactive playlist. Can be changed while mounted. Overridden at start by videoId
.playlistId
: A YouTube Playlist's ID to play as an interactive playlist.
Can be changed while mounted. Overridden at start by videoId
and videoIds
.play
: Controls playback of video with true
/false
. Setting it as true
in the beginning itself makes the video autoplay on loading. Default false
.loop
: Loops the video. Default false
.fullscreen
: Controls whether the video should play inline or in fullscreen. Default false
.controls
: A number parameter to decide on the player's controls scheme. Supported values are 0
, 1
, 2
. Default 1
. On iOS the numbers conform to These Parameters. On Android the mapping is 0 = CHROMELSEE
, 1 = DEFAULT
, 2 = MINIMAL
(More Info).showFullscreenButton
: Show or hide Fullscreen button. Default true
.showinfo
(iOS): Setting the parameter's value to false causes the player to not display information like the video title and uploader before the video starts playing. Default true
.modestbranding
(iOS): This parameter lets you use a YouTube player that does not show a YouTube logo. Default false
.origin
(iOS): This string parameter provides an extra security measure for the iFrame API.rel
(iOS): Show related videos at the end of the video. Default true
.The iOS implementation of this player uses the official YouTube iFrame under the hood, so most parameters behavior can be further understood here.
onReady
: Called once when the video player is setup.onChangeState
: Sends the current state of the player on e.state
. Common values are buffering
/playing
/paused
and more.onChangeQuality
: Sends the current quality of video playback on e.quality
.onError
: Sends any errors before and during video playback on e.error
.onChangeFullscreen
: Called when the player enters or exits the fullscreen mode on e.isFullscreen
.onProgress
(iOS): Sends any time progress made on e.currentTime
and e.duration
.seekTo(seconds)
: Seeks to a specified time in the video.nextVideo()
: Skip to next video on a playlist (videoIds
or playlistId
). When loop
is true, will skip to the first video from the last. If called on a single video, will restart the video.previousVideo()
: opposite of nextVideo()
.playVideoAt(index)
: Will start playing the video at index
(zero-based) position in a playlist (videoIds
or playlistId
. Not supported for playlistId
on Android).videosIndex()
: A Promise that returns the index
(zero-based) of the video currently played in a playlist (videoIds
or playlistId
. Not supported for playlistId
on Android).reloadIframe()
(iOS): Specific props (fullscreen
, modestbranding
, showinfo
, rel
, controls
, origin
) can only be set at mounting and initial loading of the underlying WebView that holds the YouTube iFrame (Those are <iframe>
parameters). If you want to changed one of them during the lifecycle of the component you should know the usability cost of loading the WebView again and use this method right after the component was rendered with the updated prop.This component is confirmed to be working on react-native ~0.37 - ~0.42
package.json
:$ npm install react-native-youtube -S
$ react-native link
IMPORTANT! (iOS Only): To link assets/YTPlayerView-iframe-player.html to your project react-native link
is not enough (As of RN ~0.37). You will need to also use the older tool it is based on, rnpm
(This step must be done after react-native link
):
rnpm
(Version 1.9.0):$ npm install -g rnpm
$ rnpm link
(This step can also be done manually by adding ../node_modules/react-native-youtube/assets/YTPlayerView-iframe-player.html
to your Xcode project's root directory)
IMPORTANT! (Android Only): The Android implementation of this component needs to have the official YouTube app installed on the device. Otherwise an error event will trigger with SERVICE_MISSING
.
Open AppDelegate.m and add :
#import <AVFoundation/AVFoundation.h>
[[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryPlayback error: nil];
in your didFinishLaunchingWithOptions method
<YouTube />
instancesThe YouTube API for Android is a singleton. What it means is that unlike the iOS implementation, no two players can be mounted and play a video at the same time. If you have two scenes that happen to live together, or come one after the other (such as when navigating to a new scene), The new <YouTube />
Will take the focus of the singleton and play the video, but after being unmounted, the older mounted <YouTube />
will not be able to take the role back, and will need to be re-mounted.
Virtual devices running inside a desktop are usually much slower than a real device. For that reason, certain irregular behaviors can occur with the native player such as when the player fails to reposition correctly inside React-Native's views hierarchy and will only appear after another render of an ancestor view. In other times some of the player's internal mechanisms that prevent it from playing while being covered, or when the view is too small, will trigger for no good reason.
These behaviors can be pretty worrisome, and wrongfully get you to think the library is broken. At this point these irregularities seems to be unavoidable due to the way React-Native works and the too many moving parts that work in coordination. Make sure to test your app on a real device to check if these irregularities persist. Most of them will not occur on an average hardware.
These possible irregularities should be further taken care of by maintainers.
This repository includes an example project that can be used for viewing, developing and testing all functionalities on a dedicated clean app project.
First copy the git repository and install the React-Native project inside example
git clone https://github.com/inProgress-team/react-native-youtube.git
cd react-native-youtube/example
npm install
react-native link
rnpm link
Then build and run with react-native run-ios
/ react-native run-android
or your favorite IDE.
The react-native-youtube
dependency in the example's package.json
points back to the working directory root at file:../
so you can re-install it with npm install react-native-youtube@file:../
(type this inside example
directory) and test your changes on the example app right on the spot.
MIT License
FAQs
A <YouTube/> component for React Native.
The npm package react-native-youtube receives a total of 4,447 weekly downloads. As such, react-native-youtube popularity was classified as popular.
We found that react-native-youtube demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket is launching Ruby support for all users. Enhance your Rails projects with AI-powered security scans for vulnerabilities and supply chain threats. Now in Beta!
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.