Skip to main content

Setup

Welcome to the Setup section of this documentation. In this section, you will find detailed instructions on setting up VP Player on your page, handling multiple players on a single page, and the complete reference for basic and advanced player configuration options.

VP Player is highly customizable, allowing you to modify and change nearly every aspect of the player to fit your preferences. However, before configuring your player, you must first set it up. The following section provides detailed instructions on this process.

Setup description​

The basic syntax of creating the player goes like this:

  • vpPlayer("div").setup(config)

The table below gives more detailed descriptions on div and options.

ATTRIBUTEDESCRIPTION
div* string(Required) The target div that VP Player will replace.
config* JSON(Required) Configuration options that will tell your player how to render itself.
Configuration

All different properties in configuration, will be described through this documentation!

Setup process​

To set up VP Player, you'll need to follow these steps:

  1. Make sure you are importing vpPlayer script:

    <script src="https://host.vpplayer.tech/player/latest/vpplayer.js"></script>

  2. First, create a div element with a unique ID that you'll use to attach the player to later:

    <div id="vp-player-setup"></div>

  3. Next, you'll need to set up the player by calling the vpPlayer function and passing it the ID of the div element you created in step 2. This will create the player itself.

    <script>
      vpPlayer("vp-player-setup").setup(config);
    </script>

  4. Finally, you'll need to provide some basic configuration options for the player. These options can include things like the file path for the video you want to play.

    var config = {
      video: {
        file: "the_video_file_path"
      }
    }

Setup Using VP Player JSON Configuration​

VP Player supports two flexible approaches for loading and configuring players from the JSON configuration URL. Choose the method that best fits your use case:

General VP Player JSON Configuration URL​

The VP Player JSON configuration URL follows this structure:

https://host.vpplayer.tech/player/{playerId}/{videoId}.json

Option 1: Direct URL Setup​

Pass the JSON configuration URL directly to the setup() method. This is the simplest approach when you have a pre-built VP configuration URL available.

<script>
    const playerId = "{playerId}";
    const videoId = "{videoId}";
    
    // Pass the JSON URL (template literal) directly to setup
    vpPlayer("vp-player").setup(`https://host.vpplayer.tech/player/${playerId}/${videoId}.json`);
</script>

Option 2: Fetch & Modify Configuration​

Fetch the JSON configuration, modify any properties as needed, then pass the configuration object to setup(). Since the JSON has the same structure as a normal config object, you can adjust any property before initialization.

<script>
    const playerId = "{playerId}";
    const videoId = "{videoId}";

    const setupPlayer = async () => {
        const response = await fetch(`https://host.vpplayer.tech/player/${playerId}/${videoId}.json`);
        const configuration = await response.json();

        // Example modification: start muted
        configuration.video = configuration.video || {};
        configuration.video.muted = true;

        vpPlayer("vp-player").setup(configuration);
    };

    setupPlayer();
</script>

Setup example​

VP Player example

Here is an example of VP Player configuration with these settings:

  • Muted autoplay
  • Loop content
  • Show a logo on control bar
  • Responsive 16:9 size
  • Playback Rate controls are enabled
  • Localization is in English
<div style='position:relative; overflow:hidden; padding-bottom:56.25%'>
    <iframe src='https://cdn.vpplayer.tech/${projectId}/player/${playerId}/${videoId}.html' width='100%' height='100%'
        frameborder='0' scrolling='auto' title='VP Homepage Video' style='position:absolute;' allowfullscreen>
    </iframe>
</div>
Config and Implementation
  • You can view the config here.
  • You can view the script implementation here.