Modern UI
This sample demonstrates a modern, streaming-service style custom UI: a centered playback "pill" with rewind, play/pause and forward, a full-width seek bar, and rounded translucent control clusters.
Code
<theoplayer-ui
configuration='{"libraryLocation":"/path/to/theoplayer/","license":"your_theoplayer_license"}'
source='{"sources":{"src":"https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8"},"metadata":{"title":"Big Buck Bunny"}}'
>
<div slot="centered-chrome">
<div class="pill center-pill">
<theoplayer-seek-button seek-offset="-10"></theoplayer-seek-button>
<theoplayer-play-button></theoplayer-play-button>
<theoplayer-seek-button seek-offset="10"></theoplayer-seek-button>
</div>
</div>
<div class="bottom-chrome">
<theoplayer-control-bar>
<theoplayer-time-range></theoplayer-time-range>
</theoplayer-control-bar>
<div class="bottom-row">
<span class="pill">
<theoplayer-play-button></theoplayer-play-button>
<span class="volume">
<theoplayer-mute-button></theoplayer-mute-button>
<theoplayer-volume-range></theoplayer-volume-range>
</span>
<theoplayer-time-display show-duration></theoplayer-time-display>
</span>
<span class="spacer"></span>
<span class="pill">
<theoplayer-language-menu-button menu="language-menu"></theoplayer-language-menu-button>
<theoplayer-fullscreen-button></theoplayer-fullscreen-button>
</span>
</div>
</div>
<theoplayer-language-menu id="language-menu" slot="menu" hidden></theoplayer-language-menu>
<theoplayer-error-display slot="error"></theoplayer-error-display>
</theoplayer-ui>