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>
  )
}