uni-app video组件打包安卓app发生位置偏移

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app video组件打包安卓app发生位置偏移

开发环境 版本号 项目创建方式
Windows 企业版22H2 HBuilderX

产品分类:uniapp/App

PC开发环境操作系统:Windows

HBuilderX类型:正式

HBuilderX版本号:3.98

手机系统:Android

手机系统版本号:Android 13

手机厂商:华为

手机机型:EML-TL00

页面类型:vue

vue版本:vue2

打包方式:云端

App下载地址或H5网址: https://www.pgyer.com/manager/dashboard/app/0cb624883fd03a02d6f2727779adc4c0

示例代码:

<template>
<view class="container">
<view>
<tui-searchbar padding="6px" height="28px" backgroundColor="#950015" radius="40rpx" placeholder="搜索" disabled></tui-searchbar>
<tui-list-view>
<tui-list-cell>
<tui-text fontWeight="700" text="第二章 "></tui-text>
<tui-text fontWeight="700" text="自然人"></tui-text>
</tui-list-cell>
<block v-for="(item,index) in dataList" :key="index">
<tui-collapse :index="index" :current="current" :disabled="item.disabled" :arrow="!item.disabled" @click="change">
<template v-slot:title>
<tui-list-cell :hover="!item.disabled" padding="26rpx 70rpx 26rpx 30rpx">{{item.title}}</tui-list-cell>
</template>
<template v-slot:content>
<cover-view v-if="current==index" class="cover">
<video v-if="current==index &amp;&amp; index!=1" :autoplay="false" src="https://mp4.vjshi.com/2023-06-10/5a036b6dafca4d64bd9e6d125ecc622b.mp4"></video>
</cover-view>
</template>
</tui-collapse>
</block>
</tui-list-view>
</view>
</view>
</template>  
<script>
import {
mapActions,
mapState
} from 'vuex';
export default {
data() {
return {
platform: 'uni-app',  //来源
scrollTop: 0,   //吸顶高度
//手风琴效果
current: -1,
dataList: [{
title: "第一节 民事权利能力和民事行为能力",
intro: "杜甫的思想核心是儒家的仁政思想,他有“致君尧舜上,再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫,但后来声名远播,对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来,大多集于《杜工部集》。"
},{
title: "第十三条 自然人从出生时起到死亡时止,具有民事权利能力,依法享有民事权利,承担民事义务。",
intro: "杜甫的思想核心是儒家的仁政思想,他有“致君尧舜上,再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫,但后来声名远播,对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来,大多集于《杜工部集》。",
disabled:true
},
{
title: "第十四条 自然人的民事权利能力一律平等。",
intro: "李清照出生于书香门第,早期生活优裕,其父李格非藏书甚富,她小时候就在良好的家庭环境中打下文学基础。出嫁后与夫赵明诚共同致力于书画金石的搜集整理。金兵入据中原时,流寓南方,境遇孤苦。所作词,前期多写其悠闲生活,后期多悲叹身世,情调感伤。形式上善用白描手法,自辟途径,语言清丽。"
},
{
title: "第十五条 自然人的出生时间和死亡时间,以出生证明、死亡证明记载的时间为准;没有出生证明、死亡证明的,以户籍登记或者其他有效身份登记记载的时间为准。有其他证据足以推翻以上记载时间的,以该证据证明的时间为准。",
intro: "鲁迅一生在文学创作、文学批评、思想研究、文学史研究、翻译、美术理论引进、基础科学介绍和古籍校勘与研究等多个领域具有重大贡献。他对于五四运动以后的中国社会思想文化发展具有重大影响,蜚声世界文坛,尤其在韩国、日本思想文化领域有极其重要的地位和影响,被誉为“二十世纪东亚文化地图上占最大领土的作家”。"
},
{
title: "第十三条 自然人从出生时起到死亡时止,具有民事权利能力,依法享有民事权利,承担民事义务。",
intro: "杜甫的思想核心是儒家的仁政思想,他有“致君尧舜上,再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫,但后来声名远播,对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来,大多集于《杜工部集》。",
disabled:true
},
{
title: "第十四条 自然人的民事权利能力一律平等。",
intro: "李清照出生于书香门第,早期生活优裕,其父李格非藏书甚富,她小时候就在良好的家庭环境中打下文学基础。出嫁后与夫赵明诚共同致力于书画金石的搜集整理。金兵入据中原时,流寓南方,境遇孤苦。所作词,前期多写其悠闲生活,后期多悲叹身世,情调感伤。形式上善用白描手法,自辟途径,语言清丽。"
},
{
title: "第十五条 自然人的出生时间和死亡时间,以出生证明、死亡证明记载的时间为准;没有出生证明、死亡证明的,以户籍登记或者其他有效身份登记记载的时间为准。有其他证据足以推翻以上记载时间的,以该证据证明的时间为准。",
intro: "鲁迅一生在文学创作、文学批评、思想研究、文学史研究、翻译、美术理论引进、基础科学介绍和古籍校勘与研究等多个领域具有重大贡献。他对于五四运动以后的中国社会思想文化发展具有重大影响,蜚声世界文坛,尤其在韩国、日本思想文化领域有极其重要的地位和影响,被誉为“二十世纪东亚文化地图上占最大领土的作家”。"
},
{
title: "第十三条 自然人从出生时起到死亡时止,具有民事权利能力,依法享有民事权利,承担民事义务。",
intro: "杜甫的思想核心是儒家的仁政思想,他有“致君尧舜上,再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫,但后来声名远播,对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来,大多集于《杜工部集》。",
disabled:true
},
{
title: "第十四条 自然人的民事权利能力一律平等。",
intro: "李清照出生于书香门第,早期生活优裕,其父李格非藏书甚富,她小时候就在良好的家庭环境中打下文学基础。出嫁后与夫赵明诚共同致力于书画金石的搜集整理。金兵入据中原时,流寓南方,境遇孤苦。所作词,前期多写其悠闲生活,后期多悲叹身世,情调感伤。形式上善用白描手法,自辟途径,语言清丽。"
},
{
title: "第十五条 自然人的出生时间和死亡时间,以出生证明、死亡证明记载的时间为准;没有出生证明、死亡证明的,以户籍登记或者其他有效身份登记记载的时间为准。有其他证据足以推翻以上记载时间的,以该证据证明的时间为准。",
intro: "鲁迅一生在文学创作、文学批评、思想研究、文学史研究、翻译、美术理论引进、基础科学介绍和古籍校勘与研究等多个领域具有重大贡献。他对于五四运动以后的中国社会思想文化发展具有重大影响,蜚声世界文坛,尤其在韩国、日本思想文化领域有极其重要的地位和影响,被誉为“二十世纪东亚文化地图上占最大领土的作家”。"
}]
};
},
computed: {
...mapState(['networkConnected', 'isOnline'])
},
watch: {
networkConnected(isConnected) {
if (isConnected) {
this.menuHandle();
}
},
isOnline(val) {
if (val) {
this.menuHandle();
}
}
},
onLoad() {
// #ifdef MP
this.platform = '小程序';
// #endif
},
onPageScroll(e) {
this.scrollTop = e.scrollTop
},
methods: {
...mapActions(['getOnlineStatus']),
async menuHandle() {
let list = [...this.listOnline];
this.list = list.splice(0, 7);
let isOnline = await this.getOnlineStatus();
if (isOnline) {
this.list = this.listOnline;
}
},
imageError: function(e) {
console.error('image发生error事件,携带值为' + e.detail.errMsg)
},
$cellTap(){
console.log(123,this.currentTab)
this.currentTab = 0
},
change(e) {
//可关闭自身
this.current = this.current == e.index ? -1 : e.index
}
}
</script>  
/* 样式 */
.container {
width: 100vw;
/* height: 100vh; */
}
.cover{
width: 100vw;
height: 60vw;
position: relative;
}
video{
width: 100vw;
height: 60vw;
position: absolute;
bottom: 0;
left: 0;
}

1 回复

在使用 uni-app 开发应用时,video 组件在打包成安卓应用后可能会出现位置偏移的问题。这通常是由于不同平台的渲染机制和样式兼容性差异导致的。以下是一些可能的原因和解决方案:


1. 检查样式问题

  • 原因video 组件的样式可能在不同平台上表现不一致,导致位置偏移。
  • 解决方案
    • 确保 video 组件的样式使用了 rpx% 等相对单位,而不是固定的 px
    • 使用 flex 布局或 position 属性来定位 video 组件,避免使用绝对定位(position: absolute)或固定定位(position: fixed)。
    • 检查父容器的样式,确保没有溢出或布局问题。

2. 适配不同屏幕尺寸

  • 原因:安卓设备的屏幕尺寸和分辨率差异较大,可能导致 video 组件的位置偏移。
  • 解决方案
    • 使用 uni.getSystemInfoSync() 获取设备信息,动态调整 video 组件的尺寸和位置。
    • 使用 @media 查询或 uni.upx2px() 函数进行屏幕适配。

3. 检查 video 组件的属性

  • 原因video 组件的某些属性(如 object-fit)在不同平台上可能表现不一致。
  • 解决方案
    • 确保 object-fit 属性设置为 containcover,以适配不同尺寸的视频。
    • 检查 autoplaycontrols 等属性是否影响了布局。

4. 使用 cover-viewcover-image

  • 原因:在 video 组件上叠加其他元素时,可能会导致布局问题。
  • 解决方案
    • 使用 cover-viewcover-image 组件来覆盖 video 组件,而不是直接使用 viewimage

5. 调试和日志

  • 原因:可能是某些逻辑或样式在安卓平台上未正确生效。
  • 解决方案
    • 使用 console.loguni.showToast 调试布局逻辑。
    • 在安卓设备上使用 Chrome 的远程调试工具(chrome://inspect)检查布局和样式。

6. 更新 uni-app 和 HBuilderX

  • 原因:旧版本的 uni-app 或 HBuilderX 可能存在兼容性问题。
  • 解决方案
    • 确保使用的是最新版本的 uni-app 和 HBuilderX。
    • 更新后重新打包并测试。

7. 使用原生插件

  • 原因:如果 video 组件的功能无法满足需求,可能需要使用原生插件。
  • 解决方案
    • 使用 uni-app 的原生插件机制,调用安卓原生的 VideoView 或其他视频播放组件。

示例代码

<template>
  <view class="container">
    <video
      src="https://example.com/video.mp4"
      controls
      :style="{ width: videoWidth + 'px', height: videoHeight + 'px' }"
      object-fit="contain"
    ></video>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoWidth: 300,
      videoHeight: 200,
    };
  },
  mounted() {
    const systemInfo = uni.getSystemInfoSync();
    this.videoWidth = systemInfo.windowWidth;
    this.videoHeight = systemInfo.windowWidth * 0.5625; // 16:9 比例
  },
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!