Media PlayerButtons
PipButton
Button component that toggles picture-in-picture mode
Button component that toggles picture-in-picture mode. The button automatically hides if Picture-in-Picture is not supported by the browser.
Examples
Basic Usage
import {
MediaProvider,
PlayerProvider,
PlayerContainer,
ShakaVideo,
ControlsContainer,
ControlsGroup,
PipButton,
} from "@shelby-protocol/player";
function VideoPlayer() {
return (
<MediaProvider>
<PlayerProvider>
<PlayerContainer>
<ShakaVideo
src="https://example.com/video.m3u8"
poster="https://example.com/poster.jpg"
className="w-full"
/>
<ControlsContainer>
<ControlsGroup className="p-4">
<div className="flex-1" />
<PipButton />
</ControlsGroup>
</ControlsContainer>
</PlayerContainer>
</PlayerProvider>
</MediaProvider>
);
}With Other Controls
import {
MediaProvider,
PlayerProvider,
PlayerContainer,
ShakaVideo,
ControlsContainer,
ControlsGroup,
PlayButton,
PipButton,
FullscreenButton,
} from "@shelby-protocol/player";
function VideoPlayer() {
return (
<MediaProvider>
<PlayerProvider>
<PlayerContainer>
<ShakaVideo
src="https://example.com/video.m3u8"
poster="https://example.com/poster.jpg"
className="w-full"
/>
<ControlsContainer>
<ControlsGroup className="p-4">
<PlayButton />
<div className="flex-1" />
<PipButton />
<FullscreenButton />
</ControlsGroup>
</ControlsContainer>
</PlayerContainer>
</PlayerProvider>
</MediaProvider>
);
}