Skip to main content

Displaying Now Playing Info on the Lock Screen (Video + Ads)

This guide explains how to display Now Playing information (including artwork and ad metadata) on the lock screen for both video and ads.

For audio-specific lock screen configuration, see Audio Player.

1. Create the Player​

First, create the player using the required playerConfig:

const playerConfig: PlayerConfig = {
  mediaURL: 'mediaUrl',
  mediaType: 'HLS/DASH....',
  useCustomPlayerControls: false,
};

const player = await createPlayer(playerConfig);

2. Set Now Playing Info During Video Playback​

To display Now Playing information during video playback:

const playingInfo: PlayingInfo = {
  assetUrl: playerConfig?.mediaURL,
  mediaType: playerConfig?.mediaType,
  title: playerScreenParams.movieAsset.name || 'Unknown Title',
  artist: 'Unknown Artist',
};

player.setNowPlayingInfo(playingInfo);

3. Set Artwork in Now Playing Info​

To display artwork on the lock screen:

const artWorkUrl = 'artWorkUrl'; // Provide image URL
await player.setNowPlayingArtworkImage(artWorkUrl);

4. Enable Duration Display​

If you want the media duration to be shown in the Now Playing info, enable assignRemoteActions in the player preferences when creating the player:

player.setPlayerPreference({
  assignRemoteActions: true,
});

5. Update Now Playing Info During Advertisements​

To display ad-specific information on the lock screen, update the Now Playing metadata when an ad break starts:

const playerListener = {
  // Triggered when an ad break starts
  onAdBreakStart(adBreakInfo: AdPlayerAdBreakInfo): void {
    const player = playerRef.current;
    if (!player) return;

    const playingInfo: PlayingInfo = {
      title: 'Advertisement',
      // Add additional ad-related info here
    };

    player.setNowPlayingInfo(playingInfo);
  },
};

6. Restore Main Content Info After Ads​

When the ad break ends, restore the Now Playing info for the main content:

const playerListener = {
  // Triggered when an ad break ends
  onAdBreakEnd(adBreakInfo: AdPlayerAdBreakInfo): void {
    const player = playerRef.current;
    if (!player) return;

    const playingInfo: PlayingInfo = {
      assetUrl: 'mediaURL',
      mediaType: 'HLS',
      title: 'Unknown Title',
      artist: 'Unknown Artist',
    };

    player.setNowPlayingInfo(playingInfo);
  },
};

7. Attach the Listener to the Player​

Finally, attach the listener to the player:

player.addListener(playerListener);