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

news/2024/7/20 2:47:34 标签: 微信小程序, 小程序

在这里插入图片描述

//因为这个地址可能是图片也可能是视频  点击 图片可以预览,点击视频可放大全屏自动播放。 代码如下
<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>

http://www.niftyadmin.cn/n/5386228.html

相关文章

CSP-J 2023 复赛第2题:公路 ← 贪心算法

【题目来源】https://www.luogu.com.cn/problem/P9749https://www.acwing.com/problem/content/5311/【题目描述】 小苞准备开着车沿着公路自驾。 公路上一共有 n 个站点&#xff0c;编号为从 1 到 n。 其中站点 i 与站点 i1 的距离为 vi 公里。 公路上每个站点都可以加油&…

monaco脚本编辑器 在无界中使用 鼠标点击不到

背景A项目使用无界引入B项目 经排查&#xff0c;是B使用的的monaco脚本编辑器无法在A的无界框架中引入的问题。 经查询&#xff0c;需要修改monaco源码来使之能在无界中使用。 解决方案&#xff1a;https://github.com/Tencent/wujie/issues/205。 有三种解决方案&#xff1a; …

C#知识点-16(计算器插件开发、事件、递归、XML)

计算器插件开发 1、Calculator.cs using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace Calculator_DLL {//用来明确所有插件开发人员的开发规范public abstract class Calculator{public int N…

【JavaWeb】网上蛋糕商城-项目搭建

学习目标 了解网上蛋糕商城的项目需求 了解网上蛋糕商城的功能结构 熟悉E-R图和数据表的设计 熟悉项目环境的搭建 通过前面章节的学习&#xff0c;相信读者应该已经掌握了Web开发的基础知识&#xff0c;学习这些基础知识就是为开发Web网站奠定基础。如今&#xff0c;电子商…

备战蓝桥杯---动态规划(应用2(一些十分巧妙的优化dp的手段))

好久不见&#xff0c;甚是想念&#xff0c;最近一直在看过河这道题&#xff08;感觉最近脑子有点宕机QAQ&#xff09;&#xff0c;现在算是有点懂了&#xff0c;打算记录下这道又爱又恨的题。&#xff08;如有错误欢迎大佬帮忙指出&#xff09; 话不多说&#xff0c;直接看题&…

MyBatis-Plus:通用分页实体封装

分页查询实体&#xff1a;PageQuery package com.example.demo.demos.model.query;import com.baomidou.mybatisplus.core.metadata.OrderItem; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import lombok.Data; import org.springframework.util.St…

Stable Diffusion 绘画入门教程(webui)-ControlNet

ControlNet可以说在SD里有着举足轻重的地位&#xff0c;如果没有ControlNet&#xff0c;sd的可玩性和实用性将大大降低。 前面几篇文章介绍了 提示词 和 lora&#xff0c;本篇文章介绍sd里最关键的第三个要素–ControlNet 文章目录 一、它具体能干啥1、艺术字2、改变姿态3、其…

企业数据资产入表路径及方法完整解析

源自&#xff1a;架构老人 “人工智能技术与咨询” 发布 01政策、背景、趋势 一、数字资源如表国家政策 为规范企业数据资源相关会计处理&#xff0c;强化相关会计信息披露&#xff0c;财政部制定印发了《企业数据资源相关会计处理暂行规定》&#xff08;以下简称《暂行规…