uniapp打包成安卓video标签层级问题解决

如果uniapp打包成apk用于安卓的话 video标签不会跟随屏幕一起滑动,会固定在屏幕上并且层级过高会挡住其他元素所以需要一个iframe标签封装成组件

<template>
  <iframe :onload="onloadCode" style="width:100%;height:100%;border:1px solid #fff;background: #000;"></iframe>
</template>
<script>
export default {
  props: {
    src: '',
  },
  data() {
    return {
      onloadCode: ''
    }
  },
  methods:{
    play(index) {
      let videoContext = uni.createVideoContext('videoId', this)
      videoContext.requestFullScreen()
    },
    //退出全屏时暂停
    fullscreenchange(e) {
      if (!e.detail.fullScreen) {
        uni.createVideoContext('videoId', this).pause();
      }
    },
  },
  created() {
    console.log(this.src)
    this.onloadCode =
        `this.contentWindow.document.body.innerHTML = '<video style="width: 100%;height: 100%"  controls :direction="90"  @play="play"  @fullscreenchange="fullscreenchange"  id="videoId"  src="${this.src}"></video>';`
  },
}
</script>
<style lang="scss">
</style>

外部引用的时候直接传入src

<nVideo v-if="tapIndex===2"  :src="imgUrl" class="nVideo"></nVideo>

原文:添加链接描述

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

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

相关文章

系统架构设计师考试背记精要

1、架构的本质&#xff1a; &#xff08;1&#xff09;软件架构为软件系统提供了一个结构、行为和属性的高级抽象。&#xff08;2&#xff09;软件架构风格是特定应用领域的惯用模式&#xff0c;架构定义一个词汇表和一组约束。 2、数据流风格&#xff1a;适合于分阶段做数据处…

Springboot从入门到起飞-【day01】

个人主页→VON 收录专栏→Springboot从入门到起飞 一、前言 经过了近两个月的沉淀开始了新专栏的学习&#xff0c;经过深思熟虑还是决定重新学习java&#xff0c;因为基础部分东西太多太乱就不进行逐一的更新了&#xff0c;等到学完了一同进行更新。 二、Springboot简要概述 …

汽车免拆诊断案例 | 2013款宝马116i车偶尔加速不良

故障现象  一辆2013款宝马116i车&#xff0c;搭载N13B16A 发动机&#xff0c;累计行驶里程约为12.1万km。车主反映&#xff0c;该车行驶中偶尔加速无反应&#xff0c;且发动机故障灯异常点亮。 故障诊断 接车后试车&#xff0c;故障现象无法再现。用故障检测仪检测&#xff…

ChatGPT国内中文版镜像网站整理合集(2024/10/06)

一、GPT中文镜像站 ① yixiaai.com 支持GPT4、4o以及o1&#xff0c;支持MJ绘画 ② chat.lify.vip 支持通用全模型&#xff0c;支持文件读取、插件、绘画、AIPPT ③ AI Chat 支持GPT3.5/4&#xff0c;4o以及MJ绘画 1. 什么是镜像站 镜像站&#xff08;Mirror Site&#xff…

A股知识答题pk小程序怎么做?

A股知识答题pk小程序怎么做&#xff1f;以下是制作A股知识答题PK小程序的一般步骤&#xff1a; 一、 需求分析与规划&#xff1a; 明确目标&#xff1a;确定小程序的主要目标&#xff0c;比如是为了帮助用户学习A股知识、进行趣味竞赛&#xff0c;还是作为金融教育工具等。 …

2024年【金属非金属矿山(露天矿山)安全管理人员】考试题库及金属非金属矿山(露天矿山)安全管理人员实操考试视频

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年金属非金属矿山&#xff08;露天矿山&#xff09;安全管理人员考试题库为正在备考金属非金属矿山&#xff08;露天矿山&#xff09;安全管理人员操作证的学员准备的理论考试专题&#xff0c;每个月更新的金属非…

基于IDEA+SpringBoot+Vue+Uniapp的投票评选小程序系统的详细设计和实现

2. 详细视频演示 文章底部名片&#xff0c;联系我获取更详细的演示视频 3. 论文参考 4. 项目运行截图 代码运行效果图 代码运行效果图 代码运行效果图 代码运行效果图 代码运行效果图 5. 技术框架 5.1 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框…

Spring Cloud Stream 3.x+kafka 3.8整合

Spring Cloud Stream 3.xkafka 3.8整合&#xff0c;文末有完整项目链接 前言一、如何看官方文档(有深入了解需求的人)二、kafka的安装tar包安装docker安装 三、代码中集成创建一个测试topic&#xff1a;testproducer代码producer配置&#xff08;配置的格式&#xff0c;上篇文章…

【机器学习】逻辑回归|分类问题评估|混淆矩阵|ROC曲线|AUC指标 介绍及案例代码实现

文章目录 逻辑回归逻辑回归简介逻辑回归的数学基础逻辑回归原理概念损失函数 逻辑回归API函数和案例案例癌症分类预测 分类问题评估混淆矩阵分类评估方法 - 精确率 召回率 F1ROC曲线 AUC指标案例AUC 计算的API分类评估报告api 电信客户流失预测案例 逻辑回归 逻辑回归简介 ​…

matlab不小心删除怎么撤回

预设项——>删除文件——>移动至临时文件夹 tem临时文件夹下

SwiftUI 6.0(iOS 18)新增的网格渐变色 MeshGradient 解惑

概述 在 SwiftUI 中&#xff0c;我们可以借助渐变色&#xff08;Gradient&#xff09;来实现更加灵动多彩的着色效果。从 SwiftUI 6.0 开始&#xff0c;苹果增加了全新的网格渐变色让我们对其有了更自由的定制度。 因为 gif 格式图片自身的显示能力有限&#xff0c;所以上面的…

【自动驾驶汽车通讯协议】GMSL通信技术以及加串器(Serializer)解串器(Deserializer)介绍

文章目录 0. 前言1. GMSL技术概述2. 为什么需要SerDes&#xff1f;3. GMSL技术特点4.自动驾驶汽车中的应用5. 结论 0. 前言 按照国际惯例&#xff0c;首先声明&#xff1a;本文只是我自己学习的理解&#xff0c;虽然参考了他人的宝贵见解及成果&#xff0c;但是内容可能存在不准…

六西格玛黑带项目:TBX-02无人机飞行稳定性提升——张驰咨询

一、项目背景与问题定义 TBX-02是该公司最新发布的消费级无人机&#xff0c;面向摄影爱好者和户外探险者。产品上市后&#xff0c;通过客户反馈和实际测试数据发现&#xff0c;该无人机在复杂飞行环境中&#xff0c;如强风或快速移动时&#xff0c;存在明显的飞行抖动和稳定性…

RabbitMQ初识

目录 Kafka RocketMQ RabbitMQ MQ界面(它使用的端口号5672&#xff0c;界面是15672&#xff09; 如何添加一个虚拟机&#xff0c;点击右侧 Topics&#xff08;通配符模式&#xff09; 发布确认机制 持久性(可靠性保证的机制之一) JDK17,Linux服务器Ubuntu 什么是MQ 实…

前端开发笔记--html 黑马程序员2

文章目录 前端常用标签一、标题标签二、段落标签和换行标签和水平线标签三、文本格式化标签![请添加图片描述](https://i-blog.csdnimg.cn/direct/87583fa23fe04229b016912051f3fc45.png)四、盒子标签五、图像标签六、连接标签七、注释和特殊字符 八、表格标签的基本使用九、列…

48 Redis

48 Redis 前言 Redis&#xff08;Remote Dictionary Server )&#xff0c;即远程字典服务。是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库&#xff0c;并提供多种语言的API。 redis会周期性的把更新的数据写入磁盘或者把修改操…

数据结构-5.6.二叉树的先,中,后序遍历

一.遍历&#xff1a; 二.二叉树的遍历&#xff1a;利用了递归操作 1.简介&#xff1a; 二叉树的先序遍历&#xff0c;中序遍历&#xff0c;后序遍历都是以根结点遍历顺序为准的&#xff0c;如先序遍历就先遍历根结点 2.实例&#xff1a; 例一&#xff1a; 例二&#xff1a; …

HarmonyOS NEXT应用开发实战(二、封装比UniApp和小程序更简单好用的网络库)

网络访问接口&#xff0c;使用频次最高。之前习惯了uniapp下的网络接口风格&#xff0c;使用起来贼简单方便。转战到鸿蒙上后&#xff0c;原始网络接口写着真累啊&#xff01;目标让鸿蒙上网络接口使用&#xff0c;简单程度比肩uniapp&#xff0c;比Axios更轻量级。源码量也不多…

JUC并发编程进阶1:线程基础知识复习

1 从start一个线程说起 在 Java 中&#xff0c;Thread 类是用于创建和管理线程的核心类。通过调用 Thread 类的 start() 方法&#xff0c;可以启动一个新的线程&#xff0c;并执行线程的 run() 方法。下面我们来详细分析一下 start() 方法的实现。 1.1 代码示例 首先&#x…

前端开发笔记--html 黑马程序员1

文章目录 前端开发工具--VsCode前端开发基础语法VsCode优秀插件Chinese --中文插件Auto Rename Tag --自动重命名插件open in browserOpen in Default BrowserOpen in Other Browser Live Server -- 实时预览 前端开发工具–VsCode 轻量级与快速启动 快速加载&#xff1a;VSCo…