Configuration

This document provides basic configurations for the VP Player and its basic features. For the full configuration options, see the documentation. The following configurations are covered:

• Video details
• Playlist
• Player size

Video details

You can set up the video details for the player, which can be used by the player for various features based on the configuration. Here is an example of how to set up the video details:

vpPlayer("video-details-vp").setup({
    video: {
        file: "the_video_file_path",
        title: "",
        description: "",
        publishDate: "",
        duration: 0,
        description: "",
        thumbnail: "",
        filmstrip: "",
        author: "",
        source: "",
        tags: []
    }
});

PROPERTY	DESCRIPTION
video Object	This object contains in itself all of the properties shown below.
videoId string	The ID of the video.
assetId string	The ID used to setup DRM support.
fpsCertificateUrl string	The URL of to the FPS (Fair Play Streaming) Certificate.
widevineLicenseUrl string	The URL of the Widevine License.
title string	The title of the video.
description string	The description of the video.
file string	The URL of a single video file or live stream (mp4, m3u8).
filmstrip string	The URL of an image that the player will use to display a preview when seeking. (Must be 10x10 and 16:9 for now).
thumbnail string	The URL of an image that serves as a thumbnail when the video has not started playing.
tracks Array	Array of track objects that specify the different subtitles that the media item has.
duration int	The duration of the video.
live boolean	A boolean indicating whether the video is live.
liveType number	A string - realtime, slowtv, etc.
advertising boolean	A boolean indicating whether ads are on for the video.
related string	This property represents the link of a playlist which will be parsed so that it can be played by the video player.
socialMedia array[string]	An array of strings specifying the social media that should appear in the share functions. These are all-capital strings with the official social media names, e.g FACEBOOK, LINKEDIN, REDDIT, etc. Share functions won't be available if this array is left blank"].

Playlists

You can set up a playlist on the player, which will automatically play the next video in the playlist after the current video ends. Here is an example of how to set up a playlist:

vpPlayer('playlsit-vp').setup({
        projectId: "vp-player-projectId",
        config: {
            configId: "vp-player-configId",
            controls: {
                relatedButton: true
            },
            showRelatedOnPause: {
                state: true,
                onMobile: false,
                from: 0.9,
            }
        },
        video: {
            file: 'the_video_file_path',
            playlist: {
                state: true,
                playlistVideoIndex: 0,
                videos: [
                    {
                        videoId: "vp-player-videoId",
                        title: "Video Title",
                        thumbnailUrl: "the_video_thumbnail_path",
                        duration: 0 // video duration
                    },
                    {
                        vidoeId: "vp-player-videoId",
                        title: "Video Title",
                        thumbnailUrl: "the_video_thumbnail_path",
                        duration: 0 // video duration
                    },
                    {
                        vidoeId: "vp-player-videoId",
                        title: "Video Title",
                        thumbnailUrl: "the_video_thumbnail_path",
                        duration: 0 // video duration
                    },
                ]
            }
        }
    });

PROPERTY	DESCRIPTION
playlist Object	An object which is used to setup a playlist of videos in the player.
state boolean	Determines whether the playlist should be setup by the player.
playlistId string	Allows the use of a playlist which has already been created on vpPlayer admin (takes priority over the videos array).
playlistVideoIndex int	Determines which video in the playlist will be played first.
highlightCurrentVideo boolean	Determines whether the current video being played should be highlighted in the playlist popup.
algorithm string	If there is no playlistId and no videos array, then this algorithm will be used to determine what playlist to show.
title string	Sets title for the playlist being used.
videos array[object]	An array of objects following the same specified requirements of the video object used for the setup of the player.

Player size

The VP Player allows you to set the size of the player either through the DIV container or by setting the size properties directly in the config.size property. You can set a FIXED size or a RESPONSIVE size. Here are examples of how to set the player size:

vpPlayer('vp-player-fixed').setup({
    config: {
        size: {
            sizeType: "FIXED",
            width: 500,
            height: 500
        }
    },
    video: {
        file: 'the_video_file_path',
    }
});


vpPlayer('vp-player-responsive').setup({
    config: {
        size: {
            sizeType: "RESPONSIVE",
            aspectRatio: "16:9"
        }
    },
    video: {
        file: 'the_video_file_path',
    }
});

PROPERTY	DESCRIPTION
size Object	An object that contains information about the size of the video file.
sizeType string	A property that indicates the type of the size of the video file. This can either be FIXED or RESPONSIVE.
aspectRatio string	A property that inidcates the aspect ratio of the video file. This can be 16:9, 4:3, 1:1, etc.
width number	An integer specifying the width of the player.
height number	An integer specifying the height of the player.

If the size type is set to "FIXED", you can set the width and height of the player in pixels by specifying the width and height properties, respectively. For example:

config: {
    size: {
        sizeType: "FIXED",
        width: 640,
        height: 360
    }
}

If the size type is set to "RESPONSIVE", you can set the aspect ratio of the player using the aspectRatio property. The aspect ratio is specified as a string in the format W:H, where W is the width and H is the height. For example, to set the aspect ratio to 1:1, you would use:

config: {
    size: {
        sizeType: "RESPONSIVE",
        aspectRatio: "1:1"
    }
}

The VP Player will then automatically adjust the size of the player to maintain this aspect ratio as the size of the container element changes.