Developer Guide Javascript API Reference Developer Tools Release Notes

Custom UI for JW8

How to modify the JW8 player CSS with custom fonts, an inline timeslider, and branded colors in the control bar & settings menu.

github
const playerInstance = jwplayer('player').setup({
  playlist: 'https://cdn.jwplayer.com/v2/media/jumBvHdL',
  skin: {
    name: 'alaska',
    url: 'assets/alaska.css'
  }
});

playerInstance.on('ready', function() {
  // Move the timeslider in-line with other controls
  const playerContainer = playerInstance.getContainer();
  const buttonContainer = playerContainer.querySelector('.jw-button-container');
  const spacer = buttonContainer.querySelector('.jw-spacer');
  const timeSlider = playerContainer.querySelector('.jw-slider-time');
  buttonContainer.replaceChild(timeSlider, spacer);
});
This player implementation is a Proof of Concept only provided to show the possibilities of the JW Player and Platform and should not be taken as an offer to create, edit or maintain custom integration or development.