#uni-app小程序中商品详情页轮播图中加入视频播放功能,使用video标签实现
功能介绍
商城类项目需要在商品详情页轮播图中的第一个轮播图显示成视频进行播放
出现问题
1、视频可以播放,但是功能按钮都不管用,暂停,播放,静音,放大等,均不可用
解决方法
##话不多说,上代码
代码
// An highlighted block
<swiper @change="changeDot" class="h-750" :autoplay="autoplay">
<swiper-item class="h-750 w-750 " v-for="item,k in details.albumsList" :key="k">
<view class="swiper-item c-red h-750 w-750">
<image mode="aspectFit" :src="item.originalUrl" ></image>
</view>
</swiper-item>
<view v-if="details.voideUrl" class="w-750 h-750">
<video :enable-play-gesture="true" class="w-750 h-750" :muted="true" :vslide-gesture="true" :autoplay="true" :page-gesture="true" :show-mute-btn="true" :src="details.voideUrl"></video>
</view>
</swiper>
总结
就是把视频标签放到跟 swiper-item 标签同一层就好了