Appearance

Appearance is an object that contains all the player-specific appearance options for the SX PlayerSDK.

Available appearance options are:

const appearance ={
    controls: true,
    volume: true,
    fullscreen: true,
    playBar: true,
    playBackSpeed: true,
    playerColor: 'rgba(31,64,255,0.8)',
    autoplay: "muted",  
    bigPlayButton: true,
    quality: false,
    settings: true,
    pictureInPictureToggle: false,
    endScreen: "loop-video"
}

controls

Enables the main control bar for the player.

Type: bool
Defaults: true

volume

Displays the volume control, allowing the user to adjust the sound level.

Type: bool
Defaults: true

fullscreen

Provides a button to toggle fullscreen mode.

Type: bool
Defaults: true

playBar

Shows the play bar, which includes the timeline for tracking video progress.

Type: bool
Defaults: true

playBackSpeed

Adds an option for adjusting the playback speed of the video.

Type: bool
Defaults: true

playerColor

Sets the color of the player

css color in rgba or hex format

Type: string
Defaults: rgba(31,64,255,0.8)

autoplay

Automatically plays the video on load

Type: string (enum)
Defaults: "muted" Values: "muted", "play", "any"

bigPlayButton

Displays a large play button in the center of the video player when the video is paused or not started.

Type: bool
Defaults: true

quality

Disable/enable the option to change the video quality.

Type: bool
Defaults: false

settings

Shows the settings menu for additional player options.

Type: bool
Defaults: true

pictureInPictureToggle

Disable/enable the picture-in-picture mode toggle, which allows the video to be played in a small overlay window that stays on top of other windows.

Type: bool
Defaults: false

endScreen

Configures the player to loop the video from the beginning once it ends.

Type: string string (enum)
Defaults: "loop-video" Values: "loop-video", "pause-last-frame", "reset-thumbnail"