Configuration

This section outlines the available configuration options for VP Vertical Player. The player is highly customizable, offering a variety of settings to tailor the playback experience.

Configuration Overview

To configure the player, you need to provide a configuration object with the desired settings.

const configuration = {
    video:{
        ...
    },
    config:{
        ...
    }
}
vpVerticalPlayer("div").setup(configuration);

Below is a breakdown of the available configuration options.

Player video Configurations

Basic Video Options

PROPERTY	DESCRIPTION
video Object	This object contains in itself all of the properties shown below.
videoId string	Unique ID of the video.
file string	Video file URL.
title string	Video title.
description string	Video description.
thumbnail string	Thumbnail image URL.
shareUrl string	URL for sharing.
live boolean	Indicates if the video is a live stream.

Tracks (Subtitles)

PROPERTY	DESCRIPTION
tracks array	List of subtitle tracks.

Example:

"tracks": [{"file": "https://cdn.vpplayer.tech/subtitles/en.srt", "lang": "en", "label": "English"}]

Playlist Options

PROPERTY	DESCRIPTION
state boolean	Enables playlist mode.
playlistId string	Unique ID for the playlist.
playlistVideoIndex int	Determines which video in the playlist will be played first.
videos array	List of videos in the playlist.

Video Locking

PROPERTY	DESCRIPTION
isEnabled boolean	Enables video locking.
type string	The type of value (percentage or seconds).
value int	Lock activation value.

Player config Configurations

General Settings

PROPERTY	DESCRIPTION
muted boolean	Starts the player muted.
preload boolean	Enables next video preloading.
autoplay boolean	Starts next video playback automatically.
volume float	Default volume (0.0 - 1.0).
pauseOtherVideos boolean	Pauses other players on the page.
loop boolean	Loops the video.
soundSubtitleInversion boolean	Enables audio-subtitle inversion.

Player Size

PROPERTY	DESCRIPTION
sizeType string	Size mode (fixed or responsive).
height int	Height of the player.

Autostart Settings

PROPERTY	DESCRIPTION
state boolean	Enables autostart.
onMobile boolean	Autostarts on mobile.
onData boolean	Autostarts on mobile data.
percentageViewable float	Required viewable percentage.

Controls

PROPERTY	DESCRIPTION
play boolean	Play button visibility.
fullscreen boolean	Fullscreen button visibility.
share boolean	Share button visibility.
text boolean	Text display visibility.
seekbar boolean	Seekbar visibility.
settings boolean	Settings menu visibility.
time boolean	Time display visibility.

Playback Rates

Supported playback speeds:

[0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]

Localization

Language options for UI elements:

{
    "locale": "en",
    "controls": {
        "play": "Play",
        "pause": "Pause",
        "more": "more",
        "less": "less",
        "previous": "Previous",
        "next": "Next",
        "volume": "Volume",
        "mute": "Mute",
        "unmute": "Unmute",
        "settings": "Settings",
        "fullscreen": "Fullscreen",
        "minimize": "Exit Fullscreen",
        "live": "Live"
    },
    "settings": {
        "quality": "Quality",
        "subtitles": "Subtitles",
        "autoplay": "Autoplay",
        "playbackRate": "Speed",
        "auto": "Auto",
        "off": "Off",
        "normal": "Normal",
        "share": "Share",
        "copyLink": "Or copy link",
        "copy": "Copy",
        "close": "Close"
    }
}

Skin Customization

PROPERTY	DESCRIPTION
text string	Text color.
buttons object	Button styles.
seekbar object	Seekbar styles.

Buttons

PROPERTY	DESCRIPTION
icon string	Buttons icon color.
background string	Buttons background color.

Seekbar

PROPERTY	DESCRIPTION
rail string	Seekbar rail color.
buffer string	Seekbar buffer color.
progress string	Seekbar progress color.
dragger string	Seekbar dragger color.

Full Configuration Template:

{
    "video": {
        "videoId": "",
        "file": "",
        "title": "",
        "description": "",
        "thumbnail": "",
        "shareUrl": "",
        "live": false,
        "tracks": [],
        "playlist": {
            "state": false,
            "playlistId": "",
            "playlistVideoIndex": 0,
            "videos": []
        },
        "videoLocking": {
            "isEnabled": false,
            "type": "seconds",
            "value": 0
        }
    },
    "config": {
        "configId": "",
        "muted": false,
        "preload": true,
        "autoplay": false,
        "volume": 0.6,
        "pauseOtherVideos": true,
        "loop": false,
        "soundSubtitleInversion": false,
        "size": {
            "sizeType": "Fixed",
            "height": 650
        },
        "autostartOnLoad": {
            "state": false,
            "onMobile": false,
            "onData": false,
            "percentageViewable": 0.5
        },
        "autostartOnViewable": {
            "state": false,
            "onMobile": false,
            "onData": false,
            "percentageViewable": 0.5,
            "removeAfterPlay": false
        },
        "autopauseOnViewable": {
            "state": false,
            "onMobile": false,
            "onData": false,
            "percentageViewable": 0.5
        },
        "socialMedia": [],
        "playbackRates": [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
        "controls": {
            "play": true,
            "fullscreen": true,
            "share": true,
            "text": true,
            "seekbar": true,
            "settings": true,
            "time": true
        },
        "lang": {
            "locale": "en",
            "controls": {
                "play": "Play",
                "pause": "Pause",
                "more": "more",
                "less": "less",
                "previous": "Previous",
                "next": "Next",
                "volume": "Volume",
                "mute": "Mute",
                "unmute": "Unmute",
                "settings": "Settings",
                "fullscreen": "Fullscreen",
                "minimize": "Exit Fullscreen",
                "live": "Live"
            },
            "settings": {
                "quality": "Quality",
                "subtitles": "Subtitles",
                "autoplay": "Autoplay",
                "playbackRate": "Speed",
                "auto": "Auto",
                "off": "Off",
                "normal": "Normal",
                "share": "Share",
                "copyLink": "Or copy link",
                "copy": "Copy",
                "close": "Close"
            }
        },
        "skin": {
            "text": "#ffffff",
            "buttons": {
                "icon": "#ffffff",
                "background": "rgba(0, 0, 0, 0.25)"
            },
            "seekbar": {
                "rail": "#D9D9D966",
                "buffer": "#D9D9D966",
                "progress": "#FFFFFF",
                "dragger": "#ffffff"
            }
        }
    }
}

With these configurations, you can fully customize the VP Vertical Player to meet your needs.