原生video标签 全屏按钮为灰色

对于原生的video标签，全屏按钮的样式通常是由浏览器自动控制的，因此全屏按钮是否为灰色可能是由浏览器的样式决定的。不同浏览器可能有不同的默认样式，但你可以通过自定义CSS来改变全屏按钮的样式。

首先，你可以给video元素添加一个自定义的类名，比如`fullscreen-video`：

<video class="fullscreen-video" controls>
  <!-- 视频源 -->
</video>

然后，在CSS中使用该类名来修改全屏按钮的样式：

.fullscreen-video::-webkit-media-controls-fullscreen-button {
  /* 修改为你想要的样式 */
}

.fullscreen-video::-moz-full-screen-button {
  /* 修改为你想要的样式 */
}

.fullscreen-video::-ms-fullscreen-button {
  /* 修改为你想要的样式 */
}

请注意，不同浏览器可能需要使用不同的前缀来定制全屏按钮的样式。上面的代码中使用了WebKit、Mozilla和Microsoft的前缀，你可以根据你所需的浏览器进行适当的修改。

希望这个回答对你有帮助！如果有任何其他问题，请随时提问。

相关问题

JS 原生video元素去掉下载按钮

要去掉 video 元素默认的下载按钮，可以通过设置 `controls` 属性为 `false` 来实现。具体方法如下：

<video src="video.mp4" controls="false"></video>

或者使用 JavaScript 直接设置属性：

const video = document.querySelector('video');
video.controls = false;

这样就可以去掉 video 元素默认的下载按钮了。

vue中源生video标签怎么监听esc退出全屏

在Vue中使用原生video标签，可以通过在Vue组件中使用`ref`属性来获取video元素的DOM对象，然后可以调用原生的addEventListener方法来监听`fullscreenchange`事件，从而在退出全屏时执行相应的逻辑，如下所示：

<template>
  <div>
    <video ref="videoPlayer" src="your-video-src"></video>
  </div>
</template>

<script>
export default {
  mounted() {
    const videoPlayer = this.$refs.videoPlayer
    videoPlayer.addEventListener('fullscreenchange', this.handleExitFullScreen)
  },
  methods: {
    handleExitFullScreen() {
      const isFullScreen = document.fullscreenElement !== null
      if (!isFullScreen) {
        // 执行退出全屏后的逻辑
      }
    }
  }
}
</script>

在`handleExitFullScreen`方法中，判断`document.fullscreenElement`是否为null来判断当前是否全屏，如果不是全屏则执行相应的逻辑。