react中使用video.js，排坑记录_the element or id supplied is not valid

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'
    }
  ]
1
2
3
4
5
6
7
8

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>
  )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

封装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;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152