Controls fullscreen mode. Tries the container element first, then falls back to the media element. Required by FullscreenButton.
Import
import { fullscreen, selectFullscreen } from '@videojs/react';
// or
import { fullscreen, selectFullscreen } from '@videojs/html';
Usage
import { createPlayer, fullscreen } from '@videojs/react';
const Player = createPlayer({
features: [fullscreen],
});
import { createPlayer, fullscreen } from '@videojs/html';
const { ProviderMixin, PlayerController, context } = createPlayer({
features: [fullscreen],
});
State
Whether the player is currently in fullscreen mode.
Whether fullscreen is supported in the current environment.Possible values:
'available' — Ready to use'unavailable' — Could work but not ready yet'unsupported' — Platform can never support fullscreen
Actions
Enter fullscreen mode. Returns a promise that resolves when fullscreen is active.
Exit fullscreen mode. Returns a promise that resolves when fullscreen is exited.
Selector
Use selectFullscreen to subscribe to only the fullscreen slice of state. Returns undefined if the fullscreen feature is not configured.
import { selectFullscreen, usePlayer } from '@videojs/react';
function FullscreenButton() {
const fs = usePlayer(selectFullscreen);
if (!fs || fs.fullscreenAvailability !== 'available') return null;
return (
<button onClick={fs.fullscreen ? fs.exitFullscreen : fs.requestFullscreen}>
{fs.fullscreen ? 'Exit fullscreen' : 'Fullscreen'}
</button>
);
}
import { createPlayer, MediaElement, selectFullscreen } from '@videojs/html';
import { videoFeatures } from '@videojs/html/video';
const { PlayerController, context } = createPlayer({ features: videoFeatures });
class FullscreenButton extends MediaElement {
readonly #fullscreen = new PlayerController(this, context, selectFullscreen);
}
Required by: FullscreenButton
