在移动端语言react中使用video.js

在video.js基础上封装了一个reactVideo弹窗组件

效果图

  npm install video.js --save 首先npm 安装video.js

//ReactVideo.tsx
import React, { Component, Fragment } from 'react';
import videojs from 'video.js';
import videoX from '@/assets/images/videoX.png';
import 'video.js/dist/video-js.min.css';
import './ReactVideo.less';

interface IProps {
  /**
   * 视频路径
   */
  videoPath?:string
  /**
   * 关闭视频
   */
  closeVideo?:()=>void
}

export default class ReactVideo extends React.Component<IProps> {
  myVideo:any;

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.myVideo = videojs('myVideo', {
      controls: true,
      bigPlayButton: true,
      controlBar: {
        children: [
          { name: 'playToggle' },
          { name: 'currentTimeDisplay' }, // 当前已播放时间
          { name: 'progressControl' },
          { name: 'durationDisplay' }, // 总时间
          { // 倍数播放
            name: 'playbackRateMenuButton',
            playbackRates: [0.5, 1, 1.5, 2],
          },
          {
            name: 'volumePanel', // 音量控制
            inline: false, // 不使用水平方式
          },
          { name: 'FullscreenToggle' }, // 全屏
        ],

      },
    });
    this.myVideo.play();
  }

  closeVideoGialog=() => {
    const { closeVideo } = this.props;
    closeVideo();
  };

  componentWillUnmount() {
    this.myVideo.dispose();
  }

  render() {
    const { videoPath, closeVideo } = this.props;
    return (
      <>
        <div className="react-video-mask" onClick={this.closeVideoGialog} />
        <div className="react-video-box">
          <div className="close-icon" style={{ backgroundImage: `url(${videoX})` }} onClick={this.closeVideoGialog} />
          <video
            id="myVideo"
            className="video-js vjs-default-skin"
            controls
            preload="auto"
          >
            <source id="source" src={videoPath} type="video/mp4" />
          </video>
        </div>
      </>
    );
  }
}
下面是样式
///////ReactVideo.less
.react-video-mask{
  position: fixed;
  left:0;
  top:0;
  right:0;
  bottom:0;
  100%;
  height:100vh;
  z-index:100;
  background:rgba(0,0,0,0.8);
}
.react-video-box{
  position: fixed;
  left:50%;
  top:30%;
  transform: translate(-50%,-50%);
  6.75rem;
  height:3.8rem;
  
  background: #2D3033;
  z-index:101;
  transition:0.3s all;
  #myVideo{
    6.75rem;
    height:3.8rem;
    .vjs-control-bar{
      line-height:72px;
      height:72px;
    }
    button{
      60px ;
    }
    .vjs-menu-button{
      60px;
    }
    .vjs-volume-panel{
      60px;
    }
    .vjs-button>.vjs-icon-placeholder:before{
      line-height: 2.2;
      font-size: 32px;
    }
    .vjs-play-progress:before{
      font-size: 20px;
      position: absolute;
      right: -0.5em;
      top: -0.34rem;
      z-index: 1;
    }
    .vjs-progress-holder{
      height: 0.06rem;
      line-height: 0.72rem;
    }
    .vjs-time-control{
      line-height:72px;
    }
    .vjs-playback-rate .vjs-playback-rate-value{
      line-height:72px;
      font-size: 26px;
    }
    .vjs-current-time, .vjs-no-flex .vjs-current-time,
    .vjs-duration, .vjs-no-flex .vjs-duration{
      display:block;
    }
  }
  
  .close-icon{
    0.6rem;
    height:0.6rem;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 120;
    background-size:0.36rem 0.36rem;
    background-repeat: no-repeat;
    background-position: center ;
  }
}

以上是组件
下面介绍下使用

{
          （视频路径） && videoShow（控制弹窗的参数） && (
            <ReactVideo videoPath={视频路径} closeVideo={this.closeVideoHandler} />
          )
        }

//弹窗关闭和开启这个就不写了，因为很基础，只需要控制videoShow显隐即可

video.js配置参考文档

https://www.cnblogs.com/Renyi-Fan/p/11626583.html#_label3