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

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

效果图

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

  1 //ReactVideo.tsx
  2 import React, { Component, Fragment } from 'react';
  3 import videojs from 'video.js';
  4 import videoX from '@/assets/images/videoX.png';
  5 import 'video.js/dist/video-js.min.css';
  6 import './ReactVideo.less';
  7 
  8 interface IProps {
  9   /**
 10    * 视频路径
 11    */
 12   videoPath?:string
 13   /**
 14    * 关闭视频
 15    */
 16   closeVideo?:()=>void
 17 }
 18 
 19 export default class ReactVideo extends React.Component<IProps> {
 20   myVideo:any;
 21 
 22   constructor(props) {
 23     super(props);
 24   }
 25 
 26   componentDidMount() {
 27     this.myVideo = videojs('myVideo', {
 28       controls: true,
 29       bigPlayButton: true,
 30       controlBar: {
 31         children: [
 32           { name: 'playToggle' },
 33           { name: 'currentTimeDisplay' }, // 当前已播放时间
 34           { name: 'progressControl' },
 35           { name: 'durationDisplay' }, // 总时间
 36           { // 倍数播放
 37             name: 'playbackRateMenuButton',
 38             playbackRates: [0.5, 1, 1.5, 2],
 39           },
 40           {
 41             name: 'volumePanel', // 音量控制
 42             inline: false, // 不使用水平方式
 43           },
 44           { name: 'FullscreenToggle' }, // 全屏
 45         ],
 46 
 47       },
 48     });
 49     this.myVideo.play();
 50   }
 51 
 52   closeVideoGialog=() => {
 53     const { closeVideo } = this.props;
 54     closeVideo();
 55   };
 56 
 57   componentWillUnmount() {
 58     this.myVideo.dispose();
 59   }
 60 
 61   render() {
 62     const { videoPath, closeVideo } = this.props;
 63     return (
 64       <>
 65         <div className="react-video-mask" onClick={this.closeVideoGialog} />
 66         <div className="react-video-box">
 67           <div className="close-icon" style={{ backgroundImage: `url(${videoX})` }} onClick={this.closeVideoGialog} />
 68           <video
 69             id="myVideo"
 70             className="video-js vjs-default-skin"
 71             controls
 72             preload="auto"
 73           >
 74             <source id="source" src={videoPath} type="video/mp4" />
 75           </video>
 76         </div>
 77       </>
 78     );
 79   }
 80 }
 81 下面是样式
 82 ///////ReactVideo.less
 83 .react-video-mask{
 84   position: fixed;
 85   left:0;
 86   top:0;
 87   right:0;
 88   bottom:0;
 89   100%;
 90   height:100vh;
 91   z-index:100;
 92   background:rgba(0,0,0,0.8);
 93 }
 94 .react-video-box{
 95   position: fixed;
 96   left:50%;
 97   top:30%;
 98   transform: translate(-50%,-50%);
 99   6.75rem;
100   height:3.8rem;
101   
102   background: #2D3033;
103   z-index:101;
104   transition:0.3s all;
105   #myVideo{
106     6.75rem;
107     height:3.8rem;
108     .vjs-control-bar{
109       line-height:72px;
110       height:72px;
111     }
112     button{
113       60px ;
114     }
115     .vjs-menu-button{
116       60px;
117     }
118     .vjs-volume-panel{
119       60px;
120     }
121     .vjs-button>.vjs-icon-placeholder:before{
122       line-height: 2.2;
123       font-size: 32px;
124     }
125     .vjs-play-progress:before{
126       font-size: 20px;
127       position: absolute;
128       right: -0.5em;
129       top: -0.34rem;
130       z-index: 1;
131     }
132     .vjs-progress-holder{
133       height: 0.06rem;
134       line-height: 0.72rem;
135     }
136     .vjs-time-control{
137       line-height:72px;
138     }
139     .vjs-playback-rate .vjs-playback-rate-value{
140       line-height:72px;
141       font-size: 26px;
142     }
143     .vjs-current-time, .vjs-no-flex .vjs-current-time,
144     .vjs-duration, .vjs-no-flex .vjs-duration{
145       display:block;
146     }
147   }
148   
149   .close-icon{
150     0.6rem;
151     height:0.6rem;
152     position: absolute;
153     top: 0px;
154     right: 0px;
155     z-index: 120;
156     background-size:0.36rem 0.36rem;
157     background-repeat: no-repeat;
158     background-position: center ;
159   }
160 }

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

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

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

video.js配置参考文档

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