uni-app中video组件设置 :controls="false" 后，在部分浏览器不生效

在uni-app中，使用<video>组件并设置:controls="false"是为了隐藏默认的视频控制栏。然而，有些浏览器可能不遵循这一设置，尤其是当浏览器有自己的默认行为或安全策略时。为了应对这种情况，我们可以尝试通过CSS或JavaScript进一步控制视频组件的显示和行为。

首先，确保你的<video>组件在uni-app中的设置如下：

<template>
  <view>
    <video
      :src="videoSrc"
      :controls="false"
      style="width: 100%; height: auto;"
      @play="onPlay"
      @pause="onPause"
      ref="videoPlayer"
    ></video>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: 'https://example.com/video.mp4'
    };
  },
  methods: {
    onPlay() {
      console.log('Video is playing');
    },
    onPause() {
      console.log('Video is paused');
    }
  }
};
</script>

在上面的代码中，:controls="false"应该理论上隐藏控制栏，但如果这在某些浏览器上不生效，你可以尝试以下方法：

1. 使用CSS隐藏控制栏： 你可以通过CSS进一步确保控制栏被隐藏。由于uni-app最终会编译成不同的平台代码（如H5、小程序等），这里的CSS可能需要针对特定平台调整。

   video::-webkit-media-controls {
     display: none !important;
   }
   
   video::--internal-media-controls-overlay-play-button {
     display: none !important;
   }
   

   注意：这些CSS选择器可能需要根据实际渲染的HTML结构进行调整，且某些浏览器可能不支持这些伪元素。

2. 使用JavaScript控制： 在某些情况下，你可能需要在页面加载后通过JavaScript动态移除或隐藏控制栏。这可以通过获取视频元素并操作其DOM属性来实现。

   mounted() {
     this.$nextTick(() => {
       const videoElement = this.$refs.videoPlayer;
       if (videoElement) {
         // 尝试移除原生控制栏，具体实现可能依赖于浏览器支持
         // 例如，直接设置属性（如果浏览器支持）
         videoElement.removeAttribute('controls');
         // 或者，通过CSS类隐藏（需要预先定义好类）
         // videoElement.classList.add('hide-controls');
       }
     });
   }
   

请注意，由于不同浏览器对HTML5视频的支持和渲染方式存在差异，上述方法可能并不适用于所有情况。在实际开发中，建议进行充分的测试，并根据目标平台的特性进行适配。