Videojs 搜索栏在直播中不可见

Question

我正在使用 videojs 7.21 显示过去的实时流（使用 NX Witness HTTP 流（不是 HLS 流）。所以，我的 url 源是实时流，在视频的左下角，有一个名为“实时”的文本并且只有按钮（播放）在我的以下代码中可见。 我的流超过 30 秒并且使用

liveui: true

也不起作用：根据这个 github issue.

import React, { useEffect, useRef } from "react";
import videojs from "video.js";
import "video.js/dist/video-js.css";

const MyVideo = ({ id, videoUrl, options }) => {
  const videoNode = useRef(null);
  const playerRef = useRef();

  useEffect(() => {
    if (videoNode.current) {
      const player = videojs(videoNode.current, options, () => {
        console.log("Video.js player is ready");
      });

      playerRef.current = player;
      player.src(videoUrl);

      player.on("error", (event) => {
        console.log("Video.js error:", event);
      });

      return () => {
        if (playerRef.current) {
          playerRef.current.dispose();
        }
      };
    }
  }, [videoUrl, options, isOpen]);

  return (
    <div data-vjs-player>
      <video
        controls
        id={`${id}`}
        ref={videoNode}
        className="video-js vjs-big-play-centered custom-video-js-class vjs-control-bar"
      />
    </div>
  );
};

export default MyVideo;

<MyVideo
    id={data.cameraId}
    options={{
        autoplay: true,
        controls: true,
        controlBar: {
            playToggle: true,
            volumePanel: false,
            pictureInPictureToggle: false,
            progressControl: {
              seekBar: true,
            },
            currentTimeDisplay: true,
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: true,
            playbackRateMenuButton: false,
          },
          muted: true,
          preload: "auto",
          aspectRatio: "16:9",
          fluid: true,
          responsive: true,
          liveui: true,
          // liveTracker: {
          //   trackingThreshold: 10, // this is not also working
          // },
        }}
        videoUrl={my-live-stream-link.webm}
        // videoUrl="http://techslides.com/demos/sample-videos/small.webm" // this link is working. i can see controls (especially seekbar)
        />

问题与我的链接有关，与 CSS 无关，因为使用此链接

http://techslides.com/demos/sample-videos/small.webm

，我可以看到所需的控件。

Seekbar 在 Firefox 上可见，但在 Chrome 上不可见。

Answer 1

要删除“实时”文本并启用控件，您可以尝试我提出的以下代码更改：

显式将 liveui 选项设置为 false：

<MyVideo
  id={data.cameraId}
  options={{
    autoplay: true,
    controls: true,
    controlBar: {
      playToggle: true,
      volumePanel: false,
      pictureInPictureToggle: false,
      progressControl: {
        seekBar: true, // set seekBar to true to always show the seek bar
      },
      currentTimeDisplay: true,
      timeDivider: true,
      durationDisplay: true,
      remainingTimeDisplay: true,
      playbackRateMenuButton: false,
    },
    muted: true,
    preload: "auto",
    aspectRatio: "16:9",
    fluid: true,
    responsive: true,
    liveui: false, // set liveui to false to remove live controls
    live: true, // keep live set to true if the stream is live
  }}
  videoUrl={my-live-stream-link.webm}
/>

设置这些选项后，播放器控件应显示搜索栏而不是“实时”文本，这在 Firefox 和 Chrome 中都应该有效。

通过设置 live: false，播放器控件中不应再显示“Live”文本。