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

devtools/2024/10/19 23:36:07/

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

<template><iframe :onload="onloadCode" style="width:100%;height:100%;border:1px solid #fff;background: #000;"></iframe>
</template>
<script>javascript">
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.ppmy.cn/devtools/125039.html

相关文章

第一章 JavaScript基础

第一章 JavaScript基础 文章目录 第一章 JavaScript基础1、什么是JavaScript1.1 JavaScript特点1.2 JavaScript组成1.3 JavaScript的基本结构1.4 JavaScript的执行原理1.5 网页中引用JavaScript的方式 2、JavaScript核心语法2.1 核心语法—变量2.2 核心语法—数据类型&type…

elementui中el-radio-group内容过长溢出问题

鼠标悬停显示文字 <template> <el-radio-group class"fixed-width-radio-group" v-model"continueruleForm.category" size"mini" fill"#2f54eb" color"#2f54eb" > <el-radio-button label"pr…

python断言和Debug

1、断言 assert&#xff1a;测试判断表示式必须为真的工具。 语法&#xff1a; assert 表达式如果表达式为真&#xff0c;断言后的语句可正常执行。一旦断言为假&#xff0c;程序会报错。 示例: int_value 10 assert int_value 11断言是Python的调试工具&#xff0c;用以…

GO 语言协程知识点学习笔记

GO 语言协程知识点学习笔记 是个人从互联网上学习整理的笔记。因个人技艺不精&#xff0c;如有纰漏&#xff0c;还请斧正。 协程&#xff1f; 协程并不是 GO 语言特有的机制&#xff0c;像 Lua、Ruby、Python、Kotlin、C/C 也都有协程的支持。区别在于有些是从语言层面支持&a…

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;上篇文章…

java.io.StreamCorruptedException: invalid stream header的原因及解决方法

最近在写一个类似于QQ的网络通讯项目&#xff0c;在信息发送的时候出现了一个问题&#xff0c;客户端的信息服务端可以正常收到并且转出&#xff0c;但是对应的客户端在接收的时候就会抛出这个异常&#xff0c;往往还会伴随着java.io.StreamCorruptedException: invalid type c…

如何彻底删除360软件或安装的应用软件

以彻底删除360安全软件为例&#xff08;或其他360相关软件&#xff09;&#xff0c;可以按照以下步骤进行操作&#xff1a; 方法一&#xff1a;通过控制面板卸载 打开控制面板&#xff1a; 在 Windows 操作系统中&#xff0c;右键点击开始菜单&#xff0c;选择“控制面板”。或…

vscode播放MP4文件时候没声音

问题描述&#xff1a; vscode 播放MP4文件时候没有声音 原因分析&#xff1a; https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_72.md#built-in-preview-for-some-audio-and-video-files 解决方案&#xff1a; 从上面描述可以看出&#xff0c;大概…