微信小程序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>
相关推荐
大数据技术派27 分钟前
我用AI写代码,做了3个小玩意儿
后端·微信小程序
律宏阔1 天前
Taro 4 项目从 npm 迁移到 pnpm 踩坑实录
前端·微信小程序·taro
恩创软件开发1 天前
自助KTV系统管理员续单功能
经验分享·小程序
多客:duokelijie2 天前
代练订单系统选型思路:跨品类游戏接入、订单分层管理、自动结算逻辑拆解!
数据库·mysql·微信小程序·前端框架·uni-app·php·持续部署
AI源码3 天前
在线考试小程序
小程序·notepad++
计算机毕设定制辅导-无忧学长3 天前
《基于微信小程序健康习惯激励系统设计与实现》
java·spring boot·mysql·微信小程序·uniapp·健康习惯激励系统
2501_916008893 天前
iPhone 设备信息查看,用 KeyMob 看型号、序列号、电池健康和 UDID
android·ios·小程序·https·uni-app·iphone·webview
拖孩4 天前
流量主门槛从 500 降到 100,我的小程序上线 18 小时够到了线
前端·后端·微信小程序
云-缩影4 天前
做微信小程序,自建服务器还是用云托管:技术选型对比
服务器·微信小程序·小程序
极限挑战哥5 天前
共享电单车联营平台分账架构实践:二清合规与自动分账零人工方案
java·大数据·人工智能·微信小程序·架构·微信公众平台