微信小程序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>

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

k8s(3)

目录 一.K8S的三种网络 flannel的三种模式: 在 node01 节点上操作&#xff1a; calico的 三种模式&#xff1a; flannel 与 calico 的区别&#xff1f; 二.CoreDNS 在所有 node 节点上操作&#xff1a; 在 master01 节点上操作&#xff1a; ​编辑 DNS 解析测试&#…

二叉树基础知识总结

目录 二叉树基础知识 概念 : 根节点的五个形态 : 特殊的二叉树 满二叉树 : 完全二叉树 : 二叉搜索树 : 平衡二叉搜索树 : 二叉树的性质 : 二叉树的存储结构 二叉树的顺序存储结构 二叉树的链式存储结构 二叉树的遍历方式 : 基础概念 前中后遍历 层序遍历 :…

新年新策略:2024数字化转型宝典,锁定趋势预测与关键部署策略

官.网地址&#xff1a;合合TextIn - 合合信息旗下OCR云服务产品 2024年是实现“十四五”规划目标任务的关键一年&#xff0c;以数字化驱动生产方式、生活方式和治理方式全面变革依旧是重中之重而作为数字化转型的助推器&#xff0c;信创同样是实现相关规划目标的一大抓手&…

OpenAI Sora引领AI跳舞视频新浪潮:字节跳动发布创新舞蹈视频生成框架

OpenAI的Sora已经引起广泛关注&#xff0c;预计今年AI跳舞视频将在抖音平台上大放异彩。下面将为您详细介绍一款字节跳动发布的AI视频动画框架。 技术定位&#xff1a;这款框架采用先进的diffusion技术&#xff0c;专注于生成人类舞蹈视频。它不仅能够实现人体动作和表情的迁移…

从零开始学习Netty - 学习笔记 - NIO基础 - 网络编程: Selector

4.网络编程 4.1.非阻塞 VS 阻塞 在网络编程中&#xff0c;**阻塞&#xff08;Blocking&#xff09;和非阻塞&#xff08;Non-blocking&#xff09;**是两种不同的编程模型&#xff0c;描述了程序在进行网络通信时的行为方式。 阻塞&#xff08;Blocking&#xff09;&#xff1…

电商平台商家结算

本文主要分析了目前电商清结算的流程以及自己对电商清结算的看法。 基本概念 先说下电商平台清结算的概念。简单说就是收的用户&#xff08;C端&#xff09;的付款&#xff0c;经过清分&#xff0c;再结算给对应商家。当然&#xff0c;这里排除那种资金不通过第三方&#xff0c…

django自定义后端过滤

​ DRF自带的过滤 第一个 DjangoFilterBackend 是需要安装三方库见[搜索&#xff1a;多字段筛选]两外两个是安装注册了rest_framework就有。 如上图&#xff0c;只要配置了三个箭头所指的方向&#xff0c;就能使用。 第一个单字段过滤 用户视图集中加上filterset_fields …

linux 系统的目录结构

为什么某些执行程序位于/bin、/sbin、/usr/bin或/usr/sbin目录下&#xff1f;例如&#xff0c;less命令位于/usr/bin目录下。为什么不是/bin、/sbin或/usr/sbin&#xff1f;这些目录之间有什么区别呢&#xff1f; 在这篇文章中&#xff0c;让我们主要讲述一下Linux文件系统结构…

IP协议及相关技术协议

一、IP基本认识 1. IP的作用 IP在TCP/IP模型中处于网络层&#xff0c;网络层的主要作用是实现主机与主机之间的通信&#xff0c;而IP的作用是在复杂的网络环境中将数据包发送给最终目的主机。 2. IP与MAC的关系 简单而言&#xff0c;MAC的作用是实现“直连”的两个设备之通信…

【深入理解设计模式】 工厂设计模式

工厂设计模式 工厂设计模式是一种创建型设计模式&#xff0c;它提供了一种在不指定具体类的情况下创建对象的接口。在工厂设计模式中&#xff0c;我们定义一个创建对象的接口&#xff0c;让子类决定实例化哪一个类。工厂方法使一个类的实例化延迟到其子类。 工厂设计模式的目…

Web安全之浅见

备注&#xff1a;这是我在2017年在自己的网站上写的文章&#xff0c;今天迁移过来。 昨天去参加了公司组织的一个关于网络安全的培训&#xff0c;了解了很多关于网络安全方面的知识&#xff0c;也才意识到网络安全是一项极其重要的领域。 本篇文章主要聊聊Web安全。不过我对于网…

区块链游戏解说:什么是 Planet IX

作者&#xff1a;lesleyfootprint.network 编译&#xff1a;cicifootprint.network 数据源&#xff1a;Planet IX Dashboard 什么是 Planet IX Planet IX&#xff0c;一个由原生 IX TOKEN 推动的 Web3 玩赚平台。作为一款 GameFi 策略游戏&#xff0c; Planet IX 上的每项资…

ArcgisForJS如何访问Arcgis Server?

文章目录 0.引言1.准备ArcGIS相关工具2.创建含有ArcSDE地理数据库的MXD文件3.注册ArcSDE地理数据库4.发布数据到Arcgis Server5.ArcgisForJS访问ArcGIS Server数据 0.引言 ArcGIS API for JavaScript 是一个用于在Web和移动应用程序中创建交互式地图和地理空间分析应用的库。它…

Prometheus+TDengine集群实现监控体系高可用

背景 为避免再次出现因Prometheus宕机导致业务无法查看历史数据受到影响&#xff0c;准备将Prometheus架构从单节点方式升级为高可用集群方式并将后端存储由本地存储改为远端分布式时序数据库存储。分布式时序数据库采用国产数据库TDengine。 架构 解释&#xff1a;虚线代表P…

【服务器】服务器推荐

一、引言 在数字世界的浪潮中&#xff0c;服务器作为数据存储和处理的基石&#xff0c;其重要性不言而喻。而在这个繁星点点的市场中&#xff0c;雨云以其独特的优势和超高的性价比&#xff0c;逐渐成为众多企业和个人的首选。今天&#xff0c;就让我带你走进雨云的世界&#…

排序前言冒泡排序

目录 排序应用 常见的排序算法 BubbleSort冒泡排序 整体思路 图解分析 ​ 代码实现 每趟 写法1 写法2 代码NO1 代码NO2优化 时间复杂度 排序概念 排序&#xff1a;所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递…

QY-800S土壤水分测量仪的使用场景和功能作用

技术参数 ◆土壤湿度 测量范围&#xff1a;干土&#xff5e;饱和土 测量精度&#xff1a;3% 分辨率&#xff1a;0.1% ◆土壤温度 测量范围&#xff1a;-30℃&#xff5e;70℃ 测量精度&#xff1a;0.3℃ 分辨率&#xff1a;0.1℃ ◆记录间隔&#xff1a;30 分&#xff5…

数据分析(二)自动生成分析报告

1. 报告生成思路概述 怎么快速一份简单的数据分析报告&#xff0c;注意这个报告的特点&#xff1a; --网页版&#xff0c;可以支持在线观看或者分享HTML文件 --标题&#xff0c;动图&#xff0c;原始数据应有尽有 --支持交互&#xff0c;比如plotly交互画面&#xff0c;数据…

数论之约数(试除法求约数,约数个数,约数和)算法原理讲解及其实现

约数问题&#xff1a; 试除法&#xff1a; d|n 那么 n/d|n 也是成立的-----> 成对出现的 d<n/d d小于等于根号n 举例&#xff1a; 假如2是12的约数&#xff0c;那么6也是12的约数。 #include <iostream> #include <algorithm> #include <vector> #…

交换瓶子【第七届】【省赛】【A组】

题目描述 有N个瓶子&#xff0c;编号 1 ~ N&#xff0c;放在架子上。 比如有5个瓶子&#xff1a; 2 1 3 5 4 要求每次拿起2个瓶子&#xff0c;交换它们的位置。 经过若干次后&#xff0c;使得瓶子的序号为&#xff1a; 1 2 3 4 5 对于这么简单的情况&#xff0c;显然&#…