uni-app swiper组件生成APP运行时视频和图片交替出现点视频查看有问题

uni-app swiper组件生成APP运行时视频和图片交替出现点视频查看有问题

示例代码：

<swiper class="carousel round-dot" :style="{height:height_carousel+'px'}" indicator-dots="true" circular="true" :autoplay="goplay" interval="5000" duration="500" indicator-active-color="#09f" indicator-color="#ffff00">
<swiper-item v-for="(item,index) in swiperList" :key="index">
<image :src="item.url" mode="aspectFit" v-if="item.type=='image'"></image>
<image :src="swiperList[1].url" mode="aspectFit" v-if="item.type=='video'"></image>
<video :src="item.url" :show-play-btn="true" :enable-progress-gesture="false" show-mute-btn="true" muted="fasle"  v-if="item.type=='video'" :poster="swiperList[1].url" @play="goswiper(0)" @pause="goswiper(1)" @ended="goswiper(1)"></video>
</swiper-item>
</swiper>

操作步骤：

查看产品时，视频会显示在第一个交替页，后面是图片，点击视频，可以播放，不想看了，可以左右滑动到图片查看，视频停止

预期结果：

点视频就播放了，不会全屏，可左右滑动

实际结果：

点了视频，全屏化，怎么也退不回去，要等播完

bug描述：

原来提过这个问题，原来是无法播放，现在可以播，但点了视频后，不知道如何交替其他了，H5没有问题，到现在还没解决
https://ask.dcloud.net.cn/question/97744?notification_id-935568rf-falseitem_id-167057#!answer_167057


更多关于uni-app swiper组件生成APP运行时视频和图片交替出现点视频查看有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app swiper组件生成APP运行时视频和图片交替出现点视频查看有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题是由于在App端，video组件默认点击会进入全屏播放模式。可以通过设置show-fullscreen-btn为false来禁用全屏按钮，但点击视频区域仍可能触发全屏。

建议的解决方案：

  1. 使用自定义播放控制：
<video 
  :controls="false"
  :show-play-btn="true"
  :show-fullscreen-btn="false"
  :enable-play-gesture="true"
  @tap="handleVideoTap"
></video>
  1. 添加点击事件处理：
handleVideoTap(e) {
  const videoContext = uni.createVideoContext('videoId')
  // 控制播放/暂停
}
回到顶部