Video.js 更改焦点样式

问题描述

我将 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

解决方法

如果我理解你的意思，你说的是 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，您实际上可以使用自定义类并覆盖 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)

electron electron video.js vue.js