uniapp video全屏如何二次封装自定义控制按钮

在uniapp中，如何对video组件进行二次封装以实现自定义控制按钮？目前官方提供的控制条样式无法满足需求，想实现以下功能：1）替换默认的全屏/退出按钮图标；2）添加额外的功能按钮（比如倍速切换）；3) 在全屏模式下依然能显示自定义按钮。尝试过cover-view覆盖但存在层级问题，请问有没有完整的实现方案或组件封装思路？

2 回复

在uniapp中，二次封装video组件时，可通过controls属性设为false隐藏原生控件，然后自定义按钮布局。使用@fullscreenchange监听全屏状态，通过createVideoContext控制播放/暂停等操作。


在UniApp中，可以通过二次封装<video>组件实现自定义控制按钮。以下是实现步骤和示例代码：

实现思路

  1. 隐藏原生控件：设置controls="false"隐藏原生控制条。
  2. 自定义UI：使用绝对定位在视频上方覆盖自定义按钮。
  3. 控制视频：通过ref调用视频实例的播放/暂停/全屏等方法。
  4. 全屏处理：监听全屏状态变化，动态调整按钮布局。

示例代码

<template>
  <view class="video-container">
    <!-- 视频组件 -->
    <video 
      ref="videoRef"
      :src="src"
      :controls="false"
      @fullscreenchange="onFullscreenChange"
      class="video"
    ></video>
    
    <!-- 自定义控制栏 -->
    <view class="controls" :class="{ fullscreen: isFullscreen }">
      <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
      <button @click="toggleFullscreen">全屏</button>
      <button @click="showVolume = !showVolume">音量</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isPlaying: false,
      isFullscreen: false,
      showVolume: false
    }
  },
  props: ['src'],
  methods: {
    // 播放/暂停
    togglePlay() {
      const video = this.$refs.videoRef
      this.isPlaying ? video.pause() : video.play()
      this.isPlaying = !this.isPlaying
    },
    
    // 切换全屏
    toggleFullscreen() {
      const video = this.$refs.videoRef
      video.requestFullScreen() // 进入全屏
    },
    
    // 全屏状态变化
    onFullscreenChange(e) {
      this.isFullscreen = e.detail.fullScreen
    }
  }
}
</script>

<style scoped>
.video-container {
  position: relative;
  width: 100%;
}
.video {
  width: 100%;
  height: 400rpx;
}
.controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.5);
  padding: 20rpx;
  display: flex;
  justify-content: space-around;
}
.controls.fullscreen {
  bottom: 80rpx; /* 全屏时避免被系统手势区域遮挡 */
}
</style>

关键点说明

  1. 使用ref获取视频组件实例
  2. 通过requestFullScreen()方法触发全屏
  3. 监听fullscreenchange事件处理全屏状态
  4. 使用CSS绝对定位覆盖控制按钮
  5. 全屏时调整控制栏位置避免被系统UI遮挡

扩展建议

  • 可添加进度条控制（通过timeupdate事件）
  • 实现手势控制（双击暂停、滑动调节音量/亮度）
  • 添加加载状态和错误处理

这样封装后即可通过<custom-video src="..."></custom-video>调用自定义视频组件。

回到顶部