react社区的兴起,带来了很多react相关的插件,今天遇到了关于视频播放的功能,本想着用原生的代码写,可是发现了原生视频的功能完全不能满足业务的需求,需要另外定制.
今天带来一个video-react功能使用:
首先安装:
yarn add video-react --save; 安装到项目的下.
第二步:
在全局引入video-react 的css样式,如果在 less中
代码语言：javascript复制// 视频css
@import "../../node_modules/video-react/dist/video-react.css";也可以直接在 react js中引入
代码语言：javascript复制import "node_modules/video-react/dist/video-react.css"; // import css第三步: 在项目中引入
代码语言：javascript复制/**
*
* **/
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 声音组件
