Skip to content

Latest commit

 

History

History
123 lines (96 loc) · 3.03 KB

Video.md

File metadata and controls

123 lines (96 loc) · 3.03 KB
Raw

<Video>

FaCC that creates a <video> element to play video media, re-renders on video state changes.

Usage

import {Video} from 'libreact/lib/Video';

<Video autoPlay src='http://dailym.ai/2rG7TBS'>{(actions, state) => {
  JSON.stringify(state, null, 4)
}}</Video>

Props

In addition to props below also accepts all React's media events.

interface IVideoProps {
  src: string;
  autoPlay?: boolean;
  loop?: boolean;
  muted?: boolean;
  preload?: 'none' | 'metadata' | 'auto';
  volume?: number;
  noJs?: React.ReactElement<any>;
}
  • src - required, string, video source file URL.
  • autoPlay - optional, boolean, whether to autoplay media, defaults to false.
  • loop - optional, boolean, whether to repeat the media when it ends, defaults to false.
  • muted - optional, boolean, whether to mute the media, defaults to false.
  • preload - optional, string, <video> element preload attribute.
  • volume - optional, number, media volume in [0..1] range, defaults to 1.
  • noJs - optional, React element(s) to render insided the <video> tag.
  • onMount - optional, callback, called when component mounts, receives IVideo as the first argument.
  • onUnmount - optional, callback, called when component un-mounts, receives IVideo as the first argument.

Arguments

The children function receives two arguments, first is the IVideo actions collection and the second is the state of the video component.

<Video autoPlay src={src}>{({video, ...actions}, state) =>

}</Video>

First argument is the <Video> component instance with the following public signature.

interface IVideo {
  el: HTMLVideoElement;
  video: React.ReactElement;
  play();
  pause();
  seek(time: number);
  volume(value: number);
  mute();
  unmute();
}

, where

  • el - <video> element DOM node.
  • video - <video> element React node, that you have to insert in the JSX tree.

The second argument is the state of the <Video> component with the following signature.

interface IVideoState {
  buffered?: TRange[];
  time?: number;
  duration?: number;
  isPlaying?: boolean;
  muted?: boolean;
  volume?: number;
}

type TRange = {
  start: number;
  end: number;
};

, where

  • buffered - a list of ranges representing media intervals that have been buffered by the browser.
  • time - current time in seconds.
  • duration - total video duration in seconds.
  • isPlaying - whether the video is currently playing.
  • muted - whether muted attribute is set on the video element.
  • volume - current volume in range [0..1].

Example

Play a sample video.

<Video
  src='http://dailym.ai/2rG7TBS'
  style={{
    width: 400,
    border: '1px solid tomato'
  }}
  render={({video, play, pause, seek, volume, mute, unmute}, {isPlaying}) =>
    <div>
      {video}
      <br />
      <button onClick={() => isPlaying ? pause() : play()}>
        {isPlaying ? 'Pause' : 'Play'}
      </button>
    </div>
  }
/>