Try it
An editable example running on StackBlitz:
Installation
Usage
Unlike the React block, there is no single <bw-standard-player> element. The
block is a set of custom elements you compose yourself inside a
<bw-standard-player-provider>. Import the modules
(each calls customElements.define), then arrange the elements:
The pieces toggle with playback state: <bw-standard-player-info> (call to action +
duration) shows while stopped, and <bw-standard-playback-controls> shows once playback
starts. Every element resolves its nearest
<bw-standard-player-provider> ancestor and
subscribes to player events; the buttons emit events built with
newEvent.
<bw-standard-player-bar> is the horizontal bar that holds the controls. The
player also detaches into a floating widget once scrolled out of view:
<bw-standard-player-provider> watches its own visibility (via
IntersectionObserver) and the playback state, exposing a mode to its
descendants. While playing and scrolled out of view, the mode switches from
"inline" to "widget": the bar pins itself to the bottom-right corner and
<bw-standard-close-widget-button> appears — pressing it pins the player back
inline permanently.
These components expect the BeyondWords player to be available as a global
BeyondWords (the player UMD script). Load it before the provider connects.
