Basic playback

Basic Playback

Create the Player

A Player could be built by providing mediaURL, mediaType and useCustomPlayerControls or by providing all the options as below.

// Creating Player

import { createPlayer, PlayerConfig } from '@quickplay/rn-qp-nxg-player';

// Create a basic player
const playerConfig: PlayerConfig = {
  mediaURL: "your-video-url",
  mediaType: "HLS", // or "DASH"
  useCustomPlayerControls: true, // of false
  // ... other configuration
};

const player = await createPlayer(playerConfig);

Attach Listeners

The application can listen to events such as changes in player state, buffering state, seek state and playback errors by registering a listener/delegate.

const playerListeners = {
    onDismissPlayer(isDismissPlayer: boolean) {
        console.log('on Dismiss triggered');
    },
    onStateChanged(playbackState: PlaybackStateValue,
        bufferingState: BufferingStateValue,
        seekingState: SeekingStateValue,) {
        console.log(`pbState: ${playbackState}, bufStat: ${bufferingState}, seekState: ${seekingState}`);
    },
    onProgressUpdate(currentPosition: number, duration: number, playerContext: string) {
        console.log(`cusPos= ${currentPosition}, duration: ${duration}, playerContext: ${playerContext}`);
    },
    onPlayerContextChanged(playerContext: PlayerContext) {
        console.log('on onPlayerContextChanged: ', playerContext);
    },
    onError(error: PlatformError): void {
        console.log(`playback_error: ${JSON.stringify(error, null, 2)}`);
    }
}

// Attach Listeners to the player:
player.addListener(playerListener);

Attach player to a view

Once the player has been created and listeners are in place, the final step is to render the player within your component's view hierarchy. The QpNxgPlaybackView component is responsible for rendering the video surface and must be provided with the playerID returned when the player was created.

<View
  ref={playerContainerRef}
  style={styles.containerStyle}
>
  {/* Playback View */}
  <View style={styles.playerView}>
    <QpNxgPlaybackView playerID={state.playerID} style={styles.playerView} />
  </View>
  
  {/* Controls Overlay */}
  <View style={styles.controlsOverlay}>
    {showControls()}
  </View>
</View>

Start Playback

The player supports the following control operations:

• play — Resumes playback of paused or loaded content.
• pause — Pauses content that is currently playing.
• seek — Seeks to a specified position within the playback window.

Note that playback behavior differs across platforms. On iOS, playback begins automatically as soon as the QpNxgPlaybackView is attached — no explicit call to player.play() is required. On Android and tvOS, however, playback must be triggered explicitly.

// Android and tvOS — explicitly start playback
player.play();

Stop & Abort

• Invoking stop(), would stop rendering and all underlying resources would be released.
• Invoking abort(error: Error), would have same effect as stop(). Additionally, **onError() callback on the attached Player.Listener will be invoked.