Skip to main content

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
},
});
PROPERTYDESCRIPTION
autoplay booleanConfigures the property that the player uses to determine if it should request another video after the video has ended.
pauseOtherVideos booleanSpecifies if other videos should be paused when one video is pressed on to play.
focusOnAutostart booleanEnable keyboard control for the player even if it autostarts without interaction.
muted booleanConfigures if the player should start muted or not.
loop booleanSpecifies 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,
},
},
});
PROPERTYDESCRIPTION
autoStartOnLoad ObjectAn object with the autostart properties of the player when the page loads.
state BooleanSpecifies if video should play on page load.
onMobile BooleanSpecifies if playback should start on load when the user is on mobile.
onData BooleanSpecifies 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,
},
},
});
PROPERTYDESCRIPTION
autoStartOnViewable ObjectAn object with the autostart properties of the player depending on its viewability.
state BooleanSpecifies if video should play when it is viewable.
onMobile BooleanSpecifies if this property should be on when the user is on mobile data.
onData BooleanSpecifies if this property should be on when the user is on mobile data.
percentageViewable NumberValue 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,
},
},
});
PROPERTYDESCRIPTION
autoPause ObjectAn object with the auto pause properties.
state BooleanSpecifies if the video should stop when the player is out of view.
percentageViewable NumberValue 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]
},
});