@videojs/react

import { Player, PlayerSkin } from '@videojs/react/video';
import '@videojs/react/video/skin.css';

export function App() {
  return (
    <Player src="https://example.com/video.m3u8">
      <PlayerSkin />
    </Player>
  );
}

import { createPlayer, Container } from '@videojs/react';

const { Provider } = createPlayer({
  features: [/* feature modules */],
});

function App() {
  return (
    <Provider src="https://example.com/video.m3u8">
      <Container>
        {/* player UI */}
      </Container>
    </Provider>
  );
}

import { usePlayer, useMedia, usePlayerContext } from '@videojs/react';

// Access the player controller
const player = usePlayer();

// Access media state
const media = useMedia();

// Access the full player context
const context = usePlayerContext();

import {
  Controls,
  PlayButton,
  MuteButton,
  VolumeSlider,
  TimeSlider,
  Time,
  FullscreenButton,
  PiPButton,
  CaptionsButton,
  PlaybackRateButton,
  SeekButton,
  BufferingIndicator,
  Poster,
  Thumbnail,
  Tooltip,
  Popover,
  AlertDialog,
} from '@videojs/react';

import { createSelector, useSelector, useStore, shallowEqual } from '@videojs/react';

const selectVolume = createSelector((state) => state.volume);

function VolumeDisplay() {
  const volume = useSelector(selectVolume);
  return <span>{Math.round(volume * 100)}%</span>;
}

import { mergeProps, renderElement, useButton, useSlider } from '@videojs/react';

// Merge multiple prop objects (useful for compound components)
const merged = mergeProps(defaultProps, userProps);

// Build accessible button behavior
const buttonProps = useButton({ onClick: handleClick });

// Build accessible slider behavior
const sliderProps = useSlider({ min: 0, max: 100, value: 50 });