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。但是，如果您对此感到满意，那就去做吧！

编辑（10/02/2021）：

因此对于视频 JS，您实际上可以使用您的自定义 class 并覆盖 Video-js CSS class 为此，您需要创建此 3在 CSS.

中关注 classes

.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)

Video.js 更改焦点样式

Video.js change Focus style

css

video.js

vue.js

electron