ControlBar

The Html5 video's control bar is hidden, the player offers a customizable control bar to allow the user to control video playback, including volume, seeking, and pause/resume playback.

import React from 'react';
import { Player, ControlBar } from 'video-react';

export default props => {
  return (
    <Player autoPlay src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4">
      <ControlBar autoHide={false} className="my-class" />
    </Player>
  );
};

Properties

ControlBar.propTypes = {

  // Hide the control bar automatically after the player is inactive
  // default: true
  autoHide: PropTypes.bool,
  // The waiting time for auto hide after player is inactive (in milliseconds)
  // default: 3000
  autoHideTime: PropType.number,
  // Do not render default controls, only use custom ones provided as children of <ControlBar>
  // default: false
  disableDefaultControls: PropTypes.bool,
  // Do not render the control bar if set it to true
  // default: false
  disableCompletely: PropTypes.bool,

}