使用ReactJS向视频to组件添加图标

Question

最近，我一直在为视频of的组件而挣扎。我用ReactJS钩子实现了我的视频播放器，现在我必须添加一些自定义的SVG图标。

但是当我声明VideoJS的新组件时，我不知道如何添加我的自定义图标，而且文档在这个主题上非常糟糕。

下面是我在其中初始化的useEffect钩子代码：

useEffect(() => {
// Make sure Video.js player is only initialized once
if (!playerRef.current) {
  const videoElement = videoRef.current;

  if (!videoElement) return;
  let player = playerRef.current;

  player = videojs(videoElement, options, () => {
    videojs.log("player is ready");
    onReady && onReady(player);
  });

  console.log(player);

  let Button = videojs.getComponent("Button");

  let SettingsButton = videojs.extend(Button, {
    constructor: function (player, options) {
      console.log(player, options);
      Button.call(this, player, options);
      this.controlText("Settings");
    },
    handleClick: function () {
      console.log("Settings button clicked");
    },
    
  });

  videojs.registerComponent("SettingsButton", SettingsButton);
  player.getChild("ControlBar").addChild("SettingsButton", {}, 2);

}, [options, videoRef, onReady]);

这里是我要添加设置图标的新按钮组件的位置：

let Button = videojs.getComponent("Button");

  let SettingsButton = videojs.extend(Button, {
    constructor: function (player, options) {
      console.log(player, options);
      Button.call(this, player, options);
      this.controlText("Settings");
    },
    handleClick: function () {
      console.log("Settings button clicked");
    },
    
  });

  videojs.registerComponent("SettingsButton", SettingsButton);
  player.getChild("ControlBar").addChild("SettingsButton", {}, 2);

如果有人能为这个场景找到解决方案，我将不胜感激。

Answer 1

最后，我有一个解决这个问题的办法。对于可能面临此问题的人，您可以这样做，如下所示：

在添加了视频it的按钮(或组件)之后，您应该对其应用一个唯一的类：

let Button = videojs.getComponent("Button");

  let SettingsButton = videojs.extend(Button, {
    constructor: function (player, options) {
      Button.call(this, player, options);

      // ADD UNIQUE CLASS TO THE CUSTOM BUTTON
      this.addClass("vjs-setting-button");
    },
    handleClick: function () {
      console.log("Settings button clicked");
    },
  });

  videojs.registerComponent("SettingsButton", SettingsButton);

  player.getChild("ControlBar").addChild("SettingsButton", {}, 2);

然后在css中向该类添加一个背景图像：

.vjs-setting-button {
        height: 40px;
        width: 40px;

        // add background-image to class
        background-image: url('../assets/icons/Setting.svg'); 
        // Enter Your Own icon URL to use that
        
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
        z-index: 1;
    }