How to integrate Accurate Player Controls

This is another optional package that extends Accurate Player by providing a default, sensible UI layer on top of the player. The UI layer reacts to events in the player and automatically adapts to however you configure the player with regards to implementation and plugins. Of course, you can also customise the UI layer by changing colors and fonts, or create your own UI layer entirely.

<script src="./node_modules/@accurate-player/accurate-player-controls/bundle.js"></script>
...
<style>
.video-container { position: relative; }
</style>
...
<div class="video-container">
<video></video>
<apc-controls></apc-controls>
</div>

Note it's important that the container element for <apc-controls> has position either relative or absolute to achieve the correct layout since it fills its parent absolutely.

To initialise the UI controls, simply provide it with a reference to the video element and the player object, like so:

document.getElementsByTagName("apc-controls")[0].init(
HTMLVideoElement,
player
);

Settings

There are a number of settings that can be configured when initialising the player. The snippet below shows the default values to the available settings:

const settings = {
autoHide: true,
saveLocalSettings: true,
volume: 1,
togglePlayOnClick: true,
};

document.getElementsByTagName("apc-controls")[0].init(
HTMLVideoElement,
player,
settings
);

  • autoHide: Decides if the UI controls should be visible at all times or hidden when playing / when the cursor is outside of the player.
  • saveLocalSettings: Whether to save user settings like time format & volume in localStorage between sessions.
  • volume: Sets the initial value for the volume of the player, should be a value between 0 and 1.
  • togglePlayOnClick: Determines whether or not the playback should be paused when clicking the video.

Note Default values of autoHide and volume will be overridden by the user settings if saveLocalSettings is true. The correct way of overriding the values to always match the default values is to set saveLocalSettings: false.

Theming

The UI controls are customisable when it comes to colors via CSS variables. The code below shows our default values and you can easily test this by adding any of these rules to e.g. the <body> element.

--apc-primary-text: #d8d8d8;
--apc-secondary-text: rgba(255, 255, 255, 0.7);
--apc-disabled-text: rgba(255, 255, 255, 0.5);
--apc-icon-color: rgb(255, 255, 255);

--apc-primary: #6280c0;
--apc-primary-hover: #6280c022;

--apc-font-family: 'roboto', sans-serif;
--apc-font-size-base: 100%;

Getting started with Accurate Player development Encoding multi-bitrate content for optimal DASH delivery