Skip to main content

Controls

This exports the bundled player controls as individual components. The following will reproduce the default layout of controls:

import {Controls, Player} from "ractive-player";
const controls = <>
<Controls.PlayPause/>
<Controls.Volume/>
<Controls.TimeDisplay/>
<div className="rp-controls-right">
<Controls.Settings/>
<Controls.FullScreen/>
</div>
</>;
<Player controls={controls}>
{/* ... */}
</Player>

FullScreen#

Toggle fullscreen. See fake fullscreen for how to make this work on mobile.

PlayPause#

Play/pause the video.

Settings#

Controls playback rate.

TimeDisplay#

Displays the current time and total duration of the video.

Volume#

Adjust the volume.