The Player.Root
component is the React Context wrapper for the Player.
Browser | Version |
---|---|
Chrome | 102+ |
Chrome for Android | 105+ |
iOS Safari | 12.2+ |
Edge | 103+ |
Safari | 13.1+ |
Firefox | 103+ |
Opera | 89+ |
Samsung Internet | 17+ |
UC Browser | 13.4+ |
Firefox Android | 104+ |
Opera Mini | all |
Player.Root
component is a React Context wrapper which passes the player
state store down to all of the child components. It is responsible for creating
the Zustand state store which is consumed
by the children, and listens for media/browser events and keeps state in sync.
src
Src[]
, which can be derived from
various sources like Livepeer playback info, Cloudflare stream data, Mux URLs,
or simple strings.
See getSrc
for docs on how to easily generate this parameter.
autoPlay
and volume
autoPlay
is specified, volume
is highly recommended to be set to 0.
Autoplay will not work
in many modern browsers without
setting mute to 0.
aspectRatio
16 / 9
.
Set to null
to disable the aspect ratio container (see Container
).
hotkeys
true
). It’s recommended to follow ARIA guidelines by keeping this enabled
unless you’re implementing custom hotkeys or there’s a conflict with existing
ones.
viewerId
onError
null
when the previous error is resolved. The callback receives the parameter:
jwt
or accessKey
jwt
or webhook
playback policy respectively. It’s crucial for implementing
application-specific access control like restricting viewership based on certain
criteria (e.g., having an activated account, etc.).
lowLatency
"force"
, it forces WebRTC playback and disables fallback to HLS. This is ideal
for applications requiring low latency and can tolerate possible connectivity
issues inherent to WebRTC.
Defaults to true
. If this does not succeed in playing back (commonly due to a
slow network or connectivity issues), the Player will automatically fall back to
HLS playback. Also, if the stream contains B-frames (bidirectional frames, which
are common for users streaming with OBS or other streaming apps), the Player
will automatically switch to HLS, so that out-of-order frames are not displayed.
timeout
storage
localStorage
in the browser. Set to null
to disable
storage.