BPlayer

BPlayer is a lightweight HTML5 media player with custom controls, HLS and MPEG-DASH support, captions, keyboard shortcuts, picture-in-picture, fullscreen, and persisted playback preferences.

Compatibility

BPlayer is designed for browsers. It depends on DOM media APIs and should be initialized client-side. If you use a framework with server-side rendering, import and create the player only in browser/client lifecycle code.

TypeScript

First-class types ship in the package — no @types/bplayer-js needed.

import BPlayer, { BPlayerInstance, BPlayerOptions, BPlayerSource } from 'bplayer-js'

const opts: BPlayerOptions = {
  controls: ['play', 'progress', 'volume', 'fullscreen'],
  chapters: [{ time: 0, label: 'Intro' }],
  shortcuts: true
}

const player: BPlayerInstance = new BPlayer('#player', opts)

player.on('progress:50', ({ currentTime, duration }) => {
  console.log(`Halfway: ${currentTime}/${duration}`)
})

// Strongly-typed setters
player.currentTime = 30
player.volume = 0.5

The types include every method, every event with its payload shape, and full coverage of the options bag (BPlayerOptions). Source maps for the JS bundles are not yet published (planned for a future minor).

Install

npm install bplayer-js

Basic Usage

Import the JavaScript and stylesheet, then create a player from a <video> or <audio> element.

import BPlayer from 'bplayer-js'
import 'bplayer-js/style.css'

const player = new BPlayer('#player')

player.on('ready', () => {
  console.log('BPlayer is ready')
})

<video id="player" poster="/poster.jpg">
  <source src="/video.mp4" type="video/mp4" />
  <track
    kind="captions"
    src="/captions.vtt"
    srclang="en"
    label="English"
    default
  />
</video>

You can also pass the media element directly:

const video = document.querySelector('video')
const player = new BPlayer(video)

Browser Global Usage

The UMD build exposes BPlayer on window.

<link rel="stylesheet" href="./dist/style.css" />
<script src="./dist/bplayer.umd.js"></script>

<video id="player">
  <source src="/video.mp4" type="video/mp4" />
</video>

<script>
  const player = new BPlayer('#player')
</script>

BPlayer also auto-initializes elements with the data-bplayer attribute after DOMContentLoaded.

<video data-bplayer>
  <source src="/video.mp4" type="video/mp4" />
</video>

CDN (jsDelivr / unpkg)

Once published, you can load BPlayer straight from a CDN without any build step:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bplayer-js/dist/style.css" />
<script src="https://cdn.jsdelivr.net/npm/bplayer-js/dist/bplayer.umd.js"></script>

<video data-bplayer>
  <source src="/video.mp4" type="video/mp4" />
</video>

unpkg mirror: https://unpkg.com/bplayer-js/dist/bplayer.umd.js

Optional Streaming Libraries

HLS and DASH playback require hls.js and dashjs as optional peer dependencies. The UMD build does not bundle them — load them via separate <script> tags before bplayer.umd.js when you need streaming support:

<!-- Only required for HLS sources (.m3u8) in non-Safari browsers -->
<script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
<!-- Only required for DASH sources (.mpd) -->
<script src="https://cdn.jsdelivr.net/npm/dashjs@4"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bplayer-js/dist/style.css" />
<script src="https://cdn.jsdelivr.net/npm/bplayer-js/dist/bplayer.umd.js"></script>

MP4/WebM sources work without those scripts. If you load an HLS/DASH stream without the matching library, BPlayer emits an error event with a clear message.

HLS and DASH

BPlayer automatically detects HLS and DASH from the <source> URL:

<video id="hls-player">
  <source src="/stream.m3u8" type="application/x-mpegURL" />
</video>

<video id="dash-player">
  <source src="/manifest.mpd" type="application/dash+xml" />
</video>

HLS playback uses hls.js when native HLS is not available. MPEG-DASH playback uses dashjs. When settings includes quality, BPlayer adds a manual quality selector with Auto plus available levels from highest to lowest.

new BPlayer('#hls-player', {
  settings: ['quality', 'speed'],
  hls: {
    withCredentials: true,
    headers: { Authorization: 'Bearer token' },
    config: { lowLatencyMode: true }
  }
})

// Or pass an existing hls.js instance if your app owns creation:
new BPlayer('#hls-player', {
  hls: hlsInstance
})

new BPlayer('#hls-player', {
  hls: { instance: hlsInstance }
})

Options

const player = new BPlayer('#player', {
  autoplay: false,
  muted: false,
  automute: false,
  volume: 1,
  clickToPlay: true,
  hideControls: true,
  resetOnEnd: false,
  seekTime: 10,
  controls: [
    'play-large',
    'play',
    'progress',
    'current-time',
    'duration',
    'mute',
    'volume',
    'chapters',
    'settings',
    'cc',
    'pip',
    'fullscreen'
  ],
  speed: {
    selected: 1,
    options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]
  },
  quality: {
    default: 720,
    options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240]
  },
  keyboard: {
    focused: true,
    global: false
  },
  captions: {
    active: false,
    language: 'auto',
    update: false
  },
  fullscreen: {
    enabled: true,
    fallback: true,
    iosNative: false,
    nativeMobile: false
  },
  storage: {
    enabled: true,
    key: 'bplayer'
  },
  loop: { active: false },
  ratio: '16:9',
  format: 'landscape',
  objectFit: 'contain',
  chapters: [],
  progressStyle: 'bar', // 'bar' (chapter ticks) | 'segments' (one bar per chapter)
  tooltips: {
    controls: true,
    seek: true,
    chapter: true       // chapter title inside the seek tooltip
  },
  settings: ['captions', 'quality', 'speed', 'loop'],
  disableContextMenu: true,
  autopause: true
})

Plyr-Compatible Options

BPlayer accepts common Plyr option names so existing Plyr integrations can migrate without changing their configuration shape. Supported compatibility aliases include:

• controls: ['captions'] maps to BPlayer's cc control.
• loop: { active: true } maps to native media looping.
• ratio, keyboard.enabled, fullscreen, captions, storage, settings, autopause, disableContextMenu, resetOnEnd, clickToPlay, seekTime, volume, muted, and autoplay are accepted.
• player.source = { type, sources, poster, tracks } is supported and updates MP4, HLS, DASH, posters, and text tracks.
• Unsupported provider-specific config such as YouTube/Vimeo options is accepted safely but has no effect on native HTML media playback.

Controls

The controls array controls which UI controls are rendered. Supported values:

• play-large
• play
• rewind
• fast-forward
• progress
• current-time
• duration
• mute
• volume
• chapters
• settings
• cc
• captions
• pip
• airplay
• download
• fullscreen

You can also use presets:

new BPlayer('#player', { controls: false })      // no controls
new BPlayer('#player', { controls: 'play' })     // centered play/pause only
new BPlayer('#player', { controls: 'minimal' })  // centered play/pause + bottom play
new BPlayer('#player', { controls: 'compact' })  // common compact controls

setControls() is authoritative at runtime: BPlayer normalizes the new list, destroys the current controls UI, and rebuilds it from the new array. Controls that are not present are removed from the DOM. For time display, current-time and duration are independent: include either one to show only that value, include both to show current / duration, include neither to hide time completely.

player.setControls(['play', 'mute'])
player.getControls()              // ['play', 'mute']
player.hideControl('current-time')
player.showControl('progress')
player.hasControl('duration')

Formats

Use ratio for exact aspect ratios or format for common layouts:

new BPlayer('#wide', { ratio: '16:9' })
new BPlayer('#square', { format: 'square', objectFit: 'cover' })
new BPlayer('#vertical', { format: 'vertical', objectFit: 'cover' })

Useful format values include landscape, square, vertical, portrait, story, reel, and shorts.

Playback Security (v1.4)

Two optional layers that make automated scraping (yt-dlp, downloaders, extensions) significantly more expensive without full DRM.

Signed segment tokens

Provide a JWT that the player injects as Authorization: Bearer on every HLS segment fetch, along with an X-BPlayer-Session header. Pass an async onTokenRefresh callback and the player refreshes automatically before expiry.

new BPlayer('#player', {
  security: {
    sessionId: 'sess_abc123',
    playbackToken: 'eyJhbGciOi...',   // initial JWT (short TTL)
    tokenTtlMs: 30_000,                // hint from server
    refreshLeadMs: 5_000,              // refresh 5s before expiry
    onTokenRefresh: async ({ sessionId, token }) => {
      const r = await fetch('/api/videos/xyz/playback-token/refresh', {
        method: 'POST',
        headers: { Authorization: `Bearer ${token}` }
      })
      const { token: fresh, ttl } = await r.json()
      return { token: fresh, ttl }
    }
  }
})

You can push a fresh token from the outside at any point:

player.setPlaybackToken(newJwt, 30_000)

The server (or Cloudflare Worker) can then reject any segment fetch whose token is missing/expired, whose Origin isn't whitelisted, or whose Range request isn't accompanied by the session header.

Session watermark

Bakes a subtle identifier into the video area — useful when a viewer screen-records the content, since the recording carries their session id. Position rotates automatically.

new BPlayer('#player', {
  watermark: {
    text: '[email protected]',
    opacity: 0.10,      // 0..1
    rotateMs: 30_000,   // cycle corners
    fontSize: '13px'
  }
})

// or later:
player.setWatermark('[email protected]', 0.10)

The watermark uses mix-blend-mode: difference so it remains legible over both bright and dark video content while staying nearly invisible.

Hot-swap signed HLS URL (v1.4.1)

When your CDN uses short-lived signed URLs (5-30 minutes typical), a viewer who leaves the tab open past the expiry sees a stream of 403s and the video stops playing. BPlayer emits a token-expired event when the underlying hls.js sees a 401/403 on any segment, manifest or key request, so you can fetch a fresh signed URL and swap it in without disrupting playback.

const player = new BPlayer('#player')

player.on('token-expired', async ({ status, details, url }) => {
  const r = await fetch(`/api/videos/${shortId}/play-token`)
  const { hlsUrl } = await r.json()
  player.setHlsUrl(hlsUrl)   // hls.js keeps currentTime, no visible disruption
})

Even nicer: refresh proactively before expiry so the error never fires.

setInterval(async () => {
  const r = await fetch(`/api/videos/${shortId}/play-token`)
  const { hlsUrl } = await r.json()
  player.setHlsUrl(hlsUrl)
}, 240_000)   // 80% of a 5-minute TTL

setHlsUrl(url) calls hls.loadSource(url) under the hood — the media element is not reinitialised, so currentTime, paused, volume and audio tracks are preserved. Returns true on success, false if the current source isn't HLS.

Autoplay and Automute

new BPlayer('#player', {
  autoplay: true,
  automute: true
})

automute is an alias for muted. It is useful because browsers usually only allow autoplay when media starts muted.

Methods

await player.play()
player.pause()
player.togglePlay()
player.stop()
player.restart()
player.forward(10)
player.rewind(10)
player.toggleMute()
player.increaseVolume(0.1)
player.decreaseVolume(0.1)
player.toggleFullscreen()
player.enterFullscreen()
player.exitFullscreen()
await player.togglePIP()
player.airplay()
player.download()
player.toggleCaptions()
player.selectCaption(1)
player.refreshCaptions()
player.setPlaylist(['/intro.mp4', '/lesson.mp4'])
player.next()
player.previous()
player.setQuality('auto')
player.setQuality(0)
player.setAudioTrack(0)
player.setSource('/video.mp4')
// v1.6.0 — warm up the next source seamlessly (transferred on next setSource).
// Useful for flows/playlists to avoid buffering on transition.
player.setControls(['play', 'progress', 'fullscreen'])
player.getControls()
player.showControl('mute')
player.hideControl('duration')
player.hasControl('progress')
player.destroy()

Preload + short-lived signed URLs (key)

Se a source é uma URL assinada com TTL curto, a URL roda antes do switch e o preload fica "preso" à URL antiga. Passe uma identidade estável (key, ex.: shortId) e re-chame preloadSource quando renovares a URL — o bplayer re-aponta a instância Hls pré-carregada (via hls.loadSource, como o setHlsUrl) em vez de destruir/recriar:

await player.preloadSource({ src: nextHlsUrl, type: 'hls', key: nextShortId })

// ...quando o token roda (mesmo conteúdo, URL nova):
await player.preloadSource({ src: nextHlsUrlV2, type: 'hls', key: nextShortId })

// setSource com key igual reutiliza o preload mesmo que o src tenha mudado:
await player.setSource({ src: nextHlsUrlV2, type: 'hls', key: nextShortId }, { autoplay: true })

key é opcional e 100% retro-compat: sem key, o comportamento é o de sempre (match por URL exacta).

Provider de URL tardia (getUrl)

Em vez de gerir o key à mão, pode dar um provider async — a URL é resolvida quando é precisa (sempre fresca) e re-resolvida por refreshPreload():

const getUrl = async () =>
  (await fetch('/api/videos/123/play-token')).then((r) => r.json()).then((d) => d.hlsUrl)

await player.preloadSource({ key: 'v123', type: 'hls', getUrl })
// se o token rodar antes do switch:
await player.refreshPreload('v123')
// ou resolver na hora do switch (sem src explícito):
await player.setSource({ key: 'v123', type: 'hls' }, { autoplay: true })

Preload partilhado entre instâncias (adoptable, opt-in)

Por omissão nada é partilhado. Com adoptable: true, um preload sobrevive a um destroy() (fica órfão no registo global, com TTL curto) e uma instância NOVA pode adoptá-lo por key — útil em remounts/rotas SPA:

await playerA.preloadSource({ src: hlsUrl, type: 'hls', key: 'v123', adoptable: true })
playerA.destroy()                                                     // órfão (TTL)
await playerB.setSource({ src: hlsUrl, type: 'hls', key: 'v123' })    // adopta-o

Segurança: opt-in explícito, TTL configurável (BPlayer.preloadTtlMs, 60s) e BPlayer.clearPreloads() para limpar (ex.: logout). A adopção é para a mesma sessão/página; use um key com escopo (conta/sessão) em cenários multi-conta.

Config de UI por-fonte (setSource)

await player.setSource({ src, type: 'hls', key, chapters, controls }, { autoplay: true })

chapters e controls são aplicados/reconstruídos pelo próprio player — evita o caller fazer setChapters/rebuildControls à mão a cada troca.

Eventos de preload

player.on('preloadready', ({ key, src }) => {})      // aquecido e pronto
player.on('preloadadopted', ({ key, src }) => {})    // adoptado de outra instância
player.on('preloaddestroyed', ({ key, src }) => {})  // descartado sem uso

Properties

player.currentTime = 30
console.log(player.currentTime)

player.volume = 0.5
player.muted = true
player.speed = 1.25

console.log(player.duration)
console.log(player.playing)
console.log(player.paused)
console.log(player.fullscreen)
console.log(player.pip)
console.log(player.captionsEnabled)
console.log(player.captionTracks)
console.log(player.chapters)
console.log(player.currentChapter)
console.log(player.getChapterAt(120))   // chapter covering 02:00
console.log(player.activeControls)

Chapters

Pass an array of { time, label } and add 'chapters' to controls. BPlayer renders chapter markers on the progress bar, names the chapter under the cursor in the seek tooltip, adds a chapters popover, and emits chapterchange as playback crosses chapter boundaries. player.getChapterAt(seconds) resolves the chapter covering any time.

const player = new BPlayer('#player', {
  controls: ['play', 'progress', 'current-time', 'duration', 'mute', 'chapters', 'settings', 'fullscreen'],
  chapters: [
    { time: 0, label: 'Intro' },
    { time: 43, label: 'Main section' },
    { time: 187, label: 'Outro' }
  ]
})

player.on('chapterchange', ({ index, chapter }) => {
  console.log(index, chapter)
})

player.seekToChapter(2)
console.log(player.currentChapterIndex)
console.log(player.currentChapter)

Segmented timeline

progressStyle: 'segments' splits the timeline into one rounded piece per chapter, separated by small gaps — the gaps mark the chapter boundaries. Segment widths follow the real chapter durations, the played/buffered fill is drawn per segment, and the whole track stays a single seek surface (dragging anywhere still seeks proportionally).

new BPlayer('#player', {
  progressStyle: 'segments', // default is 'bar' (continuous bar + chapter ticks)
  chapters: [
    { time: 0, label: 'Intro' },
    { time: 43, label: 'Main section' },
    { time: 187, label: 'Outro' }
  ]
})

/* Optional: tune the look */
.bplayer {
  --bplayer-segment-gap: 4px;
  --bplayer-segment-radius: 2px;
}

You can also provide chapters through a WebVTT track:

<track kind="chapters" src="/chapters.vtt" srclang="en" label="Chapters">

Captions

BPlayer supports multiple <track kind="captions"> and <track kind="subtitles"> elements. The captions settings menu includes an Off option plus every available track. Use captions.language to prefer a language, or call player.selectCaption(index) directly.

Preview Thumbnails

BPlayer can show hover previews from WebVTT sprite files. The VTT should contain cue ranges followed by an image URL with #xywh=x,y,w,h. The frame is rendered inside the seek tooltip, above the chapter title and time.

new BPlayer('#player', {
  previewThumbnails: {
    src: 'https://api.example.com/videos/123/sprite.vtt',
    enabled: true,
    offset: 12,
    credentials: 'same-origin'
  }
})

player.on('previewthumbnailsloaded', ({ cueCount }) => {
  console.log(`${cueCount} preview frames ready`)
})

WEBVTT

00:00:00.000 --> 00:00:05.000
sprite.webp#xywh=0,0,160,90

Relative sprite URLs are resolved against the VTT URL. Preview failures are silent and do not affect playback.

Seek tooltip

Hovering the timeline shows a single tooltip box:

┌───────────────────────┐
│      preview frame    │   ← only with previewThumbnails (and a cue)
├───────────────────────┤
│ Chapter title   02:19 │   ← chapter title left, time right, same color
└───────────────────────┘

• The chapter title comes from chapters and can be turned off with tooltips: { chapter: false } — the box then collapses to a time-only pill.
• The preview frame appears inside the same box when previewThumbnails has a cue for the hovered time, so there is no second floating element.
• The box is clamped to the track, so it never overflows at the first or last chapter.

new BPlayer('#player', {
  tooltips: { controls: true, seek: true, chapter: true },
  previewThumbnails: { src: '/sprite.vtt', offset: 12 }
})

Playlists

await player.setPlaylist([
  { src: '/episode-1.mp4', poster: '/episode-1.jpg' },
  { src: '/episode-2.mp4', tracks: [{ src: '/episode-2.vtt', label: 'English', srclang: 'en' }] }
])

player.next()
player.previous()

When playback ends, BPlayer automatically advances to the next playlist item.

i18n

Control labels and settings menu text can be customized with i18n:

new BPlayer('#player', {
  i18n: {
    play: 'Reproduzir',
    pause: 'Pausar',
    captions: 'Legendas',
    captionsOff: 'Desligadas',
    quality: 'Qualidade',
    speed: 'Velocidade'
  }
})

Fullscreen

BPlayer uses native fullscreen when available. If the browser does not expose a fullscreen API, fullscreen.fallback: true applies a full-window player state using the same bplayer--fullscreen class.

For mobile, you can opt into the device/browser-native video fullscreen:

new BPlayer('#player', {
  fullscreen: {
    enabled: true,
    nativeMobile: true
  }
})

On iPhone, this uses the native iOS video player when available. On Android, BPlayer requests fullscreen on the <video> element and temporarily enables native controls so the browser/device UI can take over. iosNative: true is still supported as an iOS-specific alias.

Events

BPlayer includes a small event emitter.

player.on('play', () => {})
player.once('ready', () => {})
player.off('play')

Common events:

• ready
• play
• pause
• ended
• timeupdate
• durationchange
• volumechange
• seeking
• seeked
• progress
• waiting
• canplay
• ratechange
• fullscreenchange
• pipchange
• qualitychange
• captionschange
• playlistchange
• audiotrackschange
• audiotrackchange
• previewthumbnailsloaded
• hlsloaded
• dashloaded
• error
• destroy

Styling

BPlayer exposes CSS custom properties on the .bplayer root, scoped per player. Override them with a plain CSS rule on .bplayer (or any ancestor of your <video>) — no JS config needed, the variables update live.

.bplayer {
  /* Accent — drives the progress fill, AB-loop region, focus rings, etc. */
  --bplayer-color-main: #000000;

  /* Spacing & shape */
  --bplayer-control-spacing: 10px;
  --bplayer-control-radius: 4px;

  /* Typography */
  --bplayer-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bplayer-font-size-base: 15px;
  --bplayer-font-size-small: 13px;
}

Theming the accent color

The accent color (--bplayer-color-main) drives every tinted surface of the player: progress bar fill, volume fill, focused button ring, AB-loop region, active menu option. Default is black; override per player, per page, or globally.

/* Single player, accent in red */
#promo-video.bplayer {
  --bplayer-color-main: #e53935;
}

/* Brand-wide: every BPlayer on the site picks it up */
:root {
  --bplayer-color-main: #1a73e8; /* Google blue */
}

Programmatic equivalent (no rebuild, applies on next render):

document.querySelector('.bplayer').style.setProperty('--bplayer-color-main', '#e53935')

If you change --bplayer-color-main you should keep --bplayer-color-main-rgb in sync — it's the comma-separated triplet used by rgba() overlays (e.g. the AB-loop highlight). Format is identical to CSS rgb() arguments:

.bplayer {
  --bplayer-color-main: #1a73e8;
  --bplayer-color-main-rgb: 26, 115, 232;
}

Full variable reference

Accent

| Variable | Default | Used by | |---|---|---| | --bplayer-color-main | #000000 | progress fill, volume fill, AB-loop region, active menu item, focus ring | | --bplayer-color-main-rgb | 0, 0, 0 | rgba() overlays (must stay in sync with --bplayer-color-main) | | --bplayer-range-fill-bg | var(--bplayer-color-main) | filled portion of progress / volume track |

Scrubber (the dot on the track)

| Variable | Default | Used by | |---|---|---| | --bplayer-range-thumb-bg | #fff | scrubber fill | | --bplayer-range-thumb-border | var(--bplayer-color-main) | scrubber border color | | --bplayer-range-thumb-border-width | 0 | set to 2px for an outlined dot | | --bplayer-range-thumb-height | 13px (drives width too) | scrubber diameter | | --bplayer-range-track-height | 5px | track thickness |

Segmented timeline (progressStyle: 'segments')

| Variable | Default | Used by | |---|---|---| | --bplayer-segment-gap | 4px | gap between chapter segments | | --bplayer-segment-radius | 2px | chapter segment corner radius |

Central play button (the big circle when paused)

| Variable | Default | Used by | |---|---|---| | --bplayer-play-large-bg | rgba(0,0,0,0.5) | background | | --bplayer-play-large-color | #fff | icon color | | --bplayer-play-large-size | 64px | diameter (icon auto-scales) |

Captions

| Variable | Default | Used by | |---|---|---| | --bplayer-captions-bg | rgba(0,0,0,0.75) | caption pill background | | --bplayer-captions-color | #fff | caption text color | | --bplayer-captions-font-size | 18px | caption text size (mobile: scales down to 14px) |

Spinner / loading

| Variable | Default | Used by | |---|---|---| | --bplayer-spinner-color | #fff | spinner stroke color | | --bplayer-spinner-size | 36px | spinner diameter |

Controls bar

| Variable | Default | Used by | |---|---|---| | --bplayer-controls-bg | rgba(255,255,255,0.92) | bar background | | --bplayer-controls-color | rgba(0,0,0,0.7) | icon color (idle) | | --bplayer-control-spacing | 10px | gap between buttons | | --bplayer-control-radius | 4px | button corner radius |

Overlays

| Variable | Default | Used by | |---|---|---| | --bplayer-badge-bg | rgba(0,0,0,0.7) | toast, stats panel, context menu, shortcuts overlay | | --bplayer-tooltip-bg | rgba(0,0,0,0.9) | hover tooltip on the progress bar | | --bplayer-tooltip-offset | 10px (previewThumbnails.offset, default 12px, when previews are on) | distance between the tooltip and the track | | --bplayer-focus-ring | 0 0 0 2px var(--bplayer-color-main) | visible keyboard focus ring |

Typography

| Variable | Default | Used by | |---|---|---| | --bplayer-font-family | system stack | every label and time display | | --bplayer-font-size-base | 15px | captions, time, settings | | --bplayer-font-size-small | 13px | tooltips |

Recipe: branded player

.bplayer {
  --bplayer-color-main: #1a73e8;
  --bplayer-color-main-rgb: 26, 115, 232;

  /* Outlined scrubber so it pops on light tracks */
  --bplayer-range-thumb-bg: #fff;
  --bplayer-range-thumb-border: #1a73e8;
  --bplayer-range-thumb-border-width: 2px;

  /* Slightly transparent play-large with brand color */
  --bplayer-play-large-bg: rgba(26, 115, 232, 0.85);
  --bplayer-play-large-color: #fff;

  /* Dark captions on light brand */
  --bplayer-captions-bg: rgba(26, 115, 232, 0.95);
  --bplayer-captions-color: #fff;
  --bplayer-captions-font-size: 20px;

  /* Rounded controls */
  --bplayer-control-radius: 9999px;
}

Recipe: minimal monochrome

.bplayer {
  --bplayer-color-main: #111;
  --bplayer-color-main-rgb: 17, 17, 17;
  --bplayer-play-large-bg: rgba(17, 17, 17, 0.85);
  --bplayer-play-large-color: #fff;
  --bplayer-range-thumb-bg: #111;
  --bplayer-range-thumb-border-width: 0;
  --bplayer-spinner-color: #111;
  --bplayer-control-radius: 0;
}

Build

npm run build

The build writes:

• dist/bplayer.mjs
• dist/bplayer.umd.js
• dist/style.css

Publishing

Before publishing, make sure you are logged in to npm:

npm login

Then run:

npm run build
npm pack --dry-run
npm publish

For a scoped package, update name in package.json and publish with the correct access level:

npm publish --access public

License

MIT