喜欢请打赏 👉关闭

 支付宝

 微信

扫描二维码打赏

支付宝打赏

扫描二维码打赏

微信打赏

Video-React 视频播放组件的使用

安装:

npm install --save video-react

或者

yarn add video-react

使用示例:

import React, { Component, Fragment } from 'react';
import path from './guide.mp4'
import {
  Player,
  ControlBar,
  PlayToggle, // PlayToggle 播放/暂停按钮 若需禁止加 disabled
  ReplayControl, // 后退按钮
  ForwardControl,  // 前进按钮
  CurrentTimeDisplay,
  TimeDivider,
  PlaybackRateMenuButton,  // 倍速播放选项
  VolumeMenuButton
} from 'video-react';
import "../node_modules/video-react/dist/video-react.css"; // import css


class AAA extends Component {
  componentDidMount() {
    console.log(this.player)
    this.player.subscribeToStateChange(this.handleStateChange.bind(this));
  }

  handleStateChange(state, prevState) {
    console.log(state)
  }

  render() {
    return (
      <Fragment>
        <div style={{ width: 500, height: 300, margin: 50 }}>
          <Player
            ref={c => {
              this.player = c;
            }}
            poster="https://video-react.js.org/assets/poster.png"
          >
            <source
              src={path}
              type="video/mp4"
            />
            <ControlBar autoHide={false} disableDefaultControls={false}>
              <ReplayControl seconds={10} order={1.1} />
              <ForwardControl seconds={30} order={1.2} />
              <PlayToggle />
              <CurrentTimeDisplay order={4.1} />
              <TimeDivider order={4.2} />
              <PlaybackRateMenuButton rates={[5, 2, 1.5, 1, 0.5]} order={7.1} />
              <VolumeMenuButton />
            </ControlBar>
          </Player>
        </div>
      </Fragment>
    )
  }
}


export default AAA;

参考文档

https://video-react.js.org/

posted @ 2020-03-04 10:18  Mr.曹  阅读(18212)  评论(1编辑  收藏  举报