带来一个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 条评论
登录 后参与评论

相关文章

来自专栏小俊博客

自适应免费开源主题-Dobby

1783
来自专栏腾讯开源的专栏

WeFlow 也来了

简介 WeFlow 是一个开源、跨平台、可定制的前端开发工作流工具。 使用场景 在前端团队进行网页重构和网页开发过程中,使用 WeFlow 工具执行自动化的流程...

3707
来自专栏小灰灰

cocos2dx-v3.5 2048 (一): 项目架构

前言 ---- 开始学习cocos2dx, 在看完官方的基本文档之后,选择2048游戏作为第一次实战训练,并记下整个开发过程 关于2048的教程和源码很多,即便...

2177
来自专栏QQ会员技术团队的专栏

【开源公告】VasSonic轻量级的高性能的Hybrid框架正式开源

VasSonic取名于索尼动画形象音速小子,是腾讯QQ会员 VAS团队研发的一个轻量级的高性能的Hybrid框架,专注于提升页面首屏加载速度,完美支持静态直出页...

2126
来自专栏DeveWork

iOS8 、iPhone6 及iPhone6+:Apple touch icon 与Startup Image

本文可视为《iOS / Android 移动设备中的 Touch Icons》及《iOS 7 Web App的初级优化之道》的补充文,因为iOS8 、iPhon...

18610
来自专栏ytkah

微信小程序添加悬浮在线客服会话按钮

  微信为小程序提供客服消息能力,小程序用户可以方便快捷地与小程序服务提供方进行沟通,并且已经做成了组件的形式,直接就可以调用。客服会话按钮,用于在页面上显示一...

1912
来自专栏破晓之歌

vue的video插件vue-video-player

在线视频文件格式转化工具:https://cloudconvert.com/wmv-to-mp4

6923
来自专栏前端新视界

浅谈 Angular 项目实战

我不是 Angular 的布道者,但如今自称 Angular 派,使用 Angular 做项目让我有一种兴奋感。目前的三大主流前端框架都研究过,博客中也有三者的...

1160
来自专栏腾讯云技术沙龙

卢萌凯:玩转SCF与COS的结合应用

大家好。我是腾讯云中间件及无服务器云函数架构师。我今天介绍分四部分:第一,对象存储COS简介。第二,比较实用的一部分,SCF与COS结合使用的应用场景。第三,比...

4076
来自专栏jerryteng的专栏

js播放音频文件总结

最近在做一个英语听力的个人玩的项目,需要用js来播放mp3文件。从网络上搜到了好多种解决方案。

6724

扫码关注云+社区