当前位置: 首页 > 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 支付宝支付 功能截图: 分为管理员端和 普通用户端 和 维修人员端 阿里大佬亲讲 免费看地址: 见评论区...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

第7篇:中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

Python 高效图像帧提取与视频编码:实战指南

Python 高效图像帧提取与视频编码:实战指南 在音视频处理领域,图像帧提取与视频编码是基础但极具挑战性的任务。Python 结合强大的第三方库(如 OpenCV、FFmpeg、PyAV),可以高效处理视频流,实现快速帧提取、压缩编码等关键功能。本文将深入介绍如何优化这些流程,提高处理…...

QT开发技术【ffmpeg + QAudioOutput】音乐播放器

一、 介绍 使用ffmpeg 4.2.2 在数字化浪潮席卷全球的当下&#xff0c;音视频内容犹如璀璨繁星&#xff0c;点亮了人们的生活与工作。从短视频平台上令人捧腹的搞笑视频&#xff0c;到在线课堂中知识渊博的专家授课&#xff0c;再到影视平台上扣人心弦的高清大片&#xff0c;音…...

32单片机——基本定时器

STM32F103有众多的定时器&#xff0c;其中包括2个基本定时器&#xff08;TIM6和TIM7&#xff09;、4个通用定时器&#xff08;TIM2~TIM5&#xff09;、2个高级控制定时器&#xff08;TIM1和TIM8&#xff09;&#xff0c;这些定时器彼此完全独立&#xff0c;不共享任何资源 1、定…...

uni-app学习笔记三十五--扩展组件的安装和使用

由于内置组件不能满足日常开发需要&#xff0c;uniapp官方也提供了众多的扩展组件供我们使用。由于不是内置组件&#xff0c;需要安装才能使用。 一、安装扩展插件 安装方法&#xff1a; 1.访问uniapp官方文档组件部分&#xff1a;组件使用的入门教程 | uni-app官网 点击左侧…...

手动给中文分词和 直接用神经网络RNN做有什么区别

手动分词和基于神经网络&#xff08;如 RNN&#xff09;的自动分词在原理、实现方式和效果上有显著差异&#xff0c;以下是核心对比&#xff1a; 1. 实现原理对比 对比维度手动分词&#xff08;规则 / 词典驱动&#xff09;神经网络 RNN 分词&#xff08;数据驱动&#xff09…...

Linux中INADDR_ANY详解

在Linux网络编程中&#xff0c;INADDR_ANY 是一个特殊的IPv4地址常量&#xff08;定义在 <netinet/in.h> 头文件中&#xff09;&#xff0c;用于表示绑定到所有可用网络接口的地址。它是服务器程序中的常见用法&#xff0c;允许套接字监听所有本地IP地址上的连接请求。 关…...