Issue while integrating with react js

Hi I am trying to add this plugin in my react app in I am getting error this is my code

import videojs from "video.js"; import "video.js/dist/video-js.css"; import "@videojs/themes/dist/city/index.css"; import "videojs-contrib-quality-levels"; import qualitySelectorHls from "videojs-quality-selector-hls";

const videoJsOptions = { autoplay: true, controls: true, responsive: true, height: "500px", disablePictureInPicture: true, enableSmoothSeeking: true, experimentalSvgIcons: true, playbackRates: [0.5, 0.75, 1, 1.5, 2], controlBar: { skipButtons: { backward: 10, forward: 10, }, qualitySelector: true }, userActions: { hotkeys: true, }, sources: [ { // src: "http://192.168.1.139:5000/hls/subject27/video-chunk/video-chunk_master.m3u8", src: "http://192.168.1.87:5000/hls/abc/chunk1/chunk1_master.m3u8", type: "application/x-mpegURL", }, ], };

React.useEffect(() => { if (!playerRef.current) { const videoElement = document.createElement("video-js"); videojs.registerPlugin("qalitySelectorHls", qualitySelectorHls); videoElement.classList.add("vjs-big-play-centered"); videoRef.current.appendChild(videoElement);

  const player = (playerRef.current = videojs(videoElement, options, () => {
    player.qualityLevels();
    videojs.log("player is ready");
    onReady && onReady(player);
    player.qualitySelectorHls({
      displayCurrentQuality: true,
      placementIndex: 13,
      vjsIconClass: "vjs-icon-hd",
    });
  }));

  player.on("play", () => {
    const playerCurrentTime = player.currentTime();
    console.log(
      playerCurrentTime ? "played" : "Started",
      playerCurrentTime
    );
  });
  player.on("pause", () => {
    const totalTime = player.duration();
    const playerCurrentTime = player.currentTime();
    console.log(playerCurrentTime == totalTime ? "Ended" : "paused");
  });
} else {
  const player = playerRef.current;
  player.autoplay(options.autoplay);
  player.src(options.sources);
  player.on("start", () => {
    console.log("start");
  });
}

}, [options, videoRef]);

dependency versions: "video.js": "^8.12.0", "videojs-quality-selector-hls": "^1.1.1"

error

videojs-quality-selector-hls.js?v=c0159efe:123 Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') at QualitySelectorHlsClass2.setButtonInnerText (videojs-quality-selector-hls.js?v=c0159efe:123:74) at QualitySelectorHlsClass2.createQualityButton (videojs-quality-selector-hls.js?v=c0159efe:118:12) at _Player. (videojs-quality-selector-hls.js?v=c0159efe:92:15) at chunk-2KEIFEIH.js?v=c0159efe:13384:7

please help me resolve this issue

tomexsans / videojs-quality-selector-hls

Issue while integrating with react js #7