TargetVideo Website
Developer Section

Installation & Usage

BridTV SDK player for react native

Suggest Edits

Installation

npm install react-native-bridtv-sdk-module
or 
yarn add react-native-bridtv-sdk-module


IOS 

After NPM install, cd to IOS and run  pod install

Android 

Because Module currently using BridPlayer SDK SNAPSHOT 
In Gradle (Module:app) need to be added

 repositories {
    mavenCentral()
  }

Usage

import { BridPlayer } from "react-native-bridtv-sdk-module";

// ...
const App = () => {
  const bridPlayerRef = React.useRef<BridPlayer>(null);

  const handleAllPlayerEvents = (eventData) => {
     console.log(eventData);
  };

  const handleVideoLoad = (eventData) => {cd
    console.log('VIDEO LOADED' + '-' + eventData.playerReference);
  };

          <BridPlayer
            ref={bridPlayerRef3}
            style={styles.square}
            bridPlayerConfig={{
              playerReference: 'player_3', // Player reference important for Events
              playerID: xxxx, // PlayerID from BridTV cms
              mediaID: xxxxxxxx, //VideoID or PlaylistID from BridTv cms
              typeOfPlayer: 'Single', // Single or Playlist
              controlAutoplay: false, //enables the client to take control over autoplay
              scrollOnAd: true, //This option enables scrolling during ad and is specific to the iOS platform. By default, Android has scrolling enabled during ads.
              creditsLabelColor: '614BC3', // To achieve color modification for credits label, it is necessary to provide a sequence of six hexadecimal characters, excluding the '#' symbol.
              setCornerRadius: 30, //This property enables setting the corner radius to the player itself. Its value is in pixels.
              localization: 'en', //This property allows selecting the language in which the player and IMA will operate.
              doubleTapSeek: 10, // This property set seek seconds for double tap seek player UI.
              seekPreview: 1 // When set to 1, the feature is enabled and will be visible in all operational modes of the player. When set to 2 the thumbnail image preview during seeking will be available exclusively when the player is in fullscreen mode.

            }}
            //Callback for Events from all players in one Activity {"message": "video/ad event", "playerReference": "reverence to player from props"}
            handleAllPlayerEvents={(eventData) =>handleAllPlayerEvents(eventData)}
            //Video
            handleVideoLoad={(eventData) => handleVideoLoad(eventData)}
            handleVideoStart={(eventData) => handleVideoStart(eventData)}
            //Error
            handleVideoError={(eventData) => handleVideoError(eventData)}
          />

Props

The BridPlayer component accepts the following props:

  • style (optional): Specifies the style for the player component.

  • bridPlayerConfig: An object that contains configuration options for the player. It includes properties playerID, mediaID, typeOfPlayer, useVPAIDSupport, playerReference, controlAutoplay, scrollOnAd, creditsLabelColor, setCornerRadius, localization. Explanations for each of the properties are given in the section above.

localization - supported languages:

  • en (English) - default

  • es (Spanish)

  • de (German)

  • fr (French)

  • it (Italian)

  • ru (Russian)

  • pt (Portuguese)

  • sr (Serbian)

  • me (Montenegrin)

  • hr (Croatian)

  • bs (Bosnian)

  • sl (Slovenian)

  • scrollOnAd: true This option enables scrolling during ad and is specific to the iOS platform. By default, Android has scrolling enabled during ads.

  • handleAllPlayerEvents : Callback for Events from all players in one Activity {"name": "video/ad event", "playerReference": "reverence to player from props"}

  • Video event callbacks: These props allow you to specify callback functions for various video events like:

    • handleVideoLoad,
    • handleVideoStart,
    • handleVideoPlay,
    • handleVideoBuffering,
    • handleVideoProgress,
    • handleVideoPaused, handleVideoEnd,
    • handleVideoSeek,
    • handleFulscreenOpen,
    • handleFulscreenClose
    • handlePlayerEnterPip
    • handlePlayerExitPip

  • Ad event callbacks: These props allow you to specify callback functions for various ad events like:

    • handlevideoAdLoaded,
    • handlevideoAdCompleted,
    • handlevideoAdResumed,
    • handleVideoAdStart,
    • handlevideoAdPaused,
    • handleAdProgress,
    • handleVideoAdTapped,
    • handleVideoAdSkiped,
    • handleVideoAdEnd

  • handleVideoError: A callback function that handles video errors. It receives an errorEvent object. These are the error event types that can occur with the BridPlayer:

    • adError:

      • Name: adError
      • Message: Error occurred during ad playback.
      • Code: 300

    • videoBadUrl:

      • Name: playerVideoBadUrl
      • Message: Invalid video from BridTv CMS/Invalid video URL.
      • Code: 101

    • unsupportedFormat:

      • Name: playernsupportedFormat
      • Message: Video player error. Probably unsupported video format.
      • Code: 102

    • protectedContent:

      • Name: playerProtectedContent
      • Message: Cannot play protected content.
      • Code: 103

    • lostIntenetConnection:

      • Name: playerLostIntenetConnection
      • Message: Lost internet connection.
      • Code: 100

    • liveStreamError:

      • Name: playerLivestreamError
      • Message: An error occurred during live stream playback.
      • Code: 200

These error types represent various issues that can occur during the playback of videos or ads with the BridPlayer. By handling these error events appropriately, you can provide better error feedback and take necessary actions to address the specific error conditions encountered during playback.

Methods

  • play(): void: Plays the video.
  • pause(): void: Pauses the video.
  • previous(): void: Plays the previous video in the playlist.
  • next(): void: Plays the next video in the playlist.
  • mute(): void: Mutes the video.
  • unMute(): void: Unmutes the video.
  • loadVideo(playerID: number, mediaID: number): void: Loads a video with the specified playerID and mediaID from BridTv CMS.
  • loadPlaylist(playerID: number, mediaID: number): void: Loads a playlist with the specified playerID and mediaID from BridTv CMS.
  • setFullscreen(fullscreen: boolean): void: Sets the fullscreen mode of the player. Pass true to enter fullscreen mode or false to exit fullscreen mode.
  • showControlls(): void: Enable the video controls.
  • hidecontrolls(): void: Disable the video controls.
  • isAdPlaying(): void: Checks if an ad is currently playing.
  • getPlayerCurrentTime(): Promise<number | null>: Retrieves the current playback time of the player in miliseconds. Returns a promise that resolves with the current time or null if the player is not loaded.
  • getAdDuration(): Promise<number | null>: Retrieves the duration of the currently playing ad in miliseconds. Returns a promise that resolves with the ad duration or null if no ad is playing.
  • getVideoDuration(): Promise<number | null>: Retrieves the duration of the currently loaded video in smilisecondseconds. Returns a promise that resolves with the video duration or null if no video is loaded.
  • isPaused(): void: Checks if the video is currently paused.
  • isRepeated(): void: Checks if the video is alerady repeated.
  • destroyPlayer(): void: Destroys the native player instance and cleans up any resources associated with it.
  • isAutoplay(): bool: Method is used to check if the current video is set to autoplay..

Please note that these methods should be called on an instance of the BridPlayer class.

Take a look at our Example App for best practices while implementing BridPlayer RN module.

Updated 9 months ago