uniapp video隐藏播放按钮如何实现

在uniapp中如何隐藏video组件的默认播放按钮？尝试了设置controls属性为false但没效果，还有其他方法可以实现吗？

2 回复

在<video>标签中添加controls="false"属性即可隐藏播放按钮。


在 UniApp 中，可以通过设置 video 组件的 controls 属性为 false 来隐藏播放按钮和默认控制条。同时，如果需要自定义播放控制，可以结合其他属性和事件来实现。

实现步骤：

  1. 设置 controls 属性为 false：这会隐藏默认的播放按钮和控制界面。
  2. 可选自定义控制：通过添加按钮并绑定 play、pause 等方法实现播放控制。

示例代码：

<template>
  <view>
    <video 
      :src="videoSrc" 
      :controls="false" 
      ref="videoRef"
      @play="onPlay"
      @pause="onPause"
    ></video>
    <!-- 自定义播放/暂停按钮 -->
    <button @tap="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: 'https://example.com/sample.mp4',
      isPlaying: false
    };
  },
  methods: {
    togglePlay() {
      const video = this.$refs.videoRef;
      if (this.isPlaying) {
        video.pause();
      } else {
        video.play();
      }
    },
    onPlay() {
      this.isPlaying = true;
    },
    onPause() {
      this.isPlaying = false;
    }
  }
};
</script>

注意事项：

  • controls="false" 会完全隐藏默认控制条，包括播放按钮、进度条等。
  • 如果需要部分隐藏（如仅隐藏播放按钮但保留进度条），UniApp 的 video 组件原生不支持，可能需要通过覆盖样式或自定义组件实现，但跨端兼容性较差。
  • 在微信小程序等平台中，确保 video 组件属性与平台规范一致。

通过以上方法，即可隐藏默认播放按钮并实现自定义控制。

回到顶部