Media

The media player plays video and audio with everything an accessible player needs: captions and subtitles in several languages, chapters, thumbnails over the scrub bar, a transcript beside or under the picture that follows along and can be searched and downloaded, and text descriptions read out to screen readers.

Viewers set their own caption size, colour and background, bookmark moments with a note, change speed, loop a stretch and go full screen or picture-in-picture. Every control works from the keyboard; press ? in the player for the shortcuts.

A site safety induction

A short induction for a fictional distribution centre, with English captions, French subtitles, four chapters, scrub thumbnails and text descriptions. Click a line of the transcript to go to it; the buttons below use the same methods your page would.

Find "forklift"

Repeat "On the floor"

Stop repeating

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-media-player id="mp-induction" label="Site safety induction" src="assets/media/induction.mp4" poster="assets/media/induction-poster.jpg" transcript="auto" file-name="induction-transcript" style="inline-size: 100%; --bmx-media-player-panel-height: 18rem"></bmx-media-player>

As audio, with bookmarks

The same recording as an audio player: a compact bar with the transcript under it. Bookmark a moment with the bookmark button or B and give it a note; your page is told each time and keeps them wherever it keeps the listener's things.

The bookmarks your page would save

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-media-player id="mp-audio" kind="audio" label="Induction, audio only" src="assets/media/induction.mp4" transcript="below" rate="1.25" style="inline-size: 100%; --bmx-media-player-panel-height: 20rem"></bmx-media-player>

Captions the way the viewer reads them

Size, colour and background come from the player's settings menu, or from your page. Choose one here and the player above changes too; bmxCaptionStyleChange tells your page when a viewer chooses their own, so it can be remembered next time.

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-radio-group id="mp-size" label="Caption size" orientation="horizontal" value="100">
  <bmx-radio value="75" label="75%"></bmx-radio>
  <bmx-radio value="100" label="100%"></bmx-radio>
  <bmx-radio value="150" label="150%"></bmx-radio>
  <bmx-radio value="200" label="200%"></bmx-radio>
</bmx-radio-group>
<bmx-radio-group id="mp-colour" label="Caption colour" orientation="horizontal" value="white">
  <bmx-radio value="white" label="White"></bmx-radio>
  <bmx-radio value="yellow" label="Yellow"></bmx-radio>
  <bmx-radio value="cyan" label="Cyan"></bmx-radio>
</bmx-radio-group>
<bmx-radio-group id="mp-back" label="Caption background" orientation="horizontal" value="translucent">
  <bmx-radio value="solid" label="Solid"></bmx-radio>
  <bmx-radio value="translucent" label="See-through"></bmx-radio>
  <bmx-radio value="none" label="None"></bmx-radio>
</bmx-radio-group>