• Forward button feature is used to skip forward the video X seconds with custom seconds configurable to be skipped.

  • Yes, we can configure the skip seconds in this feature.

How to configure and enable this feature

  {
    "advanced_features": [
      {
        "name": "forward_button",
        "visible": true,
        "data": {
         "forwardSeconds": 20,
         "color": "yellow"
        },
        "position": 3
      }]
  }

Data property

Table 1. Forward button data property
Property Value Description

color

string

Button color.

forwardSeconds

Number

Skip second to video.

Example

// How to implement the player
const video = document.querySelector('#video');
const videoContainer = document.querySelector('#videoContainer')
const hplayer = new HPlayer(video,videoContainer, {
  basic: {
    source: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
  },
  advanced_features: [
      {
        "name": "forward_button",
        "visible": true,
        "data": {
         "forwardSeconds": 20,
         "color": "yellow"
        },
        "position": 3
      }]
})
hplayer.init_();

CSS Customization

  • To customise the forward button you can directly edit the class named ".forward-button"

  • To customise the forward seconds displayed on the player UI you can edit class named ".forward-seconds"

Snippet

.forward-button {
  // add your css properties
}

// add your css properties
.forward-seconds {
  font-size: 8px;
  text-align: center;
  position: absolute;
  margin-left: -17px;
  margin-top: 11px;
}