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

为什么80%的码农都做不了架构师？>>>   

react社区的兴起,带来了很多react相关的插件,今天遇到了关于视频播放的功能,本想着用原生的代码写,可是发现了原生视频的功能完全不能满足业务的需求,需要另外定制.

今天带来一个video-react功能使用:

首先安装:

yarn add video-react --save; 安装到项目的下.

第二步:

在全局引入video-react 的css样式,如果在 less中

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

也可以直接在 react js中引入

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)

Player里的组件分别代表

ControlBar,   控制器父级组件

ReplayControl,  回放组件,参数为回放的时间

ForwardControl, 快进组件,参数为快进的时间

CurrentTimeDisplay, 当前播放时间

TimeDivider, 时间分隔线,可以直接拉到需要播放的视频点

PlaybackRateMenuButton, 控制播放速率

VolumeMenuButton 声音组件

 

转载于:https://my.oschina.net/kaykie/blog/1593020