useFullscreenVideo

Simplified cross-browser fullscreen video behavior.

Motivation

This React hook simplifies the process of managing fullscreen video playback across different browsers, handling the complexities of vendor-specific APIs for you. It also handles the fallback scenario, in case the browser (e.g. iOS Safari) does not support setting a HTMLDivElement to fullscreen (but does allow HTMLVideoElement to do so).

Installation

yarn add @kaliber/use-fullscreen-video

Usage

import { useFullscreenVideo } from '@kaliber/use-fullscreen-video'

function Component() {
  const { refs, request, exit } = useFullscreenVideo({
    onChange: console.debug,
    onError: console.error
  })

  return (
    <main>
      <div ref={refs.setContainer}>
        <video ref={refs.setVideo} src={neverGonnaGiveYouUp} />
        <button onClick={exit}>
          Exit fullscreen
        </button>
      </div>

      <button onClick={request}>
        Request fullscreen
      </button>
    </main>
  )
}

Third party players

Implementations between third party players may vary. Make sure you have access to the internal video element for the broadest cross-browser support.

using ReactPlayer

import { useFullscreenVideo } from '@kaliber/use-fullscreen-video'
import ReactPlayer from 'react-player'

function Component() {
  const videoRef = React.useRef(null)
  const { refs, request, exit } = useFullscreenVideo({
    onChange: console.debug,
    onError: console.error
  })

  return (
    <main>
      <div ref={refs.setContainer}>
        <ReactPlayer 
          ref={videoRef} 
          // Make sure you add a `src` that uses ReactPlayer's `FilePlayer`:
          url={neverGonnaGiveYouUp} 
          onReady={() => {
            // Video ref is only available when video is ready:
            const videoPlayerElement = videoRef.current.getInternalPlayer()
            refs.setVideo(videoPlayerElement)
          }}
        />
        <button onClick={exit}>
          Exit fullscreen
        </button>
      </div>

      <button onClick={request}>
        Request fullscreen
      </button>
    </main>
  )
}

Hook Options

The useFullscreenVideo hook accepts an options object:

• options: Configure wether you would like to open the element or the container through the useVideoElement option in this object.
• onChange({ state, event }): A callback function that is triggered whenever the fullscreen state changes. The isFullscreen argument will be both the state of the fullscreen functionality, and the original Event in an object.
• onError(error): A callback function invoked if an error occurs during fullscreen transitions. The error argument will contain the error details.

Returned Values

The hook returns an object containing the following:

Values

• refs: An object with setContainer and setVideo setters for assigning references to the container element and video element, respectively.

Methods

• request(options): Initiates a fullscreen request on either the designated container or the video element itself, depending on browser implementation. The options argument allows for potential browser-specific configuration.
• getElement(): The DOM element that is currently in fullscreen mode (if any).
• isFullscreen(): A boolean value indicating whether the video is in fullscreen mode.
• isEnabled(): A boolean value indicating whether fullscreen functionality is supported by the browser.
• exit(): Exits the fullscreen mode.

Disclaimer

This library is intended for internal use, we provide no support, use at your own risk. It does not import React, but expects it to be provided, which @kaliber/build can handle for you.

This library is not transpiled.