Documentation Index
Fetch the complete documentation index at: https://mintlify.com/videojs/v10/llms.txt
Use this file to discover all available pages before exploring further.
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
