react中使用video.js，排坑记录

pnpm add video.js

1、设置中文包

初始化的时候引入video.js/dist/lang/zh-CN.json， videojs.addLanguage(‘zh-CN’, zhCN) 即可

2、样式错乱，不在规定的元素内

在video标签中添加 className='video-js'

3、报错The element or ID supplied is not valid.

video标签需要添加id，在react中，在初始化的时候使用videoRef.current可以生效，但是在后续点击按钮，切换视频源的时候报错了，我这边是给组件传进来了一个id值，这样每次组件使用可以根据传入的id值来进行绑定。

4、切换视频源有时候报错，he play() request was interrupted by a new load request

每次在palyer.play()的前，先暂停正在播放的视频palyer.pause()，但是这个问题有时候还是存在，但是不影响，具体原因还未排查到。

5、初始化报错 The media could not be loaded, either because the server or network failed or because the format is not supported. ，原来我是在videoJsOptions 中设置了 sources，但是由于初始化的时候playSrc，为空，所以报错了。

  [ 
  	 {
      // 视频文件的路径，可以是一个前端相对路径、后台视频文件URL、直播源等
      src: playSrc
      // 视频源类型
      //   type: 'application/x-mpegURL'
    }
  ]

6、在source中可以添加上src={playSrc || window.location.href}，否则，初始化会由于src为空报错

7、参考官方demo

video.js官方demo，将video.js封装为组件，使用

---

问题描述

提示：这里描述项目中遇到的问题：

例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据
APP 中接收数据代码：

import React, { useState, useRef, useEffect } from 'react'
import videojs from 'video.js'
import AsideItem from '@/components/AsideItem'
import EquipmentSelect from '../Components/EquipmentSelect'
import 'video.js/dist/video-js.css'
import zhCN from 'video.js/dist/lang/zh-CN.json'
import styles from './index.module.scss'

export default function index({ id = 'my-video' }) {
  const videoRef = useRef(null)
  const playerRef = useRef(null)

  const [playSrc, setPlaySrc] = useState('')
  const [option, setOptopm] = useState({})

  const vedioSelect = (r) => {
    if (r['url']) { 
      setPlaySrc(r['url'])
      const myPlayer = videojs(id)
      myPlayer.pause()
      myPlayer.src([{ type: 'application/x-mpegURL', src: r['url'] }])
      const playPromise = myPlayer.play(r['url'])
      if (playPromise !== undefined) {
        playPromise
          .then(() => {
            myPlayer.play(url)
          })
          .catch((e) => {
            // 音频加载失败
          })
      }
    }
  }

  useEffect(() => {
    videojs.addLanguage('zh-CN', zhCN)

    const videoElement = document.getElementById(id)

    const videoJsOptions = {
      language: 'zh-CN', // 设置语言为中文
      muted: true,
      poster: 'https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF', //视频封面
      notSupportedMessage: '此视频暂无法播放，请稍后再试'
    }

    const player = videojs(videoElement, videoJsOptions, () => {})

    // 销毁组件时，销毁播放器实例
    return () => {
      if (player) {
        player.dispose()
        playerRef.current = null
      }
    }
  }, [])

  return (
    <AsideItem title='视频监控'>
      <div
        className={styles.monitor}
        style={{ display: 'flex', flexDirection: 'column', height: '100%' }}
      >
        <EquipmentSelect onChange={vedioSelect} />
        <div style={{ flex: '1' }}>
          <video
            data-setup='{}'
            style={{
              width: '100%',
              height: '100%'
            }}
            ref={videoRef}
            id={id}
            controls
            preload='auto'
            autoPlay
            muted
            className='video-js'
          >
            <source
              id='source'
              src={playSrc || window.location.href}
              type='application/x-mpegURL'
            />
          </video>
        </div>
      </div>
    </AsideItem>
  )
}

封装demo

import React, { useEffect, useState, useRef } from "react";
import styles from "./index.scss";
import videojs from "video.js";
import "video.js/dist/video-js.css";
import zhCN from "video.js/dist/lang/zh-CN.json";

const PlayBox = ({ videoList = [], type = "iframe", videoStyle,getCurrent }) => {
  const videoRef = useRef(null);
  const [playSrc, setPlaySrc] = useState("");
  const [currentIndex, setCurrentIndex] = useState(0);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    videojs.addLanguage("zh-CN", zhCN);
    const player = videojs(videoRef.current, {
      language: "zh-CN", // 设置语言为中文
    });
    // 销毁组件时，销毁播放器实例
    return () => {
      if (player) {
        player.dispose();
      }
    };
  }, []);

  useEffect(() => {
    if (Array.isArray(videoList) && videoList.length) {
      setPlaySrc(videoList[0]);
      setLoading(false);
    }
  }, [videoList]);

  useEffect(() => {
    setLoading(true);
    if (type === "video") {
      const monitorVideo = document.getElementById("monitor");
      if (monitorVideo) {
        monitorVideo.setAttribute("autoplay", "true");
        monitorVideo.muted = true;
        videojs(monitorVideo);
      }
      playSrc && playVideo(playSrc);
    }
  }, [playSrc, type]);

  const leftClick = () => {
    if (videoList.length <= 1) return;
    let index = currentIndex;
    if (currentIndex === 0) {
      index = videoList.length - 1;
    } else index = currentIndex - 1;
    setCurrentIndex(index);
    setPlaySrc(videoList[index]);
    getCurrent&&getCurrent(index)
  };

  const rightClick = () => {
    if (videoList.length === 1) return;
    let index = currentIndex;
    if (currentIndex === videoList.length - 1) {
      index = 0;
    } else index = currentIndex + 1;
    setCurrentIndex(index);
    setPlaySrc(videoList[index]);
    getCurrent&&getCurrent(index)
  };

  const playVideo = (url) => {
    const myPlayer = videojs("monitor");
    myPlayer.pause();
    myPlayer.src([{ type: "application/x-mpegURL", src: url }]);
    let playPromise = myPlayer.play(url);
    if (playPromise !== undefined) {
      playPromise
        .then(() => {
          myPlayer.play(url);
        })
        .catch((e) => {
          // 音频加载失败
        });
    }
    const playButton = document?.querySelector(".vjs-play-control");
    if (playButton) {
      myPlayer.on("play", () => {
        playButton.classList.remove("vjs-paused");
        playButton.classList.add("vjs-playing");
      });
      myPlayer.on("pause", () => {
        playButton.classList.remove("vjs-playing");
        playButton.classList.add("vjs-paused");
      });
    }
    setLoading(false);
  };

  return (
    <div className="playBox">
      <div
        className="loading"
        style={{ display: loading || !playSrc ? "block" : "none" }}
      >
        加载中...
      </div>

      {type === "iframe" && playSrc ? (
        <div className="video_box">
          <iframe
            src={playSrc}
            allowFullScreen={true}
            allowTransparency={true}
            allow="autoplay"
            style={{ width: "100%", height: "100%", border: 0 }}
            onLoad={() => {
              setLoading(false);
            }}
          />
        </div>
      ) : null}

      {type === "video" ? (
        <video
          ref={videoRef}
          id="monitor"
          className="video-js"
          controls
          preload="auto"
          autoPlay
          muted
          width={videoStyle?.width || 440}
          height={videoStyle?.height || 250}
          data-setup="{}"
        >
          <source
            id="source"
            src={playSrc || window.location.href}
            type="application/x-mpegURL"
          />
        </video>
      ) : null}

      {Array.isArray(videoList) && videoList.length ? (
        <>
          <div className="left" onClick={leftClick}></div>
          <div className="right" onClick={rightClick}></div>
        </>
      ) : null}
    </div>
  );
};

export default PlayBox;