Code Monkey home page Code Monkey logo

react-native-jw-media-player's Introduction

react-native-jw-media-player

A react-native bridge for JWPlayer native SDK's

๐ŸŽบ ๐ŸŽบ ๐ŸŽบ Announcement: Official Support by JW Player ๐ŸŽบ ๐ŸŽบ ๐ŸŽบ

We are thrilled to announce that the react-native-jw-media-player library, previously maintained by the open source community and myself, has now been officially adopted by JW Player. The library has been migrated to a new repository https://github.com/jwplayer/jwplayer-react-native) under JW Player's official GitHub account.

Please visit the new repository for the latest updates, issues, and feature requests:

GitHub - JW Player React Native Media Player

We thank the community for all the contributions over the years and are excited to see the project continue to evolve under JW Player's stewardship.

โš ๏ธ Important you need a JWPlayer license to use this library https://jwplayer.com/

sample

sample

sample

Getting started

npm i react-native-jw-media-player --save

Mostly automatic installation

For iOS you have to run cd ios/ && pod install.

For Android the package is automatically linked.

Important

This README is for react-native-jw-media-player version 0.2.0 and higher, for previous version check out the Old README.

Since version 0.2.0 we use the new JWPlayerKit && SDK 4 check out iOS get started && Android get started

Android dependencies

Insert the following lines inside the allProjects.dependencies block in android/build.gradle:

maven{
    url 'https://mvn.jwplayer.com/content/repositories/releases/'
}

As so

allprojects {
    repositories {
        mavenLocal()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }

        google()
        jcenter()
        maven { url 'https://jitpack.io' }
        // Add these lines
        maven{
            url 'https://mvn.jwplayer.com/content/repositories/releases/'
        }
    }
}

Usage

...

import JWPlayer, { JWPlayerState } from 'react-native-jw-media-player';

...

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  player: {
    flex: 1,
  },
});

...

const playlistItem = {
  title: 'Track',
  mediaId: -1,
  image: 'http://image.com/image.png',
  description: 'My beautiful track',
  startTime: 0,
  file: 'http://file.com/file.mp3',
  autostart: true,
  repeat: false,
  displayDescription: true,
  displayTitle: true,
  tracks: [
    {
      file: 'http://file.com/english.vtt',
      label: 'en'
    },
    {
      file: 'http://file.com/spanish.srt',
      label: 'es'
    }
  ],
  sources: [
    {
      file: 'http://file.com/file.mp3',
      label: 'audio'
    },
    {
      file: 'http://file.com/file.mp4',
      label: 'video',
      default: true
    }
  ]
}

const config = {
  license:
    Platform.OS === 'android'
      ? 'YOUR_ANDROID_SDK_KEY'
      : 'YOUR_IOS_SDK_KEY',
  backgroundAudioEnabled: true,
  autostart: true,
  styling: {
    colors: {
      timeslider: {
        rail: "0000FF",
      },
    },
  },
  playlist: [playlistItem],
}

...

async isPlaying() {
  const playerState = await this.JWPlayer.playerState();
  return playerState === JWPlayerState.JWPlayerStatePlaying;
}

...

render() {

...

<View style={styles.container}>
  <JWPlayer
    ref={p => (this.JWPlayer = p)}
    style={styles.player}
    config={config}
    onBeforePlay={() => this.onBeforePlay()}
    onPlay={() => this.onPlay()}
    onPause={() => this.onPause()}
    onIdle={() => console.log("onIdle")}
    onPlaylistItem={event => this.onPlaylistItem(event)}
    onSetupPlayerError={event => this.onPlayerError(event)}
    onPlayerError={event => this.onPlayerError(event)}
    onBuffer={() => this.onBuffer()}
    onTime={event => this.onTime(event)}
    onFullScreen={() => this.onFullScreen()}
    onFullScreenExit={() => this.onFullScreenExit()}
  />
</View>

...

}

Run example project

Running the example project:

  1. Checkout this repository.
  2. Go to Example directory and run yarn or npm i
  3. Go to Example/ios and install Pods with pod install
  4. Open RNJWPlayer.xcworkspace with XCode.
  5. Add your JW SDK license in App.js under the config prop.

Available props

Prop Description Default Type
config The JW Config object. undefined Object
controls Should the player controls show. true Boolean
Config
Prop Description Type Platform Default
offlineImage The url for the player offline thumbnail. String iOS none
offlineMessage The message when the player is offline. String iOS none
autostart Should the tracks auto start. Boolean iOS && Android false
controls Should the control buttons show. Boolean Android true
repeat Should the track repeat. Boolean iOS && Android false
playlist An array of playlistItems. [playlistItem] see PlaylistItem] iOS && Android none
nextUpStyle How the next up videos should be presented. {offsetSeconds: Int, offsetPercentage, Int} iOS && Android none
styling All the stylings for the player see Styling section. Object iOS && Android none
advertising General Advertising settings on the player see Advertising section. Object iOS && Android none
fullScreenOnLandscape When this is true the player will go into full screen on rotate of phone to landscape Boolean iOS && Android false
landscapeOnFullScreen When this is true the player will go into landscape orientation when on full screen Boolean iOS && Android false
portraitOnExitFullScreen When this is true the player will go into portrait orientation when exiting full screen Boolean Android false
exitFullScreenOnPortrait When this is true the player will exit full screen when the phone goes into portrait Boolean Android false
enableLockScreenControls When this is true the player will show media controls on lock screen Boolean iOS true
stretching Resize images and video to fit player dimensions. See below Stretching section. String Android none
backgroundAudioEnabled Should the player continue playing in the background and handle interruptions. Boolean iOS && Android false
category Controls the audio session category. See below AudioSessionCategory String iOS Playback
mode Controls the audio session mode. See below AudioSessionMode String iOS none
viewOnly When true the player will not have any controls it will show only the video. Boolean iOS false
pipEnabled When true the player will be able to go into Picture in Picture mode. Note: This is true by default for iOS PlayerViewController. For Android you will also need to follow the instruction mentioned here && below Picture in picture section. Boolean iOS when viewOnly prop is true && Android false
interfaceBehavior The behavior of the player interface. 'normal', 'hidden', 'onscreen' iOS normal
interfaceFadeDelay The number of seconds to wait when fading the interface. The default value is 3 seconds. number iOS 3
preload The behavior of the preload. 'auto', 'none' iOS auto
related The related videos behaviors. Check out the Related section. Object iOS none
hideUIGroups A way to hide certain UI groups in the player. Array of 'overlay', 'control_bar', 'center_controls', 'next_up', 'error', 'playlist', 'controls_container', 'settings_menu', 'quality_submenu', 'captions_submenu', 'playback_submenu', 'audiotracks_submenu', 'casting_menu' Android none
processSpcUrl Your DRM License URL. Checkout the DRM section below. String iOS none
fairplayCertUrl Your DRM Certificate URL. Checkout the DRM section below. String iOS none
contentUUID Your DRM content UUID. Checkout the DRM section below. String iOS none
PlaylistItem
Prop Description Type
mediaId The JW media id. Int
startTime the player should start from a certain second. Int
adVmap The url of ads VMAP xml. (iOS only) String
adSchedule Array of tags and and offsets for ads. (iOS only) {tag: String, offset: String}
description Description of the track. String
file The url of the file to play. String
tracks Array of caption tracks. {file: String, label: String}
sources Array of media sources. {file: String, label: String, default: Boolean}
image The url of the player thumbnail. String
title The title of the track. String
recommendations Url for recommended videos. String
autostart Should the track auto start. Boolean
authUrl Only Available on Android, Used for Authorizing DRM content. Checkout the DRM section below. String
JWControlType
Key Value
forward 0
rewind 1
pip 2
airplay 3
chromecast 4
next 5
previous 6
settings 7
languages 8
fullscreen 9
JWPlayerAdClients
Client Value
JWAdClientVast 0
JWAdClientGoogima 1
JWAdClientGoogimaDAI 2
JWPlayerState

iOS

State Value
JWPlayerStateUnknown 0
JWPlayerStateIdle 1
JWPlayerStateBuffering 2
JWPlayerStatePlaying 3
JWPlayerStatePaused 4
JWPlayerStateComplete 5
JWPlayerStateError 6

Android

State Value
JWPlayerStateIdle 0
JWPlayerStateBuffering 1
JWPlayerStatePlaying 2
JWPlayerStatePaused 3
JWPlayerStateComplete 4
JWPlayerStateError 5
Styling
Prop Description Type Platform Default
displayDescription Should the player show the description. Boolean iOS && Android true
displayTitle Should the player show the title. Boolean iOS && Android true
colors Object with colors in hex format (without hashtag), for the icons and progress bar See below Colors section. Object
font Name and size of the fonts for all texts in the player. Note: the font must be added properly in your native project {name: String, size: Int} iOS System
captionsStyle Style of the captions: name and size of the fonts, backgroundColor, edgeStyle and highlightColor. Note: the font must be added properly in your native project {font: {name: String, size: Int}, backgroundColor: String, highlightColor: String, edgeStyle: 'none', 'dropshadow', 'raised', 'depressed', 'uniform'} See the edgeStyle enum below iOS System
menuStyle Style of the menu: name and size of the fonts, backgroundColor and fontColor. Note: the font must be added properly in your native project {font: {name: String, size: Int}, backgroundColor: String, fontColor: String} iOS System
Colors
Prop Description Type Platform Default
buttons Color of all the icons. String iOS FFFFFF
timeslider Colors for the progress bar. {progress: String, buffer: String, rail: String, thumb: String,} iOS & Android **Note: buffer is only available on android** FFFFFF
backgroundColor Color for the background. String iOS & Android FFFFFF

Note: It is expected to pass the colors in hex format without the hashtag example for white FFFFFF.

colors: PropTypes.shape({
  buttons: PropTypes.string,
  timeslider: PropTypes.shape({
    progress: PropTypes.string,
    rail: PropTypes.string,
    thumb: PropTypes.string,
  }),
});
EdgeStyle
State Value
JWCaptionEdgeStyleUndefined 1
JWCaptionEdgeStyleNone 2
JWCaptionEdgeStyleDropshadow 3
JWCaptionEdgeStyleRaised 4
JWCaptionEdgeStyleDepressed 5
JWCaptionEdgeStyleUniform 6

AudioTrack

Each AudioTrack object has the following keys:

autoSelect: boolean

defaultTrack: boolean

groupId: string

name: string

language: string

A video file can include multiple audio tracks. The onAudioTracks event is fired when the list of available AudioTracks is updated (happens shortly after a playlist item starts playing).

Once the AudioTracks list is available, use getAudioTracks to return an array of available AudioTracks.

Then use getCurrentAudioTrack or setCurrentAudioTrack(index) to view or change the current AudioTrack.

This is all handled automatically if using the default player controls, but these functions are helpful if you're implementing custom controls.

Stretching

uniform: (default) Fits JW Player dimensions while maintaining aspect ratio

exactFit: Will fit JW Player dimensions without maintaining aspect ratio

fill: Will zoom and crop video to fill dimensions, maintaining aspect ratio

none: Displays the actual size of the video file. (Black borders)

Stretching Examples:

Stretching Example

(image from JW Player docs - here use exactFit instead of exactfit)

DRM

Checkout the official DRM docs iOS & Android.

As of now June 7, 2022 there is only support for Fairplay on iOS and Widevine for Android.

In short when passing a protected file URL in the file prop you will also need to pass additional props for the player to be able to decode your encrypted content; per each respective platform.

  • iOS - your processSpcUrl?: string (License) and fairplayCertUrl?: string (Certificate) on the config prop. We will try to parse the contentUUID from the FPS server playback context (SPC), but you can override it by passing it in config along the other two props;
  • Android - your authUrl?: string on each PlaylistItem in the playlist prop;

Checkout the DRMExample in the Example app. (The DRMExample cannot be run in the Simulator).

Advertising

Important

When using an IMA ad client you need to do some additional setup.

  • iOS: Add $RNJWPlayerUseGoogleIMA = true to your Podfile, this will add GoogleAds-IMA-iOS-SDK pod.

  • Android: Add RNJWPlayerUseGoogleIMA = true in your app/build.gradle ext {} this will add 'com.google.ads.interactivemedia.v3:interactivemedia:3.29.0' and 'com.google.android.gms:play-services-ads-identifier:18.0.1'.

Prop Description Type Availability
adVmap The URL of the ads VMAP XML. String All Clients (iOS only)
adSchedule Array of tags and offsets for ads. {tag: String, offset: String}[] All Clients
openBrowserOnAdClick Should the player open the browser when clicking on an ad. Boolean All Clients
adClient The ad client. One of vast, ima, or ima_dai, check out JWPlayerAdClients, defaults to vast. 'vast', 'ima', 'ima_dai' All Clients
adRules Ad rules for VAST client. {startOn: Number, frequency: Number, timeBetweenAds: Number, startOnSeek: 'none' | 'pre'} VAST only
imaSettings Settings specific to Google IMA SDK. {locale: String, ppid: String, maxRedirects: Number, sessionID: String, debugMode: Boolean} IMA and IMA DAI
companionAdSlots Array of objects representing companion ad slots. {viewId: String, size?: {width: Number, height: Number}}[] IMA only
friendlyObstructions Array of objects representing friendly obstructions for viewability measurement. {viewId: String, purpose: 'mediaControls' | 'closeAd' | 'notVisible' | 'other', reason?: String}[] IMA and IMA DAI
googleDAIStream Stream configuration for Google DAI (Dynamic Ad Insertion). {videoID?: String, cmsID?: String, assetKey?: String, apiKey?: String, adTagParameters?: {[key: string]: string}} IMA DAI only
tag Vast xml URL. String Vast only (iOS only)
Related
Prop Description Type
onClick Sets the related content onClick action using a JWRelatedOnClick. Defaults to play 'play', 'link'
onComplete Sets the related content onComplete action using a JWRelatedOnComplete. Defaults to show 'show', 'hide', 'autoplay'
heading Sets the related content heading using a String. Defaults to โ€œNext upโ€. String
url Sets the related content url using a URL. String
autoplayMessage Sets the related content autoplayMessage using a String. Defaults to title String
autoplayTimer Sets the related content autoplayTimer using a Int. Defaults to 10 seconds. Int

AudioSessions iOS

Check out the official apple docs for more information on AVAudioSessions. Below is a summarized description of each value.

AudioSessionCategory

Available on iOS

Prop Description
Ambient Use this category for background sounds such as rain, car engine noise, etc. Mixes with other music.
SoloAmbient Use this category for background sounds. Other music will stop playing.
Playback Use this category for music tracks.
Record Use this category when recording audio.
PlayAndRecord Use this category when recording and playing back audio.
MultiRoute Use this category when recording and playing back audio.
AudioSessionCategoryOptions

Available on iOS

Prop Description
MixWithOthers Controls whether other active audio apps will be interrupted or mixed with when your app's audio session goes active. Details depend on the category.
DuckOthers Controls whether or not other active audio apps will be ducked when when your app's audio session goes active. An example of this is a workout app, which provides periodic updates to the user. It reduces the volume of any music currently being played while it provides its status.
AllowBluetooth Allows an application to change the default behavior of some audio session categories with regard to whether Bluetooth Hands-Free Profile (HFP) devices are available for routing. The exact behavior depends on the category.
DefaultToSpeaker Allows an application to change the default behavior of some audio session categories with regard to the audio route. The exact behavior depends on the category.
InterruptSpokenAudioAndMix When a session with InterruptSpokenAudioAndMixWithOthers set goes active, then if there is another playing app whose session mode is AVAudioSessionModeSpokenAudio (for podcast playback in the background, for example), then the spoken-audio session will be interrupted. A good use of this is for a navigation app that provides prompts to its user: it pauses any spoken audio currently being played while it plays the prompt.
AllowBluetoothA2DP Allows an application to change the default behavior of some audio session categories with regard to whether Bluetooth Advanced Audio Distribution Profile (A2DP) devices are available for routing. The exact behavior depends on the category.
AllowAirPlay Allows an application to change the default behavior of some audio session categories with regard to showing AirPlay devices as available routes. This option applies to various categories in the same way as AVAudioSessionCategoryOptionAllowBluetoothA2DP; see above for details.
OverrideMutedMicrophone Some devices include a privacy feature that mutes the built-in microphone at a hardware level under certain conditions e.g. when the Smart Folio of an iPad is closed. The default behavior is to interrupt the session using the built-in microphone when that microphone is muted in hardware. This option allows an application to opt out of the default behavior if it is using a category that supports both input and output, such as AVAudioSessionCategoryPlayAndRecord, and wants to allow its session to stay activated even when the microphone has been muted. The result would be that playback continues as normal, and microphone sample buffers would continue to be produced but all microphone samples would have a value of zero.
AudioSessionMode

Available on iOS

Prop Description
Default The default mode.
VoiceChat Only valid with AVAudioSessionCategoryPlayAndRecord. Appropriate for Voice over IP (VoIP) applications. Reduces the number of allowable audio routes to be only those that are appropriate for VoIP applications and may engage appropriate system-supplied signal processing. Has the side effect of setting AVAudioSessionCategoryOptionAllowBluetooth.
VideoChat Only valid with kAudioSessionCategory_PlayAndRecord. Reduces the number of allowable audio routes to be only those that are appropriate for video chat applications. May engage appropriate system-supplied signal processing. Has the side effect of setting AVAudioSessionCategoryOptionAllowBluetooth and AVAudioSessionCategoryOptionDefaultToSpeaker.
GameChat Set by Game Kit on behalf of an application that uses a GKVoiceChat object; valid only with the AVAudioSessionCategoryPlayAndRecord category. Do not set this mode directly. If you need similar behavior and are not using a GKVoiceChat object, use AVAudioSessionModeVoiceChat instead.
VideoRecording Only valid with AVAudioSessionCategoryPlayAndRecord or AVAudioSessionCategoryRecord Modifies the audio routing options and may engage appropriate system-supplied signal processing.
Measurement Appropriate for applications that wish to minimize the effect of system-supplied signal processing for input and/or output audio signals.
MoviePlayback Engages appropriate output signal processing for movie playback scenarios. Currently only applied during playback over built-in speaker.
SpokenAudio Appropriate for applications which play spoken audio and wish to be paused (via audio session interruption) rather than ducked if another app (such as a navigation app) plays a spoken audio prompt. Examples of apps that would use this are podcast players and audio books. For more information, see the related category option AVAudioSessionCategoryOptionInterruptSpokenAudioAndMixWithOthers.
VoicePrompt Appropriate for applications which play spoken audio and wish to be paused (via audio session interruption) rather than ducked if another app (such as a navigation app) plays a spoken audio prompt. Examples of apps that would use this are podcast players and audio books. For more information, see the related category option AVAudioSessionCategoryOptionInterruptSpokenAudioAndMixWithOthers.
Picture-in-picture

Picture in picture mode is enabled by JW on iOS for the PlayerViewController, however when setting the viewOnly prop to true you will also need to set the pipEnabled prop to true, and call the togglePIP method to enable / disable PIP. For Android you will have to add the following code in your MainActivity.java

@Override
public void onPictureInPictureModeChanged(boolean isInPictureInPictureMode, Configuration newConfig) {
  super.onPictureInPictureModeChanged(isInPictureInPictureMode, newConfig);

  Intent intent = new Intent("onPictureInPictureModeChanged");
  intent.putExtra("isInPictureInPictureMode", isInPictureInPictureMode);
  intent.putExtra("newConfig", newConfig);
  this.sendBroadcast(intent);
}

Available methods

Func Description Argument
seekTo Tells the player to seek to position, use in onPlaylistItem callback so player finishes buffering file. Int
togglePIP Enter or exist Picture in picture mode. none
play Starts playing. none
pause Pauses playing. none
stop Stops the player completely. none
playerState Returns promise that then returns the current state of the player. Check out the JWPlayerState Object. none
position Returns promise that then returns the current position of the player in seconds. none
toggleSpeed Toggles the player speed one of 0.5, 1.0, 1.5, 2.0. none
setSpeed Sets the player speed. Double
setVolume Sets the player volume. Double
setPlaylistIndex Sets the current playing item in the loaded playlist. Int
setControls Sets the display of all the control buttons on the player. Boolean
setVisibility (iOS only) Sets the visibility of specific control buttons on the player. You pass visibility: Boolean && controls that is an array of JWControlType visibility: Boolean, controls: JWControlType[]
setLockScreenControls (iOS only) Sets the locks screen controls for the currently playing media, can be used to control what player to show the controls for. Boolean
setFullScreen Set full screen. Boolean
loadPlaylist Loads a playlist. (Using this function before the player has finished initializing may result in assert crash or blank screen, put in a timeout to make sure JWPlayer is mounted). [PlaylistItems]
loadPlaylistItem Loads a playlist item. (Using this function before the player has finished initializing may result in assert crash or blank screen, put in a timeout to make sure JWPlayer is mounted). PlaylistItem
getAudioTracks Returns promise that returns an array of AudioTracks none
getCurrentAudioTrack Returns promise that returns the index of the current audio track in array returned by getAudioTracks none
setCurrentAudioTrack Sets the current audio track to the audio track at the specified index in the array returned by getAudioTracks Int
setCurrentCaptions Turns off captions when argument is 0. Setting argument to another integer, sets captions to track at playlistItem.tracks[integer - 1] Int

Available callbacks

All Callbacks with data are wrapped in native events for instance this is how to get the data from onTime callback ->
  onTime(event) {
    const {position, duration} = event.nativeEvent;
  }
Func Description Argument
onPlaylist A new playlist is loaded. [playlistItem] see PlaylistItem
onPlayerReady The player has finished setting up and is ready to play. none
onBeforePlay Right before playing. none
onBeforeComplete Right before playing completed and is starting to play. none
onComplete Right after media playing is completed. none
onPlay Player started playing. none
onPause Player paused playing. none
onSeek Seek event requested from user. {position: Double, offset: Double}
onSeeked Player finished seeking to a new position. On iOS none, On Android {position: Double}
onRateChanged Player speed was changed by the user from the settings menu. On iOS {rate: Double, at: Double}, On Android {rate: Double, at: Double}
onSetupPlayerError Player faced and error while setting up the player. {error: String}
onPlayerError Player faced an error after setting up the player but when attempting to start playing. {error: String}
onBuffer The player is buffering. none
onTime Interval callback for every millisecond playing. {position: Double, duration: Double}
onFullScreenRequested User clicked on the fullscreen icon. Use this to resize the container view for the player, if your not using nativeFullScreen prop. (Make use of https://github.com/yamill/react-native-orientation for fullscreen mode) none
onFullScreen Player went into fullscreen. Use this to resize the container view for the player, if your not using nativeFullScreen prop. (Make use of https://github.com/yamill/react-native-orientation for fullscreen mode) none
onFullScreenExitRequested User clicked on the fullscreen icon to exit. none
onFullScreenExit Player exited fullscreen. none
onPlaylistComplete Player finished playing playlist items. none
onPlaylistItem When starting to play a playlist item. JW type playlist item see docs ios, android contains additional index of current playing item in playlist 0 for default
onAudioTracks The list of available audio tracks is updated (happens shortly after a playlist item starts playing). none
onControlBarVisible When the visibility of the player changes. {nativeEvent: {visible: Boolean}}

Background Audio

This package supports Background audio sessions by setting the backgroundAudioEnabled prop on the PlaylistItem, just follow the JWPlayer docs for background session.

Here for Android https://developer.jwplayer.com/jwplayer/docs/android-audiotrack#background-audio although this package handles background audio playing in android as is and you shouldn't have to make any additional changes.

Here for iOS https://developer.jwplayer.com/jwplayer/docs/ios-behavior#background-audio under Background Audio section.

For iOS you will have to enable audio in Signing & Capabilities under background modes.

Casting

JWPlayer enables casting by default with a casting button (if you pass the viewOnly prop in the player config on iOS then you will need to enable casting by yourself).

iOS

1: Follow the instruction here on the official JWPlayer site.

2: Add $RNJWPlayerUseGoogleCast = true to your Podfile, this will install google-cast-sdk pod.

3: Edit your Info.plist with the following values:

'NSBluetoothAlwaysUsageDescription' => 'We will use your Bluetooth for media casting.',
'NSBluetoothPeripheralUsageDescription' => 'We will use your Bluetooth for media casting.',
'NSLocalNetworkUsageDescription' => 'We will use the local network to discover Cast-enabled devices on your WiFi network.',
'Privacy - Local Network Usage Description' => 'We will use the local network to discover Cast-enabled devices on your WiFi network.'
'NSMicrophoneUsageDescription' => 'We will use your Microphone for media casting.'

4: Enable Access WiFi Information capability under Signing & Capabilities

Android
  1. Add RNJWPlayerUseGoogleCast = true to your app/build.gradle in ext {}.
  2. Add com.google.android.gms:play-services-cast-framework:21.3.0 to your Android app/build.gradle
  3. Create a class that overrides OptionsProvider in your Android codebase
    1. See reference file android/src/main/java/com/appgoalz/rnjwplayer/CastOptionsProvider.java
    2. Replace .setTargetActivityClassName(RNJWPlayerView.class.getName()) with your player Activity
    3. Modify the file with any options necessary for your use case
  4. Add the meta-data to your AndroidManifest.xml like below, ensuring
    <meta-data
        android:name="com.google.android.gms.cast.framework.OPTIONS_PROVIDER_CLASS_NAME"
        android:value="path.to.CastOptionsProvider" />
  1. Casting should now be enabled

Available methods

For iOS
Func Description Argument
castState Gets the cast state. int check out GCKCastState
GCKCastState
typedef NS_ENUM(NSUInteger, GCKCastState) {
  /** No Cast session is established, and no Cast devices are available. */
  GCKCastStateNoDevicesAvailable = 0,
  /** No Cast session is establishd, and Cast devices are available. */
  GCKCastStateNotConnected = 1,
  /** A Cast session is being established. */
  GCKCastStateConnecting = 2,
  /** A Cast session is established. */
  GCKCastStateConnected = 3,
};

Available callbacks

For iOS
Func Description Payload
onCastingDevicesAvailable Casting were devices discovered and became available. {devices: [{name: string, identifier: string}}]
onConnectedToCastingDevice Connected to cast device. {device: {name: string, identifier: string}}
onDisconnectedFromCastingDevice Disconnected from cast device. {error: Error}
onConnectionTemporarilySuspended Disconnected temporarily from cast device. none
onConnectionRecovered Connection to cast device recovered none
onCasting Started casting none
onConnectionFailed Connection to cast device failed. {error: Error}
onCastingEnded Casting ended. {error: Error}
onCastingFailed Casting failed. {error: Error}
For Android
Func Description Payload
onCasting Casting event occurred {active: Boolean, available: Boolean, device: String}

react-native-jw-media-player's People

Contributors

archcorsair avatar arsimr16 avatar chaimpaneth avatar cmcaboy avatar crwhite21 avatar ddolheguy avatar devinedecrypter avatar enisit avatar escobar022 avatar imobiledevz avatar jasonlipo avatar jhpark723 avatar jmilham21 avatar jmurth1234 avatar joshbuchea avatar kestasvenslauskas avatar kononenkoanton avatar microadam avatar nateshmbhat avatar nulleof avatar pierrecapo avatar pliashkou avatar sinkovskyv avatar sufianbabri avatar yogiyadavmca avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-native-jw-media-player's Issues

Example does not work

Executing the example project gives an error in iOS:

Ordered comparison between pointer and zero ('NSNumber *' and 'int')
In line 32 of file RCJavaScriptLoader.mm

Android is not working too...

TypeError: Cannot read property 'message' of undefined
at handleError (/Users/.../Documents/Demos/react-native-jw-media-player-master/Example/node_modules/react-native/local-cli/cliEntry.js:35:21)

when chromecast support?

I am implementing JWPlayer on my RN app.
It's working well but unfortunately, seems it is not supported for chromecast.

If someone knows that, I am appreciate.

Thanks

Get error 102630 with source video from youtube

I get youtube link download from youtube
I have checked the path in my browser and it works
Link be like
https://r3---sn-42u-i2i6.googlevideo.com/videoplayback?expire=1581370303&ei=X3dBXsOBA4mR4AL7kqnIBA&ip=150.95.114.172&id=o-AB4f5tYq_JBvnsi6hIUva2jS1sYN6S00h9Lz35NgPf7J&itag=18&source=youtube&requiressl=yes&mm=31%2C29&mn=sn-42u-i2i6%2Csn-42u-nbo6&ms=au%2Crdu&mv=u&mvi=2&pl=21&vprv=1&mime=video%2Fmp4&gir=yes&clen=14781074&ratebypass=yes&dur=315.628&lmt=1580882523007800&mt=1581348373&fvip=3&fexp=23842630&c=WEB&txp=5531432&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cvprv%2Cmime%2Cgir%2Cclen%2Cratebypass%2Cdur%2Clmt&lsparams=mm%2Cmn%2Cms%2Cmv%2Cmvi%2Cpl&lsig=AHylml4wRAIgEXAiDymwQB4FzEQw2S21Snoa_Rw0kAoyKPtyxdpGTqQCIFAi2g3g75qShheNnuua2l3Qk_80NBQqx7ueQ2gSoDRY&sig=ALgxI2wwRQIhAIXrrCRXTbIZmsO8ZKRVtP8M3G9mewIBXOn6W4Yu94sEAiBIbXJPJjyLz-mNT32qtz74rkxrPoBwCm1AJbgZ6oQ3VQ==
Screen Shot 2020-02-10 at 10 33 17 PM
Screen Shot 2020-02-10 at 10 36 09 PM

CHANGELOG.md or Release Notes

Hello, I don't see any easy way to see what's changed between versions. Can you let me know if I've missed that somewhere? Otherwise I do recommend keeping a CHANGELOG.md or tagging your releases on Github w/ accompanying documentation. Appreciate your work!

Request for additional callbacks

Requesting few more callbacks:
onComplete - when media has reached the ending.
onSeek - when seek was requested from default controls.

Isn't onIdle the same as my requested onComplete? If so it does not work android.

Also onTime callback does not return described parameters (checked android).

Ad support

Please tell me if there is support for video ads? If so, can you show some code examples?

onSeek & onSeeked iOS callbacks

onSeek & onSeeked event callbacks on iOS is not working. Would love to implement it myself but at this moment my objective c skills are not enough :/

Playlist in Android not working

I made a playlist with playlistItems and in iOS worked, Android don't.
Am i missing something? Or it's a feature to add in the feature?

Closed Captions Support

Hi there, I couldn't find any documentation about closed captioning support.
Does the mediaId property allow the player to read the captions available?

Any assistance on this topic would be appreciated, thank you.

Volume Control

Hi. Is there any way we could control the volume or mute?

Thanks

Display image with video extension .m3u8

Hi @chaimPaneth ,
I have a url with extension .m3u8 (no video, it is black screen), and i want display image by 'image' prop in playListItem when my video url black screen. Android done, but iOS not working...
Can you tell me how to do it? :((
Thank you!

[Android/iOS] adVmap prop - no ads played

Hi @chaimPaneth , it seems that using the adVmap prop as described in the docs does not work neither on iOS nor Android. The vmap url is passed into native code but it seems the player is ignoring it for some reason. It works in the iOS demo app provided by JW Player.

Here's some example code (taken from the example):

<JWPlayer
              style={styles.player}
              playlistItem={{
                mediaId: "1",
                file: "http://content.bitsontherun.com/videos/3XnJSIm4-injeKYZS.mp4",
                autostart: false,
                adVmap: "http://playertest.longtailvideo.com/adtags/vmap2.xml"
              }}
              onBeforePlay={() => this.onBeforePlay()}
              onPlay={() => this.onPlay()}
              onSetupPlayerError={(e) => this.onSetupPlayerError(e)}
              onPlayerError={(e) => this.onPlayerError(e)}
              onBuffer={() => this.onBuffer()}
              onTime={(time) => this.onTime(time)}
              nativeFullScreen={true}
              onFullScreen={() => this.onFullScreen()}
              onFullScreenExit={() => this.onFullScreenExit()}
            />

If you could point me to what the problem might be, it would be much appreciated.
Thank you.

NSMicrophoneUsageDescription info.plist error

Hi after upgrading to a newest version 0.1.49 and adding everything required by casting I receive this email from apple:
...The app's Info.plist file should contain a NSMicrophoneUsageDescription key with a user-facing purpose string...
Should this be mentioned in readme ?
And why does it need a microphone usage?

Android demo not working

Hi.
When I run the example on the Android, I get the following error:

 Building and installing the app on the device (cd android && ./gradlew installDebug)...

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':app'.
> failed to find Build Tools revision 23.0.1

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Total time: 2.648 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html

(node:25034) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'message' of undefined
    at handleError (/home/ppc/React/Native/react-native-jw-media-player/Example/node_modules/react-native/local-cli/cliEntry.js:35:21)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:189:7)
(node:25034) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:25034) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

He also complains about sdk.dir=/path/to/AndroidSDK. the latter is solved by adding a file local.properties:

sdk.dir=/path/to/AndroidSDK

Typescript definition

@chaimPaneth before starting, thanks a lot for your library! We are currently using it in our team, and your work helped us a lot!

Since we are using Typescript, we added a basic typescript definition in our project but I've figured that I could spend more time to make it exhaustive and open a PR here. Are you encline to have and maintain typescript definition in this repo ? As I said I can open a PR to add typescript definitions for the current API.

Cheers!

error: Build input file cannot be found

Hii, I am not able to run my project in xcode.

error: Build input file cannot be found: '/Users/user/WorkSpace/git/slp/node_modules/react-native-jw-media-player/ios/CustomJWPlaylistItem.m' (in target 'RNJWPlayer' from project 'RNJWPlayer')

Seems like CustomJWPlaylistItem.m file is missing. I have tried to run pod install. Link and relink the library multiple times but it didn't work.

Project dependencies:
"react-native-jw-media-player": "0.1.32",
"react": "^16.8.3",
"react-native": "^0.59.10"

Cannot build in ios

Build input file cannot be found: '../node_modules/react-native-jw-media-player/ios/CustomJWPlaylistItem.m'

Android Fullscreen Bound to Parent Container

When clicking on the fullscreen button, the app changes orientation but does not take over the display. It appears that the player goes into fullscreen of the container that it is in, rather than taking over the screen.

We invoke the player using
const playlistItem = { file: 'sample.com', mediaId: 'sample', autostart: false }

            <JWPlayer
                playlistItem={playlistItem}
                style={styles.player}
                onBeforePlay={() => this.printSomething("onBeforePlay", null)}
                onPlay={() => this.printSomething("onPlay", null)}
                onPause={() => this.printSomething("onPause", null)}
                onIdle={() => this.printSomething("onIdle", null)}
                onPlaylistItem={event => this.printSomething("onPlaylistItem", event)}
                onSetupPlayerError={event => this.printSomething("onSetupPlayerError",event)}
                onPlayerError={event => this.printSomething("onPlayerError", event)}
                onBuffer={() => this.printSomething("onBuffer", null)}
                onFullScreen={() => this.onFullScreen()}
                onPlayerReady={() => this.onPlayerReady()}
                onFullScreenExit={() => this.onFullScreenExit()}
            />

RN version: 0.57.4
JWPlayer: 3.7.0
react-native-jw-media-player: 0.1.12

Android Breaks with JW Player SDK version 3.16.0

JWPlayer Android SDK 3.16.0 Release Notes:
Updated the Google IMA to support version 3.18.1.

This has caused some sort of incompatibility between google packages. It wasn't able to find androidx.media.session.

Downgrading to 3.15.1 fixed the issue.

Android video is black after going in/out fullscreen

Latest version used
0.1.40

On android going into full screen mode video is black screen. Audio still playing normally. After seeking into other time or pressing settings & back video is shown again. Sometimes same thing replicated on going back out of full screen.

EDIT: play/pause also helps

Build input file cannot be found.

Build input file cannot be found: '../node_modules/react-native-jw-media-player/ios/CustomJWPlaylistItem.m'

This file is not currently in this repo, however, when I checkout the forks on this repo, it is present. Why was this file removed?

Crash on android 9-10

From crashlytics. Latest version 2020-02-02

Fatal Exception: java.lang.IllegalArgumentException
Service not registered: com.appgoalz.rnjwplayer.RNJWPlayerView$1@7843d02
android.app.LoadedApk.forgetServiceDispatcher (LoadedApk.java:1344)

android.content.ContextWrapper.unbindService (ContextWrapper.java:655)
CRASH >>> com.appgoalz.rnjwplayer.RNJWPlayerView.doUnbindService (RNJWPlayerView.java:625)

AdSchedule Seems Not Work Properly On Android

Hi @chaimPaneth, I am trying to implement VMAP ads on JWPlayer by adding adSchedule on playlistItem. But I always get the result that the ad's video does not play and also there is always a loading indicator run forever while the original video won't play. I need your help. Thank you.

This is an example of my playlist item

const playlistItem = {
    mediaID: "ykJZQsJn",
    time: 0,
    file: "https://cdn.jwplayer.com/manifests/ykJZQsJn.m3u8",
    controls: true,
    repeat: false,
    adSchedule: [
      {
        tag:
          'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=https://developers.google.com/interactive-media-ads/docs/sdks/html5/tags&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&vad_type=linear&vpos=preroll&pod=1&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0',
        offset: 'pre',
      },
    ],

That case only happens on Android but fine on iOS. ๐Ÿ™

android jwplayer not displayed

import React, { Component } from 'react';
import {
StyleSheet,
View,
} from 'react-native';
import JWPlayer from 'react-native-jw-media-player';

const styles = StyleSheet.create({
container: {
flex: 1,

},
player: {
width:"100%",
height:250
},
});

export default class App extends Component {
componentDidMount(){
console.log(JWPlayer);
}

onBeforePlay() { // eslint-disable-line
// console.log('onBeforePlay was called');
}

onPlay() { // eslint-disable-line
// console.log('onPlay was called');
}

onPlayerError(error) { // eslint-disable-line
// console.log('onPlayerError was called with error: ', error);
}

onBuffer() { // eslint-disable-line
// console.log('onBuffer was called');
}

onTime({ position, duration }) { // eslint-disable-line
// console.log('onTime was called with: ', position, duration);
}

render() {
return (

<JWPlayer
style={styles.player}
autostart={true}
file={'http://cn7.kankia.com/hls/20200107/0381bd7aa19679e00989a253172bd7e1/1578381712/index.m3u8'}
onBeforePlay={() => this.onBeforePlay()}
onPlay={() => this.onPlay()}
controls={true}
onPlayerError={e => this.onPlayerError(e)}
onBuffer={() => this.onBuffer()}
onTime={time => this.onTime(time)}
/>

);
}
}

onFullScreen issue

On latest version on Android callback onFullScreenExit is not called.
When exiting fullscreen onFullScreen is called instead onFullScreenExit

Multiple videos cause app crash on iOS

When rendering multiple videos on a single page, the iOS app crashes.

Thread 1: EXC_BAD_ACCESS (code=1, address=0x222dfde48)

RN version: 0.59.4
JWPlayer: 3.7.0
react-native-jw-media-player: 0.1.12

aar artifact file outdated

When installing the library, the android aar files generated is outdated and references old code.

Version 0.1.23

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.