< See all demos

Rewind/Fast-Forward

Custom player UI with rewind and fast-forward buttons

Demo Source Code

Click the rewind or fast-forward button in the control panel to seek -/+ 10 seconds



Setting up custom UI

Custom player UI can be built using different components exposed by Player UI Framework. To add rewind and fast-forward buttons, the QuickSeekButton component can be added to the ControlBar.

The QuickSeekButton component is a button that allows the user to seek forward or backward by a certain amount of time. The amount of time can be configured by setting the seekSeconds property.

The UIContainer returned from the function buildUI is passed to bitmovin.playerui.UIManager along with the player to build a custom UI.

setup.js js
const conf = {
  key: '<YOUR PLAYER KEY>',
  ui: false
};

const source = {
  dash: 'https://cdn.bitmovin.com/content/assets/sintel/sintel.mpd',
  hls: 'https://cdn.bitmovin.com/content/assets/sintel/hls/playlist.m3u8',
  poster: 'https://cdn.bitmovin.com/content/assets/sintel/poster.png',
};

const player = new bitmovin.player.Player(document.getElementById('player-container'), conf);
const uiManager = new bitmovin.playerui.UIManager(player, [{
  ui: buildUI(),
}]);

player.load(source);

buildUI.js js
function buildUI() {
  let settingsPanel = new bitmovin.playerui.SettingsPanel({
    components: [],
    hidden: true,
  });

  let mainSettingsPanelPage = new bitmovin.playerui.SettingsPanelPage({
    components: [
      new bitmovin.playerui.DynamicSettingsPanelItem({
        label: bitmovin.playerui.i18n.getLocalizer('settings.video.quality'),
        settingComponent: new bitmovin.playerui.VideoQualitySelectBox(),
        container: settingsPanel,
      }),
      new bitmovin.playerui.DynamicSettingsPanelItem({
        label: bitmovin.playerui.i18n.getLocalizer('speed'),
        settingComponent: new bitmovin.playerui.PlaybackSpeedSelectBox(),
        container: settingsPanel,
      }),
    ],
  });
  settingsPanel.addComponent(mainSettingsPanelPage);

  let controlBar = new bitmovin.playerui.ControlBar({
    components: [
      new bitmovin.playerui.Container({
        components: [
          new bitmovin.playerui.PlaybackTimeLabel({ timeLabelMode: bitmovin.playerui.PlaybackTimeLabelMode.CurrentTime, hideInLivePlayback: true }),
          new bitmovin.playerui.SeekBar({ label: new bitmovin.playerui.SeekBarLabel() }),
          new bitmovin.playerui.PlaybackTimeLabel({ timeLabelMode: bitmovin.playerui.PlaybackTimeLabelMode.TotalTime, cssClasses: ['text-right'] }),
        ],
        cssClasses: ['controlbar-top'],
      }),
      new bitmovin.playerui.Container({
        components: [
          new bitmovin.playerui.PlaybackToggleButton(),
          new bitmovin.playerui.QuickSeekButton({ seekSeconds: -10 }),
          new bitmovin.playerui.QuickSeekButton({ seekSeconds: 10 }),
          new bitmovin.playerui.VolumeToggleButton(),
          new bitmovin.playerui.VolumeSlider(),
          new bitmovin.playerui.Spacer(),
          new bitmovin.playerui.SettingsToggleButton({ settingsPanel: settingsPanel }),
          new bitmovin.playerui.FullscreenToggleButton(),
        ],
        cssClasses: ['controlbar-bottom'],
      }),
    ],
  });

  return new bitmovin.playerui.UIContainer({
    components: [
      new bitmovin.playerui.BufferingOverlay(),
      new bitmovin.playerui.PlaybackToggleOverlay(),
      controlBar,
      new bitmovin.playerui.DismissClickOverlay({ target: settingsPanel }),
      settingsPanel,
      new bitmovin.playerui.TitleBar(),
      new bitmovin.playerui.ErrorMessageOverlay(),
    ],
    hideDelay: 2000,
    hidePlayerStateExceptions: [
      bitmovin.playerui.PlayerUtils.PlayerState.Prepared,
      bitmovin.playerui.PlayerUtils.PlayerState.Paused,
      bitmovin.playerui.PlayerUtils.PlayerState.Finished,
    ],
  });
}

Ready to get started?

Access your free account today by signing up for a trial

Start your trial