uniapp video组件上添加按钮

在UniApp中，Video组件用于显示视频播放，如果需要在视频上方添加控制按钮，你可以通过自定义组件或者利用uni-app提供的原生API来实现。这里是一个简单的步骤指南：

1. **创建按钮容器**: 首先，在Video组件外面创建一个容器，比如一个`view`元素，用于放置你的控制按钮。

<view class="video-controls">
  <!-- 控制按钮将会放在这里 -->
</view>
<video id="myVideo" src="your_video_url"></video>

2. **设计并创建按钮**:
- 可以为每个按钮创建一个独立的`button`标签，并设置样式。例如，暂停/播放按钮、全屏按钮等。

<button @click="pausePlay">暂停/播放</button>
<button @click="enterFullScreen">全屏</button>

3. **绑定事件处理函数**:
- 在对应的`.vue`文件里，为按钮的点击事件添加JavaScript处理函数，操作Video实例。

export default {
  methods: {
    pausePlay() {
      this.$refs.myVideo.paused ? this.$refs.myVideo.play() : this.$refs.myVideo.pause();
    },
    enterFullScreen() {
      // 根据平台特性（uni-app支持native API），调用fullScreen方法
      this.$refs.myVideo.webkitEnterFullscreen();
    }
  },
  mounted() {
    // 初始化Video组件
    this.$refs.myVideo.src = 'your_video_url';
    this.$refs.myVideo.play(); // 默认播放
  }
}

4. **注意点**:
- 使用`$refs`访问Video组件是因为它们不是Vue组件的一部分，而是在DOM上直接引用。
- `webkitEnterFullscreen()`是Webkit浏览器专用的全屏API，其他浏览器可能有不同的API。