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

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.kler.cn/a/354848.html

相关文章:

  • LeetCode:3159. 查询数组中元素的出现位置(hash Java)
  • .NET周刊【12月第3期 2024-12-15】
  • 云原生架构中的中间件容器化:优劣势与实践探索
  • 使用 HTML5 Canvas 实现动态蜈蚣动画
  • 通过 Ansys Electronics Desktop 中的高级仿真优化 IC 设计
  • 嵌入式科普(25)Home Assistant米家集成意味着IOT的核心是智能设备
  • matlab怎样将数据按行拼接和按列拼接(水平拼接竖直拼接)
  • 太速科技-509-基于XCVU13P的4路QSFP28光纤PCIeX16收发卡
  • Redis主从复制机制详解
  • 20255 - 中医方剂学 - 考研 - 执业
  • 数据中台业务架构图
  • linux - ubuntu22.04 显卡驱动问题
  • 如何将照片从华为传输到电脑 |轻松掌握转移技巧
  • Ansible自动化运维管理工具
  • nginx解决非人类使用http打开的443,解决网安漏扫时误扫443端口带来的问题
  • C++智能指针及其应用
  • 【嵌入式设备】蓝牙鼠标遥控器
  • 什么叫做设备绑定模型和模型绑定知识库
  • 前端学习---(2)CSS基础
  • 网络安全入门
  • get请求(豆瓣电影第一页爬取)
  • Web 升级 Https
  • 【C语言】字符函数和字符串函数(中)
  • 远程控制手机时,怎样用电脑键盘给手机输入文本?
  • 自动化数控走心机
  • 分布式事务及seata解决方案