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>

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

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

相关文章

YOLOv5:修改backbone为ConvNeXt

YOLOv5&#xff1a;修改backbone为ConvNeXt 前言前提条件相关介绍ConvNeXtYOLOv5修改backbone为ConvNeXt修改common.py修改yolo.py修改yolov5.yaml配置 参考 前言 记录在YOLOv5修改backbone操作&#xff0c;方便自己查阅。由于本人水平有限&#xff0c;难免出现错漏&#xff0c…

TCP socket UDP TCP协议 IP协议 以太网等

第 1 题&#xff08;编程题&#xff09; 题目名称&#xff1a; 编写 TCP 版本的 echo server 和 echo client 题目内容&#xff1a; 编写 TCP 版本的 echo server 和 echo client 第 2 题&#xff08;编程题&#xff09; 题目名称&#xff1a; 编写 TCP 版本的字典客户端…

SQL server中字段自增:IDENTITY、序列Sequence

SQL server中字段自增&#xff1a;IDENTITY、序列Sequence 1.列字段自增IDENTITY 在 SQL Server 中&#xff0c;IDENTITY(1, 1) 是用于定义一个自增长列的属性。它的含义如下&#xff1a; IDENTITY&#xff1a;表示该列是一个自增长列。(1, 1)&#xff1a;表示自增长列的起始…

[Kubernetes] 多调度器(1/3):如何编译scheduler,以默认调度器 kube-scheduler为例

文章目录 前提如何编译参考 本文以k8s v1.14为例&#xff0c;到v1.28也适用。 前提 已配好相应的go v1.12.2&#xff08;go 版本选择按k8s的CHANGELOG.md选&#xff09; 放在&#xff1a;/usr/local/GOPATH/root/go/ 已下载k8s的1.14.9源码 kubernetes/&#xff0c;或直接git…

TCP/IP传输协议学习

了解完整的通信过程 1.发送方源终端设备的应用创建数据。 2.当数据在源终端设备中沿协议栈向下传递&#xff0c;对其分段和封装。 3.在协议栈网络接入层的介质上生成数据。 4.通过由介质和任意中间设备组成的网际层网络传输数据。 5.在目的终端设备中沿协议栈向上传递时对其…

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…

微信小程序线上加载使用iconfont问题

1.在微信小程序根目录下创建style文件夹&#xff0c;里面再创建iconfont文件夹&#xff0c;用于放置iconfont图标文件和iconfont样式文件 2.给iconfont.wxss写样式&#xff08;也可以下载iconfont代码&#xff0c;拷贝iconfont.css里的代码复制进去&#xff09; font-face {fo…

Ecrett Music:AI音乐创作软件

【产品介绍】 Ecrett Music是一个由人工智能驱动的AI音乐创作软件&#xff0c;可以帮助内容创作者快速、简单、便宜地制作出适合自己的无版权音乐。无论你是做游戏、视频、播客还是其他类型的内容&#xff0c;都可以在Ecrett Music上选择场景、情绪或风格&#xff0c;然后点击一…

kali安装volatility及插件mimikatz

1.准备工作 kali安装pip2 wget https://bootstrap.pypa.io/pip/2.7/get-pip.py python2 get-pip.py 查看pip2版本 python2 -m pip -v pip2安装升级 pip2 install --upgrade setuptools 安装2个库 pip2 install construct2.10.54 pip2 install pycryptodome 下载文件d…

Kubernetes入门 十七、Helm 包管理器

目录 概述Helm 的三大概念Helm 的安装仓库管理Helm 的常用命令 chart详解目录结构Redis chart 实践升级回滚 概述 Kubernetes 上的应用对象&#xff0c;都是由特定的资源描述组成&#xff0c;包括 Deployment、Service 等&#xff0c;都保存在各自的文件中或者集中写在一个配置…

通过Git Bash将本地文件上传到本地github

1. 新建一个仓库&#xff08; Repository&#xff09; 1.1登录Github&#xff0c;点击个人头像&#xff0c;点击Your repositories&#xff0c;点击New。 1.2 填写信息 Repository name: 仓库名称 Description(可选): 仓库描述介绍,不是必填项目。~~建议填写上哦&#xff01;…

计算机专业毕业设计项目推荐02-个人医疗系统(Java+原生Js+Mysql)

个人医疗系统&#xff08;Java原生JsMysql&#xff09; **介绍****系统总体开发情况-功能模块****各部分模块实现** 介绍 本系列(后期可能博主会统一为专栏)博文献给即将毕业的计算机专业同学们,因为博主自身本科和硕士也是科班出生,所以也比较了解计算机专业的毕业设计流程以…

华三路由交换技术基础——计算机网络基础

计算机网络&#xff1a; 定义&#xff1a;一组具有自治权的计算机互联的集合 作用&#xff1a; 1.共享信息资源 2.分解式处理信息 4.负载均衡 5.综合信息服务 它是计算机技术与通信技术的两个领域的结合 一&#xff0c;计算机网络中的基本概念&#xff1a; 局域网&#xff…

web端动效 PAG

之前写过一篇lottie动效的文章&#xff1a;web端动效 lottie-web 使用&#xff0c;本篇写一下PAG-web的基础使用。 PAG是腾讯开发&#xff0c;支持移动端、桌面端以及Web端的动效工作流解决方案。目标是降低或消除动效相关的研发成本&#xff0c;能够一键将设计师在 AE&#x…

PostgreSQL 流复制搭建与维护

文章目录 前言1. 配置环境1.1 环境介绍1.2 主库白名单1.3 主库参数配置 2. 流复制搭建2.1 备份恢复2.2 创建复制用户2.3 参数修改2.4 启动并检查2.5 同步流复制2.6 同步复制级别 3. 流复制监控3.1 角色判断3.2 主库查看流复制3.3 延迟监控3.4 备库查询复制信息 前言 PostgreSQ…

一个基本的BERT模型框架

构建一个完整的BERT模型并进行训练是一个复杂且耗时的任务。BERT模型由多个组件组成&#xff0c;包括嵌入层、Transformer编码器和分类器等。编写这些组件的完整代码超出了文本的范围。然而&#xff0c;一个基本的BERT模型框架以便了解其结构和主要组件的设置。 import torch …

shell循环和函数

目录 1.for循环2.while循环3.until循环4.函数 1.for循环 for循环是固定循环&#xff0c;也就是在循环时就已经知道需要进行几次的循环&#xff0c;有事也把for循环成为计数循环。for的语法如下两种&#xff1a; 语法一 for 变量 in 值1 值2 值3 …(可以是一个文件等)do程序do…

【深度学习】 Python 和 NumPy 系列教程(十四):Matplotlib详解:1、2d绘图(下):箱线图、热力图、面积图、等高线图、极坐标图

目录 一、前言 二、实验环境 三、Matplotlib详解 1、2d绘图类型 0. 设置中文字体 1-5. 折线图、散点图、柱状图、直方图、饼图 6. 箱线图&#xff08;Box Plot&#xff09; 7. 热力图&#xff08;Heatmap&#xff09; 8. 面积图&#xff08;Area Plot&#xff09; 9. 等…

RabbitMQ超详细安装教程(Linux)

RabbitMQ超详细安装教程&#xff08;Linux&#xff09; RabbitMq介绍

Go 工具链详解(五):竞态条件检测神器 Race Detector

并发编程可以提高程序的性能和稳定性&#xff0c;但也带来了一些挑战&#xff0c;如竞态条件。竞态条件是指并发程序中的多个线程同时访问共享资源&#xff0c;导致程序行为不确定的问题。为了避免竞态条件的产生&#xff0c;需要使用同步机制&#xff08;如互斥锁、条件变量等…