API Reference

Bayes Web Player options

The options given below can be defined when instantiating the Bayes Web Player. You can find the options type here. More options and event callbacks will be added in future iterations of the Bayes Web Player.

Name	Type	Description	Default value
autoplay	boolean	Switches autoplay on/off	true
enableUi	boolean	Displays the default set of controls that are shipped with the Bayes Web Player	true
muted	boolean	Starts the player in a muted state	false
volume	number	Initial volume	50
detachable	boolean	Enable or disable the detachable functionality of the player	true
thumbnail	string	Thumbnail which is displayed before the stream is played	undefined
watermark	WatermarkOptions	Watermark which is displayed on top of the livestream	undefined
defaultErrorMessage	string	Error message to be displayed when an error occurs during the livestream	"Error occurred while retrieving playlist information. Please try again."
defaultOfflineMessage	string	Message to be displayed when the livestream is not broadcasted anymore	"Stream is offline."
defaultOfflineTimeoutDuration	number	Number of seconds the player has to wait before dispatching the offline screen	20
defaultTimeUpdateDuration	number	Interval in seconds for onPlayerTimeUpdate.	5
isWithinIFrame	boolean	Make sure to pass this option as true when the player is embedded within an iframe	false

Bayes Web Player callbacks

The below callbacks can be defined as a part of the options object when instantiating the Bayes Web Player.

Name	Type	Description
onReady	() => void	Callback to be invoked when the player is ready
onPlay	() => void	Callback to be invoked when the player starts playing the livestream
onError	() => void	Callback to be invoked when the player fires an error
onPause	() => void	Callback to be invoked when the player is paused
onStreamOffline	() => void	Callback to be invoked when the livestream is offline
onTimeUpdate	(metadata: PlayerMetadata) => void	Callback to invoked while the stream is being played. Will be executed every X seconds where X is the number of seconds passed as defaultTimeUpdateDuration in the options object. Contains the metadata object containing player low level information.

Bayes Web Player API

Bayes Web Player exposes the functionality given below to allow the website to control the player as required. More functionality will be added in the near future.

Player

The below APIs can be called directly on the Player instance. eg: player.init();

Name	Type	Description
constructor	(url: string, container: string / HtmlDivElement, options: PlayerOptions, doc?: Document) => Player	Bayes Web Player constructor
init	() => void	Initialize the Bayes Web Player instance on the provided container ID, with the given URI and options
play	() => void	Starts the video playback
pause	() => void	Pauses the video playback (Note: Restarted livestreams will begin at the live state)
destroy	() => boolean	Remove the embeddable player from the webpage
metadata	() => PlayerMetadata	Returns a player metadata object containing low-level information. (Player must be initialized)

Volume

Volume controls have been segregated into a different instance within the Bayes Web Player. And as such, the below APIs can be invoked via the volume instance. eg: player.volume.set(50);

Name	Type	Description
set	(value: IntRange<0, 101>) => void	Sets the volume of the player as required
increase	() => void	Increase the volume of the player by ten
decrease	() => void	Decrease the volume of the player by ten
mute	() => void	Mute the Bayes Web Player
unmute	() => void	Unmute the Bayes Web Player

User Interface

UI APIs can be invoked via the ui instance of the Bayes Web Player. eg: player.ui.toggle();

Name	Type	Description
fullscreen	() => void	Toggle fullscreen status
toggle	() => void	Toggle display of the controls (UI overlay which consists of playback controls)
detach	() => void	Toggle detachable status of the player
thumbnail	(value?: string) => void	Sets the thumbnail of the player (Image URL or data URI). If no argument is provided, the function removes the existing thumbnail.
watermark	(value?: WatermarkOptions) => void	Sets or unsets the watermark of the player. If the value argument is not provided, the function removes any existing watermark.
setStyles	(value?: StyleOptions) => void	Sets the styles for the elements of the player

Reference Types

PlayerOptions

type PlayerOptions = {
  autoplay?: boolean;
  muted?: boolean;
  enableUi?: boolean;
  volume?: IntRange<0, 101>;
  detachable?: boolean;
  thumbnail?: string;
  watermark?: WatermarkOptions;
  defaultErrorMessage?: string;
  defaultOfflineMessage?: string;
  defaultOfflineTimeoutDuration?: number;
  defaultTimeUpdateDuration?: number;
  styles?: StyleOptions;
  onReady?: () => void;
  onError?: () => void;
  onPlay?: () => void;
  onPause?: () => void;
  onStreamOffline?: () => void;
  onTimeUpdate?: (metadata: PlayerMetadata) => void;
  isWithinIFrame: boolean;
};

WatermarkOptions

type WatermarkPosition =
  | 'top-left'
  | 'top-right'
  | 'bottom-left'
  | 'bottom-right';

type WatermarkSize = 'sm' | 'md' | 'lg';

type WatermarkOptions = {
  src: string;
  position?: WatermarkPosition;
  size?: WatermarkSize;
  opacity?: number;
  onClick?: () => void;
};

StyleOptions

Currently style options are limited to updating the default, hover and background colors of the player controls, play button and the control bar. More options such as font sizes, font family, dimensions and positions will be added in future iterations of the Bayes Web Player.

const StyleProps = {
  color: 'color',
  colorHover: 'color-hover',
  backgroundColor: 'background-color'
};

const StyleKeys = {
  controls: 'controls',
  playButton: 'play-button',
  controlBar: 'control-bar'
};

type StyleParams = { [key in keyof typeof StyleProps]: string };

type StyleOptions = { [key in keyof typeof StyleKeys]?: StyleParams };

PlayerMetadata

The below information is accessible when the livestream is initialized and playing. More low-level information will be added in future iterations of the Bayes Web Player.

export type PlayerMetadata = {
  bandwidth?: number;
  bufferLength?: number;
  currentTime?: number;
  duration?: number | Infinity;
  mediaInfo?: {
    mediaBytesTransferred?: number;
    mediaRequests?: number;
    mediaRequestsAborted?: number;
    mediaRequestsErrored?: number;
    mediaRequestsTimedout?: number;
    mediaSecondsLoaded?: number;
    mediaSequence?: number;
  };
  playerDimensions?: {
    height?: number;
    width?: number;
  };
  timestamp?: number;
  videoPlaybackQuality?: {
    corruptedVideoFrames?: number;
    droppedVideoFrames?: number;
    totalVideoFrames?: number;
    framesPerSecond?: number;
  };
};