Video.js 更改焦点样式

Question

我将 Video.js 与 Vue.js 和 Electron.js 一起使用，我正在尝试将视频播放器的轮廓更改为比标准黄色轮廓更好看的东西，但轮廓保持不变是。
我的视频组件：

<template>
  <div id="video-container">
    <video class="video-js" id="video-player" ref="video"></video>
  </div>
</template>

<script>
import videojs from "video.js";

export default {
  name: "Preferences",
  props: ["item"],
  methods: {
    getPath: function () {
      return this.item.dir + "/" + this.item.name + "." + this.item.fileType;
    },
  },
  mounted: function () {
    let options = {
      autoplay: false,
      controls: true,
      fluid: true,
      playbackRates: [0.5, 1, 1.25, 1.5, 1.75, 2],
      controlBar: {
        pictureInPictureToggle: false,
      },
    };
    this.player = videojs(this.$refs.video, options).src(this.getPath());
  },
};
</script>

<style scoped>
#video-player {
  outline: none;
}
</style>

我也尝试过!important、#video-player:hover 并使用视频容器 div 来更改大纲，但到目前为止没有任何效果。
大纲如下所示：
Video Box outline
button outline

Answer 1

如果我明白你在说什么，那么你说的是 Bowser 焦点，即焦点组件周围的那条蓝线。

你需要类似的东西

.video-js:focus {
   outline-style: none;
}

如果仍然无法正常工作，您可以添加 !important 或也添加此

.video-js:focus {
   outline-style: none;
   box-shadow: none;
   border-color: transparent;
}

通常我们不会删除它，原因很简单，可能难以在组件周围使用 Tab。但是，如果您对此感到满意，那就去吧！

编辑（2021 年 10 月 2 日）：

所以对于视频 JS，您实际上可以使用您的自定义类并覆盖 Video-js CSS 类，您需要在您的 CSS 中创建这 3 个跟随类。

.vjs-matrix.video-js {
  color: #00ff00;
/*put other stuff you need here*/
}

/* Change the border of the big play button. */
.vjs-matrix .vjs-big-play-button {
  border-color: #00ff00;
/*put other stuff you need here*/
}

/* Change the color of various "bars". */
.vjs-matrix .vjs-volume-level,
.vjs-matrix .vjs-play-progress,
.vjs-matrix .vjs-slider-bar {
  background: #00ff00;
/*put other stuff you need here*/
}

对于您的 HTML

<video class="vjs-matrix video-js">...</video>

尝试解决这个问题，看看能否解决您的问题！

来源 (videojs)