uniapp video 自定义播放按钮

在uniapp中，可以通过以下步骤来实现自定义播放按钮：

1. 首先，在data中定义一个变量startVideo，用于控制是否显示中间的播放按钮，并将其初始值设置为true。

2. 在视频播放时，可以使用video组件的play事件来触发一个方法，比如playFun()。在该方法中，将startVideo设置为false，以隐藏中间的播放按钮，并将contimg设置为true，以显示下方的播放、暂停等控制按钮。

3. 在模板中，使用v-if指令来根据startVideo的值来显示或隐藏中间的播放按钮。例如，如果startVideo为true，则显示自定义的播放按钮。

以下是示例代码：

data() {
  return {
    startVideo: true,
    contimg: false
  }
},
methods: {
  playFun() {
    this.startVideo = false;
    this.contimg = true;
  }
}

<template>
  <view>
    <video src="your_video_url" @play="playFun"></video>
    <view v-if="startVideo" class="custom-play-button"></view>
    <!-- 其他控制按钮 -->
  </view>
</template>

在上述代码中，当视频开始播放时，playFun方法会被触发，将startVideo设置为false，从而隐藏中间的播放按钮。同时，contimg被设置为true，以显示其他控制按钮。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Uniapp自定义video播放按钮并结合swiper图片](https://blog.csdn.net/weixin_45389051/article/details/111077681)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]