当前位置:   article > 正文

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

the element or id supplied is not valid

pnpm add video.js
在这里插入图片描述

1、设置中文包

初始化的时候引入video.js/dist/lang/zh-CN.jsonvideojs.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
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/675406
推荐阅读
相关标签
  

闽ICP备14008679号