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

在这里插入图片描述

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/398878.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

java基础之 注解与异常

注解 注解说明 用于对代码进行说明&#xff0c;可以对包、类、接口、字段、方法参数、局部变量等进行注解&#xff0c;它主要的作用有以下四个方面&#xff1a; 生成文档&#xff1a;通过代码里标识的元数据生成javadoc文档。编译检查&#xff1a;通过代码里标识的元数据让编…

Django后台管理(一)

一、admin介绍 Django 最强大的部分之一是自动管理界面。它从你的模型中读取元数据,提供一个快速的、以模型为中心的界面,受信任的用户可以管理你网站上的内容 官网:https://docs.djangoproject.com/zh-hans/4.1/ref/contrib/admin/ 提示 后台管理系统是管理人员使用,不是…

tritonserver学习之七:cache管理器

tritonserver学习之一&#xff1a;triton使用流程 tritonserver学习之二&#xff1a;tritonserver编译 tritonserver学习之三&#xff1a;tritonserver运行流程 tritonserver学习之四&#xff1a;命令行解析 tritonserver学习之五&#xff1a;backend实现机制 tritonserv…

通过视触觉多模态学习实现机器人泛化操作

这篇文章的主题是探讨如何通过融合视觉和触觉信息来提高强化学习的效率和泛化能力。作者提出了一种名为Masked Multimodal Learning&#xff08;M3L&#xff09;的新型学习策略。M3L的核心思想是在策略梯度更新和基于掩蔽自编码的表示学习阶段之间交替进行。 在策略梯度更新和基…

电商API接口获取电商平台商品详情|JAVA API接口|一篇文章带你搞定Java的数据库访问

一、前言 在应用程序开发中&#xff0c;需要使用数据库管理和存储各种数据。在Java中&#xff0c;提供了一个JDBC技术(Java Database Connectivity&#xff0c;JDBC&#xff0c;Java数据库连接)&#xff0c;它的作用是连接数据库并访问。电商平台数据的采集就经常用到JAVA请求…

密码学基本概念

密码学基本概念 密码学的安全目标至少包含三个方面: (1)保密性(Confidentiality):信息仅被合法用户访问(浏览、阅读、打印等),不被泄露给非授权的用户、实体或过程。 提高保密性的手段有:防侦察、防辐射、数据加密、物理保密等。 (2)完整性(Integrity):资源只有…

第十三章[管理]:13.3:pycharm的常用设置

一,pycharm配置注释模板 1,打开配置界面: pycharm->preference 英文:Editor->File and Code Templates->Python Script 中文:编辑器->文件和代码模板->Python Script 如图: 我们输入的内容: # @Project : ${PROJECT_NAME} # @File : ${NAME}.py # @Author …

相机图像质量研究(38)常见问题总结:编解码对成像的影响--呼吸效应

系列文章目录 相机图像质量研究(1)Camera成像流程介绍 相机图像质量研究(2)ISP专用平台调优介绍 相机图像质量研究(3)图像质量测试介绍 相机图像质量研究(4)常见问题总结&#xff1a;光学结构对成像的影响--焦距 相机图像质量研究(5)常见问题总结&#xff1a;光学结构对成…

计算机视觉基础【OpenCV轻松入门】:获取图像的ROI

OpenCV的基础是处理图像&#xff0c;而图像的基础是矩阵。 因此&#xff0c;如何使用好矩阵是非常关键的。 下面我们通过一个具体的实例来展示如何通过Python和OpenCV对矩阵进行操作&#xff0c;从而更好地实现对图像的处理。 ROI&#xff08;Region of Interest&#xff09;是…

16.隐式类的定义和使用

目录 概述实践代码执行 结束 概述 实践 代码 package com.fun.scalaimport java.io.File import scala.io.Sourceobject ImplicitClassApp {def main(args: Array[String]): Unit {val file new File("data/wc.data")println(file.read())}implicit class FileE…

计算机设计大赛 深度学习人脸表情识别算法 - opencv python 机器视觉

文章目录 0 前言1 技术介绍1.1 技术概括1.2 目前表情识别实现技术 2 实现效果3 深度学习表情识别实现过程3.1 网络架构3.2 数据3.3 实现流程3.4 部分实现代码 4 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习人脸表情识别系…

【Docker】有用的命令

文章目录 DockerDocker 镜像与容器的差异Docker的好处Hypervisor运维 一、安装docker二、启动docker三、获取docker镜像四、创建镜像使用命令行创建镜像使用dockerfile创建镜像 五、docker报错 Docker docker镜像&#xff08;Image&#xff09; docker镜像类似于虚拟机镜像&…

概念、背景和代码

1. 概念、背景和代码的通用介绍 图1.抽象 概念、背景和代码在不同的语境下有不同的含义&#xff0c;在这里可以尝试进行如下解释&#xff1a; 概念&#xff1a;通常指对事物本质属性或规律的抽象概括。在学术研究、教育、软件开发等领域中&#xff0c;概念是理论体系的基础单元…

HTML知识点

HTML 【一】HTML简介 【1】什么是HTML HTML是一种用于创建网页结构和内容的超文本标记语言&#xff0c;它是构建网页的基础。为了让浏览器正确渲染页面&#xff0c;我们必须遵循HTML的语法规则。浏览器在解析网页时会将HTML代码转换为可视化的页面&#xff0c;所以我们在浏览…

评估睡眠阶段分类:年龄和早晚睡眠对分类性能的影响

摘要 睡眠阶段分类是专家用来监测人类睡眠数量和质量的常用方法&#xff0c;但这是一项耗时且费力的任务&#xff0c;观察者之间和观察者内部的变异性较高。本研究旨在利用小波进行特征提取&#xff0c;采用随机森林进行分类&#xff0c;寻找并评估一种自动睡眠阶段分类的方法…

JAVA设计模式结构型模式

一、前言 java设计模式主要分为创建型模式&#xff0c;结构型模式和行为型模式。上一篇主要总结了行为型设计模式&#xff0c;本章总结&#xff0c;结构型模式。像创建型模式就不写了&#xff0c;比较简单。大概知道是工厂模式和建造者模式&#xff0c;原型模式就行&#xff0…

Atcoder ABC340 E - Mancala 2

Mancala 2&#xff08;曼卡拉 2&#xff09; 时间限制&#xff1a;2s 内存限制&#xff1a;1024MB 【原题地址】 所有图片源自Atcoder&#xff0c;题目译文源自脚本Atcoder Better! 点击此处跳转至原题 【问题描述】 【输入格式】 【输出格式】 【样例1】 【样例输入1】 …

主流开发语言和开发环境介绍

主流开发语言和开发环境介绍文章目录 ⭐️ 主流开发语言&#xff1a;2024年2月编程语言排行榜&#xff08;TIOBE前十&#xff09;⭐️ 主流开发语言开发环境介绍1.Python2.C3.C4.Java5.C#6.JavaScript7.SQL8.GO9.Visual Basic10.PHP ⭐️ 主流开发语言&#xff1a;2024年2月编程…

2024年2月的TIOBE指数,go语言排名第8,JAVA趋势下降

二月头条&#xff1a;go语言进入前十 本月&#xff0c;go在TIOBE指数前10名中排名第8。这是go有史以来的最高位置。当谷歌于2009年11月推出Go时&#xff0c;它一炮而红。在那些日子里&#xff0c;谷歌所做的一切都是神奇的。在Go出现的几年前&#xff0c;谷歌发布了GMail、谷歌…

SpringBoot+WebSocket实现即时通讯(二)

前言 紧接着上文《SpringBootWebSocket实现即时通讯&#xff08;一&#xff09;》 本博客姊妹篇 SpringBootWebSocket实现即时通讯&#xff08;一&#xff09;SpringBootWebSocket实现即时通讯&#xff08;二&#xff09;SpringBootWebSocket实现即时通讯&#xff08;三&…