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

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 声音组件

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏闵开慧

Software caused connection abort: socket write...

严重: Servlet.service() for servlet default threw exception java.net.Socke...

39411
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

3838
来自专栏移动开发面面观

Android引入OpenCV

1753
来自专栏程序生活

第四周编程作业(一)-Building your Deep Neural Network: Step by StepBuilding your Deep Neural Network: Step by

Building your Deep Neural Network: Step by Step Welcome to your week 4 assignmen...

56611
来自专栏专知

2018年SCI期刊最新影响因子排行,最高244,人工智能TPAMI9.455

2018年6月26日,最新的SCI影响因子正式发布,涵盖1万2千篇期刊。CA-Cancer J Clin 依然拔得头筹,其影响因子今年再创新高,达244.585...

952
来自专栏智能计算时代

IBM Research: WatsonPaths

A new cognitive computing project that enables more natural interaction between ...

2967
来自专栏专注数据中心高性能网络技术研发

[Repost]A Survival Guide to a PhD

This guide is patterned after my “Doing well in your courses”, a post I wrote a ...

2585
来自专栏计算机视觉与深度学习基础

计算机视觉著名数据集CV Datasets

Detection PASCAL VOC 2009 datasetClassification/Detection Competitions, Segm...

2138
来自专栏人工智能头条

将机器学习应用于金融技术领域的15家公司(英)

1372
来自专栏智能计算时代

IBM Expands Data Discovery and Q&A Power of Watson Analytics

IBM Expands Data Discovery and Q&A Power of Watson Analytics Half a Million Prof...

2696

扫码关注云+社区