Playing

AutoStart

• autoplay is a boolean value that determines whether the player should automatically start playing the video as soon as it is loaded. If autoplay is true, the player will start playing the video automatically. If autoplay is false, the player will not start playing the video automatically.
• pauseOtherVideos is a boolean value that determines whether the player should pause any other videos that are currently playing when it starts playing. If pauseOtherVideos is true, the player will pause any other videos that are playing when it starts. If pauseOtherVideos is false, the player will not pause any other videos.
• focusOnAutostart is a boolean value that determines whether the player should be given focus when it starts playing the video. If focusOnAutostart is true, the player will be given focus when it starts playing. If focusOnAutostart is false, the player will not be given focus.
• muted is a boolean value that determines whether the player should start playing the video with the sound turned off. If muted is true, the player will start playing the video with the sound turned off. If muted is false, the player will start playing the video with the sound turned on.
• loop is a boolean value that determines whether the player should start playing the video again from the beginning when it reaches the end. If loop is true, the player will start playing the video again from the beginning when it reaches the end. If loop is false, the player will not loop the video.

  vpPlayer("vp-player-autoplay").setup({
    video: {
      file: "the_video_file_path",
    },
    config: {
        autoplay: true,
        pauseOtherVideos: true,
        focusOnAutostart: false,
        muted: true,
        loop: false
    },
  });

PROPERTY	DESCRIPTION
autoplay boolean	Configures the property that the player uses to determine if it should request another video after the video has ended.
pauseOtherVideos boolean	Specifies if other videos should be paused when one video is pressed on to play.
focusOnAutostart boolean	Enable keyboard control for the player even if it autostarts without interaction.
muted boolean	Configures if the player should start muted or not.
loop boolean	Specifies if the video should be repeated or not when it ends.

Focus Mode on VP Player

You can use keyboard shortcuts when player is in focus to do different actions:

• Spacebar - Pause/Play video playback
• Up Arrow/Down Arrow - Increase or decrease volume by 10%
• Right Arrow/Left Arrow - Seek forward or backwards by 5 seconds
• M - Mute/Unmute video volume
• F - Enter or exit fullscreen

AutoStart on Load

The auto start on load properites allows you to specify whether the video should automatically start playing when it is loaded, and includes additional properties for specifying different autostart behavior depending on the device being used.

  vpPlayer("vp-player-autostartOnLoad").setup({
    video: {
      file: "the_video_file_path",
    },
    config: {
      autostartOnLoad: {
        state: true,
        onMobile: false,
        onData: false,
      },
    },
  });

PROPERTY	DESCRIPTION
autoStartOnLoad Object	An object with the autostart properties of the player when the page loads.
state Boolean	Specifies if video should play on page load.
onMobile Boolean	Specifies if playback should start on load when the user is on mobile.
onData Boolean	Specifies if playback should start on load when the user is on mobile data.

AutoStart on Viewable

The autostartOnViewable property allows you to specify whether you want the video to automatically start playing when it becomes viewable in the viewer's browser window (also known as the "viewport"). This can be useful for improving the user experience by avoiding situations where the user has to manually start the video.

vpPlayer("vp-player-autostartOnViewable").setup({
    video: {
        file: "the_video_file_path",
    },
    config: {
        autostartOnViewable: {
            state: true,
            onMobile: false,
            onData: false,
            percentageViewable: 0.5,
        },
    },
});

PROPERTY	DESCRIPTION
autoStartOnViewable Object	An object with the autostart properties of the player depending on its viewability.
state Boolean	Specifies if video should play when it is viewable.
onMobile Boolean	Specifies if this property should be on when the user is on mobile data.
onData Boolean	Specifies if this property should be on when the user is on mobile data.
percentageViewable Number	Value range: 1-0, specifies what percentage of the video should be visible for video to start.

AutoPause on Viewable

The autopauseOnViewable property allows you to specify whether you want the video to automatically pause playing when it is not viewable in the viewer's browser window (also known as the "viewport"). This can be useful for improving the user experience by avoiding situations where the user has to manually stop the video.

 vpPlayer("vp-player-autopauseOnViewable").setup({
    video: {
      file: "the_video_file_path",
    },
    config: {
      autopauseOnViewable: {
        state: true,
        percentageViewable: 0.5,
      },
    },
  });

PROPERTY	DESCRIPTION
autoPause Object	An object with the auto pause properties.
state Boolean	Specifies if the video should stop when the player is out of view.
percentageViewable Number	Value range: 1-0, specifies what percentage of the video should be visible for video to start.

Playback Rates

VP Player allows you to setup different playback speeds for videos that will be availiable for users to be selected from menu

playback rates values

Possible values for playbackRate property are from 0.01 to 4.00

vpPlayer("vp-playback-rates").setup({
    video: {
        file: ""
    },
    config: {
        playbackRates: [0.25, 0.5, 0.75, 1, 1.5, 2]
    },
});