Methods

All methods are called on the player ref:

const playerRef = useRef<BBPlayerViewMethods>(null);

<BBPlayerView ref={playerRef} jsonUrl="..." />

// Call methods
playerRef.current?.play();

Playback Control

Method	Description
play()	Start or resume playback
pause()	Pause playback
seek(position: number)	Seek to absolute position (seconds)
seekRelative(offset: number)	Seek relative to current position (seconds, can be negative)

Volume Control

Method	Description
setVolume(volume: number)	Set volume (0.0–1.0)
setMuted(muted: boolean)	Mute or unmute

Layout Control

Method	Description
enterFullscreen()	Enter fullscreen in current orientation
enterFullscreenLandscape()	Enter fullscreen and force landscape
exitFullscreen()	Exit fullscreen and restore orientation
collapse()	Collapse the player (outstream)
expand()	Expand the player (outstream)

Content Loading

Primary API: loadWithContentIdAndType

Entity-type agnostic content loading. Naming follows the native SDK loadWith... convention:

loadWithContentIdAndType(contentId: string, contentType: string, autoPlay?: boolean, context?: LoadContext): void

Parameter	Type	Description
contentId	string	Numeric content ID
contentType	string	"mediaclip" / "c", "mediacliplist" / "l", or "project" / "p"
autoPlay	boolean	Auto-play after loading (default: true)
context	LoadContext	Optional playlist/collection context

// Load a clip
playerRef.current?.loadWithContentIdAndType('123456', 'mediaclip');

// Load a playlist
playerRef.current?.loadWithContentIdAndType('789', 'mediacliplist', true, {
  contextEntityType: 'MediaClipList',
  contextEntityId: '789',
  contextCollectionType: 'MediaClipList',
  contextCollectionId: '789',
});

// Load a project
playerRef.current?.loadWithContentIdAndType('42', 'project', false);

info

To load content from a different publication or playout, update the jsonUrl prop on the BBPlayerView component — this triggers a full player reinit via the native SDK.

LoadContext

Passing context enables playlist navigation (next up, previous/next):

Field	Type	Description
contextEntityType	'MediaClipList'	Type of containing entity
contextEntityId	string	Playlist ID for "next up" list
contextCollectionType	'MediaClipList'	Collection type
contextCollectionId	string	Collection ID

By JSON URL (convenience)

Use loadWithJsonUrl when you only have a BB JSON URL and want to avoid parsing it yourself. The URL is parsed to extract the content ID and type; the publication and playout from the URL are not used (the player uses its own configured playout).

loadWithJsonUrl(jsonUrl: string, autoPlay?: boolean, context?: LoadContext): void

playerRef.current?.loadWithJsonUrl(
  'https://example.bbvms.com/p/default/c/123456.json',
  true
);

note

Prefer loadWithContentIdAndType when the content ID and type are known — it is more explicit and avoids URL parsing.

Deprecated: loadClip

/** @deprecated Use loadWithContentIdAndType('id', 'mediaclip') instead */
loadClip(clipId: string, options?: LoadClipOptions): void

loadClip only supports mediaclips and incorrectly passed the playout option as an analytics initiator rather than switching the player playout. Kept for backwards compatibility.

Legacy Type-Specific Load Methods

These are still supported for backward compatibility:

loadWithClipId(clipId: string, initiator?, autoPlay?, seekTo?, context?): void
loadWithClipListId(clipListId: string, initiator?, autoPlay?, seekTo?, context?): void
loadWithProjectId(projectId: string, initiator?, autoPlay?, seekTo?, context?): void
loadWithClipJson(clipJson: string, initiator?, autoPlay?, seekTo?, context?): void
loadWithClipListJson(clipListJson: string, initiator?, autoPlay?, seekTo?, context?): void
loadWithProjectJson(projectJson: string, initiator?, autoPlay?, seekTo?, context?): void

State Query

Primary API

getPlayerState(): Promise<BBPlayerState | null>

Returns complete player state in one call:

const state = await playerRef.current?.getPlayerState();
if (state) {
  console.log(state.state);      // 'PLAYING'
  console.log(state.duration);   // 120.5
  console.log(state.clip?.title); // 'My Video'
  console.log(state.volume);     // 0.8
  console.log(state.muted);      // false
}

Individual Getters

Method	Return Type
getDuration()	Promise<number | null>
getVolume()	Promise<number | null>
getMuted()	Promise<boolean | null>
getPhase()	Promise<string | null>
getState()	Promise<string | null>
getMode()	Promise<string | null>
getClipData()	Promise<{ id?, title?, description?, length? } | null>
getProjectData()	Promise<{ id?, name? } | null>
getPlayoutData()	Promise<{ name? } | null>

Lifecycle

Method	Description
destroy()	Clean up the player and release all resources
autoPlayNextCancel()	Cancel auto-play of next clip

Casting

Method	Description
showCastPicker()	Open the Chromecast device picker