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

相关文章

来自专栏小灰灰

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

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

2077
来自专栏伪君子的梦呓

推荐几个油猴脚本

油猴,也就是 Tampermonkey 是我每一台电脑都会安装的东西,也是我会给熟人介绍和安装的东西。没什么好说的,就是好用。

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

WeFlow 也来了

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

3507
来自专栏静晴轩

Html<a>标签href的困惑记载

近日,在工作中遇到一个小问题(给手游平台做些网页活动,其中牵涉到一个按钮链接,就习以为常的用了<a>标签,Click响应之后走一段js代码逻辑-弹出一个分享微信...

3515
来自专栏小俊博客

自适应免费开源主题-Dobby

1433
来自专栏DannyHoo的专栏

iOS开发没有开发者账号照样可以进行真机测试

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

1332
来自专栏jerryteng的专栏

js播放音频文件总结

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

2874
来自专栏破晓之歌

vue的video插件vue-video-player

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

3433
来自专栏phodal

前端下半场:构建跨框架的 UI 库

跨框架的 UI 库,即前端 UI 库可以不经任何修改,直接能运行在 React、Angular、Vue 等框架上。

531
来自专栏前端儿

【转】不同内核浏览器的差异以及浏览器渲染简介

浏览器最重要或者说核心的部分是“Rendering Engine”,可大概译为“解释引擎”,不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释(...

721

扫码关注云+社区