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

news2024/10/6 21:51:12

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Docker】Linux主机部署Docker

Docker部署 1.二进制文件部署 到如下地址&#xff0c;下载二进制包。 Docker官网&#xff1a;https://docs.docker.com/engine/install/binaries/ 网易镜像源&#xff1a;https://mirrors.163.com/docker-ce/linux/static/stable/x86_64/ 下载好的二进制包上传到主机&#xf…

【LeetCode】递归精选8题——基础递归、链表递归

目录 基础递归问题&#xff1a; 1. 斐波那契数&#xff08;简单&#xff09; 1.1 递归求解 1.2 迭代求解 2. 爬楼梯&#xff08;简单&#xff09; 2.1 递归求解 2.2 迭代求解 3. 汉诺塔问题&#xff08;简单&#xff09; 3.1 递归求解 4. Pow(x, n)&#xff08;中等&…

(每日持续更新)信息系统项目管理(第四版)(高级项目管理)考试重点整理第11章 项目成本管理(一)

博主2023年11月通过了信息系统项目管理的考试&#xff0c;考试过程中发现考试的内容全部是教材中的内容&#xff0c;非常符合我学习的思路&#xff0c;因此博主想通过该平台把自己学习过程中的经验和教材博主认为重要的知识点分享给大家&#xff0c;希望更多的人能够通过考试&a…

消息队列-RabbitMQ:workQueues—工作队列、消息应答机制、RabbitMQ 持久化、不公平分发(能者多劳)

4、Work Queues Work Queues— 工作队列 (又称任务队列) 的主要思想是避免立即执行资源密集型任务&#xff0c;而不得不等待它完成。我们把任务封装为消息并将其发送到队列&#xff0c;在后台运行的工作进程将弹出任务并最终执行作业。当有多个工作线程时&#xff0c;这些工作…

python51-Python流程控制if分支之不要随意缩进

需要说明的是,虽然Python 语法允许代码块随意缩进N个空格,但同一个代码块内的代码必须保持相同的缩进,不能一会缩进2个空格,一会缩进4个空格。例如如下代码。 上面程序中第二条print语句缩进了5个空格,在这样的情况下,Python解释器认为这条语句与前一条语句(缩进了4个空格…

用html编写的招聘简历

用html编写的招聘简历 相关代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</tit…

没有代码签名证书会怎么样?

随着Windows的SmartScreen功能的普及&#xff0c;如果一个软件发布的时候没有通过代码签名证书进行数字签名&#xff0c;那这个软件从发布&#xff0c;下载&#xff0c;安装&#xff0c;运行等&#xff0c;基本都会遭到系统的风险警告&#xff0c;运行拦截。其目的在于警示用户…

MapGIS 10.6 Pro前端开发低代码,快速构建WebGIS应用

随着实景三维、CIM、数字孪生等的快速发展&#xff0c;相关应用开发需求的市场增长对企业IT交付能力的要求越来越高&#xff0c;为了确保质量并实现提效降本&#xff0c;并让专业开发者更加专注于更具有价值和创新型的工作&#xff0c;低代码开发技术成为大家的优先选择。 为了…

工作入职必备:一寸照片尺寸要求及自拍换底色方法

踏入职场的第一步&#xff0c;往往从一张小小的一寸照片开始。这张看似不起眼的照片&#xff0c;却是你给新同事、新领导的第一印象。今天&#xff0c;我们就来深入探讨一寸照片的尺寸要求&#xff0c;以及如何巧妙地通过自拍来更换背景颜色&#xff0c;让你的入职照片既专业又…

【Java EE初阶二十一】关于http(二)

2. 深入学习http 2.5 关于referer Referer 描述了当前页面是从哪个页面跳转来的&#xff0c;如果是直接在地址栏输入 url(或者点击收藏夹中的按钮) 都是没有 Referer。如下图所示&#xff1a; HTTP 最大的问题在于"明文传输”,明文传输就容易被第三方获取并篡改. …

我国为分散染料(分散性染料)生产及出口大国 合成纤维领域为其主要需求端

我国为分散染料&#xff08;分散性染料&#xff09;生产及出口大国 合成纤维领域为其主要需求端 分散染料又称分散性染料&#xff0c;指分子结构中不含水溶性基团的染料。与其他染料相比&#xff0c;分散染料具有耐光性好、色彩饱和度高、易于分散、绿色环保等优势&#xff0c;…

探索未来-Sora

AI如何将静态图像转化为动态、逼真的视频&#xff1f; OpenAI 的 Sora 通过时空片段&#xff08;以下统称片段&#xff09;的创新使用给出了答案。 Sora 展示与探讨 在快速发展的生成模型领域&#xff0c;OpenAI 的 Sora成为一个重要的里程碑&#xff0c;有望重塑我们对视频生…

Python编程实验四:函数的使用

目录 一、实验目的与要求 二、实验内容 三、主要程序清单和程序运行结果 第1题 第2题 第3题 第4题 第5题 四、实验结果分析与体会 一、实验目的与要求 &#xff08;1&#xff09;通过本次实验&#xff0c;学生应掌握函数的定义与调用的基本语法&#xff0c;能根据需要…

K8S的架构(1)

目录 一.k8s K8S有 master 和 worker node 两类节点&#xff1a; ​编辑 二.K8S创建Pod资源的工作流程 三.K8S资源对象 Pod&#xff1a;是K8S能够创建和管理的最小单位。 Pod控制器: 四.K8S资源配置信息 一.k8s kubernetes &#xff1a; Google旗下的容器跨主机编排…

linux上安装bluesky的步骤

1、设备上安装的操作系统如下&#xff1a; orangepiorangepi5b:~$ lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 22.04.2 LTS Release: 22.04 Codename: jammy 2、在用户家目录下创建一个目录miniconda3目录&a…

如何系统地自学Python?

如何系统地自学Python&#xff1f; 如何系统地自学Python&#xff1f;1.了解编程基础2.学习Python基础语法3.学习Python库和框架4.练习编写代码5.参与开源项目6.加入Python社区7.利用资源学习8.制定学习计划9.持之以恒总结 如何系统地自学Python&#xff1f; 作为一个Python语…

实现Slider 滑块组件标记动态变化

实现以上效果&#xff0c;下拉框、slider滑块、按钮都在同一行&#xff0c;设置flex布局后&#xff0c;发现silider滑块最右边的标记数字一直都如下竖着显示&#xff0c;后来通过给源组件的标记区.el-slider__marks-text增加一个宽度后解决该问题。 <template><div>…

可视化大屏:一屏尽览生产数据,管理从未如此轻松!

工厂管理者需要对生产过程进行全面的监控和管理。而可视化大屏作为一种新型的生产监控工具&#xff0c;已经被越来越多的企业所采用。本文将从可视化大屏的概念、特点以及在工厂生产中的应用等方面进行详细介绍。 煤炭化工生产大屏看板 一、可视化大屏的概念和特点 可视化大屏…

js-Vue Router 中的方法,父A-子B-子C依次返回,无法返回到A,BC中形成循环跳转解决

1.常用的方法 在 Vue Router 中&#xff0c;有一些常用的方法用于实现路由导航和管理。以下是一些常见的 Vue Router 方法及其作用&#xff1a; push: router.push(location, onComplete, onAbort) 作用&#xff1a;向路由历史记录中添加一个新条目&#xff0c;并导航到指定的路…

[嵌入式系统-32]:RT-Thread -17- 任务、进程、线程的区别

目录 一、基本概念澄清 1.1 任务 1.2 进程 1.3 线程 1.4 比较 1.5 任务VS进程 1.6 进程 VS 线程 1.7 任务 进程 线程 发展历史 任务&#xff08;Task&#xff09;&#xff1a; 进程&#xff08;Process&#xff09;&#xff1a; 线程&#xff08;Thread&#xff09;…