VUE中如何指定一个VIDEO 只显示视频内容不显示进度条播放暂停等其他功能

在 Vue 中可以通过 CSS 和一些技巧来让一个 <video> 只显示视频内容而不显示进度条、播放暂停等其他功能。

以下是一种方法：

一、使用 CSS 隐藏视频控制条

在你的 Vue 组件的 CSS 部分添加以下样式：

.video-container {
  position: relative;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-container video::-webkit-media-controls {
  display: none!important;
}

二、在模板中使用

<template>
  <div class="video-container">
    <video ref="videoPlayer" :src="videoUrl"></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: '你的视频地址',
    };
  },
};
</script>

这样，视频将只显示视频内容，而不会显示默认的播放控制条（包括进度条、播放暂停按钮等）。

需要注意的是，完全隐藏控制条可能会导致用户无法控制视频的播放，所以在实际应用中要谨慎考虑是否真的需要这样做，或者可以考虑提供一些自定义的控制方式来替代默认的控制条。

关于controlslist=“nodownload nofullscreen noremoteplayback”

在 HTML5 的 <video> 标签中，controlslist 属性用于指定视频控制条上显示哪些控制按钮。

你给出的 controlslist="nodownload nofullscreen noremoteplayback" 表示在视频的控制条上不显示下载、全屏和远程播放控制按钮。

在 Vue 中使用这个属性可以这样做：

<template>
  <div>
    <video controls controlslist="nodownload nofullscreen noremoteplayback" :src="videoUrl"></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: '你的视频地址',
    };
  },
};
</script>

这样就可以在 Vue 组件中使用这个属性来限制视频控制条上的特定按钮显示。如果需要添加其他限制，也可以继续在 controlslist 属性值中添加相应的关键字。例如，如果还想不显示音量控制，可以添加 novoiume。

需要注意的是，浏览器对这些属性的支持可能会有所不同，所以在实际应用中最好在多个浏览器上进行测试以确保效果符合预期。

controlslist=“nodownload nofullscreen noremoteplayback” 有没有控制隐藏进度条音量播放的

controlslist属性中没有直接控制隐藏进度条和音量的选项。

如果要隐藏进度条和音量控制，可以结合 CSS 来实现：

<template>
  <div>
    <video controls controlslist="nodownload nofullscreen noremoteplayback" :src="videoUrl" ref="videoPlayer"></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: '你的视频地址',
    };
  },
  mounted() {
    const video = this.$refs.videoPlayer;
    // 尝试隐藏进度条和音量控制（仅对部分浏览器有效）
    video.volume = 0; // 静音（设置音量为 0）
    video.muted = true; // 确保静音状态
    video.style.setProperty('-webkit-media-controls-timeline', 'display: none');
    video.style.setProperty('-webkit-media-controls-volume-slider', 'display: none');
  },
};
</script>

需要注意的是，这种方式对不同浏览器的兼容性可能不同，并且完全隐藏进度条和音量控制可能会影响用户体验，应谨慎使用。