当前位置: 首页 > news >正文

uniapp中video播放视频上按钮没显示的问题

video标签层级很高,尝试了添加z-index,但无效果
通过查阅资料,得知cover-view层级比video层级高

效果图

01252253f5d7dc503ee78f2a9177ff8.png

需求是为了使直播时,可选是原画/流畅

解决方案

首先,在pages.json中配置右上角的图标

{"path" : "pages/event/live","style" : {"navigationBarTitleText": "直播详情","navigationBarTextStyle":"white","disableScroll": true,"app-plus":{"titleNView":{"backgroundColor":"#010001","buttons":[{"fontSrc": "/static/iconfontapp.ttf","text": "\ue66f","fontSize": "22px","color": "#FFFFFF"},{"fontSrc": "/static/iconfontapp.ttf","text": "\ue60b","fontSize": "22px","color": "#FFFFFF"}]}}}},

然后在需要展示这个按钮的页面,加上操作方法

<template><view v-if="liveUrl"><video class="v-video-play"  autoplay:src="liveUrl" controls:show-progress="false"><template v-if="speedShow && range && range.length"><cover-view class="cover-box w100"></cover-view><cover-view v-for="(item, index) in range" :key="index" @click="selectitem(item.value)" class="sb-txt cf" :class="[{'cred': item.value == rangeValue},`f${index + 1}`]">{{ item.text }}</cover-view></template></video></view>
</template>
<script>
export default {data() {return {rangeValue: 'FD', // 默认流畅range: [], // 画质选项的列表speedShow: false // 是否点击了切换的按钮}},onNavigationBarButtonTap(button) {let _event = this.eventif(button.index === 0) {//如果点击的是分享按钮shareWx({title: _event.title,summary: '活动直播 - 墨天轮',href: domain + `/event/live/${_event.id}`,imageUrl: _event.shareImageUrl})} else if (button.index === 1) {//如果点击的是清晰度切换按钮this.speedShow = !this.speedShow}},
}
</script>

相关文章:

uniapp中video播放视频上按钮没显示的问题

video标签层级很高&#xff0c;尝试了添加z-index&#xff0c;但无效果 通过查阅资料&#xff0c;得知cover-view层级比video层级高 效果图 需求是为了使直播时&#xff0c;可选是原画/流畅 解决方案 首先&#xff0c;在pages.json中配置右上角的图标 {"path" : …...

docker学习:dockerfile和docker-compose

学习如何使用dockerfile 以下内容&#xff0c;部分来自gpt生成&#xff0c;里面的描述可能会出现问题&#xff0c;但代码部分&#xff0c;我都会进行测试。 1. 需求 对于一个docker&#xff0c;例如python&#xff0c;我们需要其在构建成容器时&#xff0c;就有np。有以下两种方…...

Pycharm 配置python项目本地运行环境

1.打开Pycharm,打开Setting 2. 新建本地环境 3.如果报错如上图所示&#xff0c;请通过cmd来新建本地环境&#xff0c;具体步骤如下 在对应的代码路径下&#xff0c;通过virtualenv venv来创建虚拟路径 安装好之后&#xff0c;安装对应的依赖包即可 pip3 install -r ./require…...

DevEco Studio中如何设置HarmonyOS/OpenHarmony应用开发

DevEco Studio内置有帮助中心&#xff0c;初学HarmonyOS 及OpenHarmony应用、元服务的开发者&#xff0c;通过内置的帮助中去系统的学习相关内容&#xff0c;是边练边学&#xff0c;快速上手的最佳方式。 一、帮助 二、快速开始 三、HarmonyOS应用、元服务开发相关 四、OpenHa…...

Matlab图像处理-三原色

三原色 根据详细的实验结果&#xff0c;人眼中负责颜色感知的细胞中约有65%对红光敏感&#xff0c;33%对绿光敏感&#xff0c;只有2%对蓝光敏感。正是人眼的这些吸收特性决定了所看到的彩色是一般所谓的原色红&#xff08;R&#xff09;、绿&#xff08;G&#xff09;和蓝&…...

QLExpress代码解读,运行原理解析

简介&#xff1a; 本文针对上图的功能详细图&#xff0c;进行逐个的简单介绍&#xff1a;代码入口、代码的主要逻辑和算法。 调用代码实例 //本文以helloworld案例,开启了两个打印日志的参数&#xff0c;实际使用通常不建议打开。 boolean printParseLog true;//语法分析日志开…...

M1 Mac创建虚拟环境遇到的问题

报错信息 PackagesNotFoundError: The following packages are not available from current channels: python3.7 Current channels: https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/main/osx-arm64 https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/main/noarch htt…...

flutter 与H5交互

主要是flutter内嵌H5页面&#xff0c;之后就是两者之间的交互 flutter&#xff1a;webview_flutter 4.2.2 H5&#xff1a; uniapp 1、flutter向H5传参 //在flutter 中的web页面&#xff0c;可在onPageFinished中向H5进行传参onPageFinished: (String url) async {WebViewCont…...

【Java 基础篇】Java类型通配符:解密泛型的神秘面纱

在Java中&#xff0c;类型通配符&#xff08;Type Wildcard&#xff09;是泛型的重要概念之一。它使得我们能够更加灵活地处理泛型类型&#xff0c;使代码更通用且可复用。本文将深入探讨Java类型通配符的用法、语法和最佳实践。 什么是类型通配符&#xff1f; 类型通配符是一…...

《极客时间:如何成为学习高手》【方法论】

本篇博客是学习过程中的笔记整理和个人思考。原文链接&#xff1a;https://time.geekbang.org/column/intro/100081501?tabcatalog 底层逻辑01&#xff5c;如何减少对学习的排斥和厌恶心理&#xff0c;使其变得相对愉悦&#xff1f;02&#xff5c;学会这 4 点&#xff0c;你也…...

如何处理ChatGPT在文本生成中的语法错误和不合理性?

ChatGPT是一种强大的自然语言处理模型&#xff0c;但它并不是完美的&#xff0c;有时会产生语法错误或不合理的文本。这些问题可能会影响模型生成的内容的质量和可信度。在处理ChatGPT中的语法错误和不合理性时&#xff0c;有许多方法和策略可以采用&#xff0c;以下是一些详细…...

GitHub常用命令

1. 将本文件夹初始化为一个本地git仓库 git init 2. 将github的远程克隆到本地 git clone XXX 3. 添加所有文件到暂存区 git add . 4. 删除工作区文件 git rm [file] 5. 提交 git commit -m "提交信息&#xff08;比如&#xff1a;my first commit file&#xff…...

【Linux学习笔记】 - 常用指令学习及其验证(上)

前言&#xff1a;本文主要记录对Linux常用指令的使用验证。环境为阿里云服务器CentOS 7.9。关于环境如何搭建等问题&#xff0c;大家可到同平台等各大资源网进行搜索学习&#xff0c;本文不再赘述。 由于本人对Linux学习程度尚且较浅&#xff0c;本文仅介绍验证常用指令的常用…...

火山引擎边缘云助力智能科技赋予生活更多新意

当下&#xff0c;先进的科学技术使得我们的日常生活变得快捷、舒适。大到上百层智能大厦、高端公共场所、社会智能基础设施&#xff0c;小到智能家居监控、指纹密码锁等&#xff0c;在这个充满想象力的时代&#xff0c;科技以更加智能化的方式改变和守护我们的生活。 引入智能…...

【无标题】CTreeCtrl更改-/+展开按钮颜色

#pragma once #include <list>// CMyTreeCtrlclass CMyTreeCtrl : public CTreeCtrl {private:std::list<std::...

【深度学习】 Python 和 NumPy 系列教程(十九):Matplotlib详解:2、3d绘图类型(5)3D等高线图(3D Contour Plot)

目录 一、前言 二、实验环境 三、Matplotlib详解 1、2d绘图类型 2、3d绘图类型 0. 设置中文字体 1. 3D线框图&#xff08;3D Line Plot&#xff09; 2. 3D散点图&#xff08;3D Scatter Plot&#xff09; 3. 3D条形图&#xff08;3D Bar Plot&#xff09; 4. 3D曲面图…...

Java ZGC 算法调优

ZGC 是一种专门的垃圾收集器&#xff0c;专注于管理大型堆并最大限度地减少 Java 应用程序中的暂停。它解决了内存密集型工作负载和一致的响应时间至关重要的场景中垃圾收集的挑战。利用并发处理能力和先进算法&#xff0c;ZGC 为优化 Java 应用程序的性能提供了有效的解决方案…...

【海思SS626 | 开发环境】编译整个SDK全过程以及问题汇总

目录 一、概述二、解压SDK&#xff0c;打补丁三、安装交叉编译工具✨3.1 安装 aarch64-mix410-linux.tgz✨3.2 安装 cc-riscv32-cfg11-musl-20220523-elf.tar.gz✨3.3 检查工具链版本&#xff0c;打印版本则表示安装成功 四、安装软件包✨4.1 安装软件包✨4.2 安装mtd-utils的依…...

83 # 静态服务中间件 koa-static 的使用以及实现

静态服务中间件&#xff1a;koa-static 中间件可以决定是否向下执行&#xff0c;如果自己可以处理&#xff0c;那么直接处理完毕结束&#xff0c;如果自己处理不了&#xff0c;next 方法会继续向下执行 新建 public 文件夹&#xff0c;里面添加 index.html、style.css 文件 …...

带讲解的自行车租赁系统,可做毕设/课设

适合人群: 马上毕业/需要毕设的同学 技术栈: 前后端分离 前端使用: Vue Element 后端使用: SpringBoot Mysql8.0 Mybatis 支付宝支付 功能截图: 分为管理员端和 普通用户端 和 维修人员端 阿里大佬亲讲 免费看地址: 见评论区...

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

前端调试HTTP状态码

1xx&#xff08;信息类状态码&#xff09; 这类状态码表示临时响应&#xff0c;需要客户端继续处理请求。 100 Continue 服务器已收到请求的初始部分&#xff0c;客户端应继续发送剩余部分。 2xx&#xff08;成功类状态码&#xff09; 表示请求已成功被服务器接收、理解并处…...

ubuntu中安装conda的后遗症

缘由: 在编译rk3588的sdk时&#xff0c;遇到编译buildroot失败&#xff0c;提示如下&#xff1a; 提示缺失expect&#xff0c;但是实测相关工具是在的&#xff0c;如下显示&#xff1a; 然后查找借助各个ai工具&#xff0c;重新安装相关的工具&#xff0c;依然无解。 解决&am…...

大模型真的像人一样“思考”和“理解”吗?​

Yann LeCun 新研究的核心探讨&#xff1a;大语言模型&#xff08;LLM&#xff09;的“理解”和“思考”方式与人类认知的根本差异。 核心问题&#xff1a;大模型真的像人一样“思考”和“理解”吗&#xff1f; 人类的思考方式&#xff1a; 你的大脑是个超级整理师。面对海量信…...

Netty自定义协议解析

目录 自定义协议设计 实现消息解码器 实现消息编码器 自定义消息对象 配置ChannelPipeline Netty提供了强大的编解码器抽象基类,这些基类能够帮助开发者快速实现自定义协议的解析。 自定义协议设计 在实现自定义协议解析之前,需要明确协议的具体格式。例如,一个简单的…...

【Zephyr 系列 16】构建 BLE + LoRa 协同通信系统:网关转发与混合调度实战

🧠关键词:Zephyr、BLE、LoRa、混合通信、事件驱动、网关中继、低功耗调度 📌面向读者:希望将 BLE 和 LoRa 结合应用于资产追踪、环境监测、远程数据采集等场景的开发者 📊篇幅预计:5300+ 字 🧭 背景与需求 在许多 IoT 项目中,单一通信方式往往难以兼顾近场数据采集…...