THEOplayer

1. Attach the player

When creating the player instance, attach it to the current session.

// Create a config for your player
const playerConfig: PlayerConfiguration = {
    license: '', // insert THEOplayer React Native license here
    chromeless: false,
    libraryLocation: 'theoplayer',
    mediaControl: {
      mediaSessionEnabled: true,
    }
};

// In the onPlayerReady callback, attach your player to the current session
const onPlayerReady = (player: THEOplayer) => {
      ...
      // Attach player to the current session
      session.attachPlayer(player);
      ...
}

// Create your THEOplayer component
const [player, setPlayer] = useState<THEOplayer | undefined>(undefined);
const [render, setRender] = useState(true);

...
// Attach the config and callback
{render
    ? <THEOplayerView 
        config={playerConfig} 
        onPlayerReady={onPlayerReady}>
        </THEOplayerView>
    : null
}

2. Start a streaming session

The getURL method is used to get the actual streaming URL and start the streaming session. This method is also the starting point of the analytics calculation, for instance the startup time starts from this method.

The returned URL can be different for every video session. In case of using a Broadpeak CDN or a nanoCDN, it includes a unique token. It can be used only once per session object, once called the session is actually started.

When getURL returns an error, it means no streaming URL can be found. It has to trigger a specific behaviour on the application (error message, dialog...) and stopStreamingSession has to be called. Find more details about getURL errors on the session errors page.

It is recommended to perform this call on a different thread than the main thread, the method runs HTTP requests.

info

This method has to be called even for non-Broadpeak content URLs. In this case, the method will return the same URL.

// In the onPlayerReady callback, get the stream URL from SmartLib
const onPlayerReady = (player: THEOplayer) => {
    ...
    session.getURL(contentURL).then(result => {
    if (!result.isError()) {
        const mySources : SourceDescription = {
            sources: [
            {
                src: result.getURL(),
                type: result.getURL().indexOf('.m3u') > -1 ? 'application/x-mpegURL' : 'application/dash+xml'
            }
            ]
        };
        // Setting the source will automatically start playback
        player.source = mySources;
        
    } else {
        // Stop the session
        session.stopStreamingSession();
    }
}

3. Stop a streaming session

The stopStreamingSession method must be called each time the session is stopped:

• end users: when the playback is stopped by a user action
• loading errors: when the streaming session cannot be started through the getURL method
• player errors: when the player triggers a non-recoverable error during the playback (as a decoding error)
• application or any others actions: when the app is killed

// In the onPlayerReady callback, add a listener on destroy event
const onPlayerReady = (player: THEOplayer) => {
    ...
    player.addEventListener(PlayerEventType.DESTROY, () => {
        session?.stopStreamingSession();
    });
    ...
}

If the player generates a non-recoverable error during the playback (as a decoding error), call stopStreamingSession to stop the session.

const onPlayerReady = (player: THEOplayer) => {
    ...
    player.addEventListener(PlayerEventType.ERROR, (event: ErrorEvent) => {
        // refer to the THEOplayer error codes
        if (event.error.errorCode === someValue) {
            console.log('Unrecovable error code ' + event.error.errorCode + ', stopping session');
            session?.stopStreamingSession();
        }
    });
    ...