< 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 build using different components exposed by Player UI Framework. To add Rewind and Fast-Forward button, QuickSeekButton component can be add to 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 in the bitmovin.playerui.UIManager along with player to build custom UI.

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

var 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',
};

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

player.load(source);

buildUI.js js
function buildUI() {
  let mainSettingsPanelPage = new bitmovin.playerui.SettingsPanelPage({
    components: [
      new bitmovin.playerui.SettingsPanelItem(bitmovin.playerui.i18n.getLocalizer('settings.video.quality'), new bitmovin.playerui.VideoQualitySelectBox()),
      new bitmovin.playerui.SettingsPanelItem(bitmovin.playerui.i18n.getLocalizer('speed'), new bitmovin.playerui.PlaybackSpeedSelectBox()),
    ],
  });

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

  let controlBar = new bitmovin.playerui.ControlBar({
    components: [
      settingsPanel,
      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.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