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"
      }
    }

That's it! With these steps, you should have a basic VP Player set up and ready to go.

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/agmipoaa/player/ptkzurly/vjsnkiko.html' width='100%' height='100%'
        frameborder='0' scrolling='auto' title='VP Homepage Video' style='position:absolute;' allowfullscreen>
    </iframe>
</div>
Config and Implementation