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

java 复制代码
//因为这个地址可能是图片也可能是视频  点击 图片可以预览,点击视频可放大全屏自动播放。 代码如下
<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]" @click="yulan(x.picture,y)">
								</image>

								
								<video  :id="'video_play'+x.id" v-else style="width: 217px;height: 167px; margin-top: 14px" @play="playVedio(x.id)" @fullscreenchange="fullscreenchange" :src="x.picture[y1]" :poster="x.capture_videos_img" controls   >
								</video>
							</view>
							
		<script>	
		methods: {				
     yulan(url,index){
			    uni.previewImage({
					urls: url, // 图片地址,urls是数组格式
					current: index, // 选填:图片默认打开第一张;第一次打开的图片url地址
					success: function(res) {
						console.log("333",res)
					},
					fail: function(res) {
						console.log("22",res)
					},
					complete: function(res) {
				    },
				})
		
		},
		playVedio(index){
				
				this.indexVideo=index;
				//此处需要注意一下,因为是for循环里边的视频或者图片吗,这里id要保持唯一,不然会出现无论点击哪一个都会播放同一个视频的情况。
				this.videoContext=uni.createVideoContext("video_play"+index,this);
				//进入全屏状态
				this.videoContext.requestFullScreen();
				
			},
			fullscreenchange(e) {
				
				if (!e.detail.fullScreen) {
				uni.createVideoContext('video_play'+this.indexVideo, this).pause();
				} 
			}
		}
		<script>
相关推荐
m0_462803885 小时前
从信息管理视角看「按桌顺序分桌」:云分组优先分组的实现逻辑
微信小程序
爱折腾的编程老炮10 小时前
潮玩品牌自建抽盒机小程序——商城 + 抽盒 + 一番赏 + 会员 + 社区,一套代码怎么搭
spring boot·小程序·vue·mybatis·uniapp
新知图书11 小时前
第13章 从一句话需求到上线“续费管家”小程序
人工智能·小程序·智能体
数商云企19 小时前
2026年陕西软件开发首选数商云企AI微入口小程序定制方案
人工智能·小程序
bug总结1 天前
uniapp 微信小程序分包规范
微信小程序·小程序·uni-app
Quor1 天前
小程序工作室:AI 生成即运行的可视化工作台
人工智能·小程序
盟道科技1 天前
小程序电商订单超时自动取消的三种实现方案:定时扫描、Redis 过期监听、延迟消息对比与生产落地
数据库·redis·小程序
lhldsg1 天前
智慧场馆解决方案小程序系统:从架构设计到落地实践
java·小程序·需求分析
凉红茶1 天前
用Cursor开发微信小程序的第一天
微信小程序·小程序·ai编程
CRMEB系统商城1 天前
汽车养护连锁的数字化底座CRMEB 多门店系统实战方案
java·开发语言·小程序·开源·汽车