github地址：h ttps://github.com/videojs/video.js

MP4视频地址：http://vjs.zencdn.net/v/oceans.mp4(引用 [mp4视频资源] )

react项目中安装video.js

npm install --save-dev video.js
import React, { useState, useRef, useEffect } from "react";
import videojs from "video.js";
import "video.js/dist/video-js.css";
import './index.less';
export default function VideoPlay(props) {
  const { } = props;
  const videoRef = useRef(null);
  const playerRef = useRef<any>(null);
  const [option, setOptopm] = useState({});
  const onReadyPlay = (palyer) => {
    videoRef.current = palyer
    palyer.play();
  const init = () => {
    let _option = {
      controls: true,
      autoplay: false,//加载完成是否自动播放
      loop: false,//视频播放结束后，是否循环播放
      notSupportedMessage: '此视频暂无法播放，请稍后再试',
      poster: 'https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF',//视频封面
      controlBar: {
        // timeDivider: true,//是否显示时间控制条，默认为true
        // remainingTimeDisplay: false,//是否显示剩余时间，默认为true
        // fullscreenToggle: true // 全屏按钮
        children: [//自定义
          { name: 'playToggle' }, // 播放按钮
            name: 'volumePanel', // 音量控制
            inline: false, // 不使用水平方式
          { name: 'currentTimeDisplay' }, // 当前已播放时间
          { name: 'durationDisplay' }, // 总时间
          { name: 'progressControl' }, // 播放进度条
            name: 'pictureInPictureToggle'//支持画中画
            name: 'FullscreenToggle'//支持全屏
    setOptopm(_option);
    if (!playerRef.current) {
      const videoElement = videoRef.current;
      if (!videoElement) return;
      const player = playerRef.current = videojs(videoElement, _option, () => {
      });
      onReadyPlay(player)
  useEffect(() => {
    init();
  }, [])
  return (
    <div className="video_play">
      <video style={{
        width: 600,
        height: 300
      }} ref={videoRef}
        className="video-js vjs-big-play-centered">
        <source src={`http://vjs.zencdn.net/v/oceans.mp4`} type="video/mp4" />
        <source src={`https://live-s3m.mediav.com/nativevideo/2a80d171cc7ef2c764c9a83c06e0e4bc-bit_cloud768.mp4`} type="video/mp4" />
      </video>
    </div>
视频当前进度及视频总时长还需要设置样式，默认的;会直接隐藏。
 
.video-js .vjs-duration, .vjs-no-flex .vjs-duration {
  display: inline-block;
.video-js .vjs-current-time, .vjs-no-flex .vjs-current-time {
  display: inline-block;
import VideoPlay from '@/components/VideoPlay';
 <VideoPlay />
以上只针对可播放mp4资源
import React, { useEffect, useRef } from 'react';
import VideoJs from 'video.js';
// import videozhCN from 'video.js/dist/lang/zh-CN.json'
import 'video.js/dist/video-js.css';
import.
				
引用提到了React和video.js这两个库。React是一个用于构建用户界面的JavaScript库，而video.js则是一个用于在网页上播放视频的开源库。React通过虚拟DOM和组件的方式实现页面的动态更新和交互，而video.js提供了一套强大的API和UI组件，使得在网页上播放视频变得简单和灵活。
要在项目中使用React和video.js，你需要引入相应的库文件。引用中提到了react.development.js和react-dom.development.js这两个用于支持React操作DOM的核心库，还有babel.min.js用于将JSX转换为JS。而引用则介绍了如何引入video.js和相应的CSS文件。
为了在项目中使用video.js，你可以使用yarn工具安装video.js及其相关类型声明文件。引用中给出了安装video.js和相应类型声明文件的命令。
使用React和video.js创建一个视频播放器的具体步骤如下：
1. 在项目中引入React和video.js的库文件。
2. 创建一个视频播放器的容器。
3. 在React组件中使用video.js，通过video.js提供的API进行视频的加载、播放和控制。