微信小程序video 点击自动全屏播放

最新推荐文章于 2026-03-26 09:36:59 发布

原创

最新推荐文章于 2026-03-26 09:36:59 发布 · 4.2k 阅读

标签

#微信小程序 #小程序

收录于

文章描述了如何在Vue组件中，通过判断内容类型来实现图片和视频的预览功能，以及全屏播放控制，包括使用`uni.previewImage`和`uni.createVideoContext`等API进行交互。

在这里插入图片描述

//因为这个地址可能是图片也可能是视频  点击 图片可以预览，点击视频可放大全屏自动播放。 代码如下
<view v-else :class='{
   
   contentImg: x.picture.length==0}' style="margin-top: 10px;"
								v-for="(x1, y1) in x.picture" :key="y">
								
								<image v-if="imgType.includes(x.picture[y1].split('.').pop())" style="width: 217px;height: 167px; margin-top: 14px"  :src="x.picture[y1]"