带来一个react插件的使用方式---- video-react

// 视频css
@import "../../node_modules/video-react/dist/video-react.css";

import "node_modules/video-react/dist/video-react.css"; // import css

/**
 * 
 * **/

import React, {Component} from 'react'
import ReactEcharts from 'echarts-for-react';
import Crumbs from '../../../../components/PublicComponents/Crumbs';
import NavBarEchart from './Component/NavBarEchart'
import {Form,Button,Tabs} from 'antd';
import Condition from './Component/Condition'
import Header from './Component/Header'
import {connect} from 'dva'
import { Player, ControlBar, ReplayControl,
  ForwardControl, CurrentTimeDisplay,
  TimeDivider, PlaybackRateMenuButton, VolumeMenuButton } from 'video-react';
const TabPane = Tabs.TabPane;




class BrakeStation extends Component{


  render(){

    return(
      <div>
        <Tabs defaultActiveKey="1" >
          <TabPane tab="Tab 1" key="1">
            <div style={{width:400,height:300}}>
              <Player>
                <source src="http://peach.themazzone.com/durian/movies/sintel-1024-surround.mp4" />
                <source src="http://mirrorblender.top-ix.org/movies/sintel-1024-surround.mp4" />
                <ControlBar>
                  <ReplayControl seconds={10} order={1.1} />
                  <ForwardControl seconds={30} order={1.2} />
                  <CurrentTimeDisplay order={4.1} />
                  <TimeDivider order={4.2} />
                  <PlaybackRateMenuButton
                    rates={[5, 2, 1, 0.5, 0.1]}
                    order={7.1}
                  />
                  <VolumeMenuButton disabled />
                </ControlBar>
              </Player>
            </div>
          </TabPane>
          <TabPane tab="Tab 2" key="2">

          </TabPane>
        </Tabs>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return{

  }
}

export default connect(mapStateToProps)(BrakeStation)