uni-app nvue 下iOS 多个video 显示不正常，h5 和安卓显示正常

uni-app nvue 下iOS 多个video 显示不正常，h5 和安卓显示正常

开发环境 版本号 项目创建方式
Mac 11.2 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Mac

HBuilderX类型：正式

HBuilderX版本号：3.1.2

手机系统：iOS

手机系统版本号：IOS 14

手机厂商：模拟器

手机机型：iphone 11

页面类型：nvue

打包方式：云端

示例代码：

<template> <view class="progress-works"> <view class="item-box"> <image :style="{height:imgWidth+'px',width:imgWidth+'px',}" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg" [@error](/user/error)="imageError"></image> </view> <view class="item-box"> 
<video id="myVideo1" :style="{height:imgWidth+'px',width:imgWidth+'px',}" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"  
                        [@error](/user/error)="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>  
<video id="myVideo2" :style="{height:imgWidth+'px',width:imgWidth+'px',}" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"  
                        [@error](/user/error)="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls>  
    <cover-image :style="{height:imgWidth+'px',width:imgWidth+'px'}"  src="/static/images/video-start-1.png"></cover-image>                   
</video>
</view> </view> </template> <script> export default{ data() { return { imgWidth:0, } }, onLoad(options) { let self_ = this //获取状态栏高度 加上导航的高度 uni.getSystemInfo({ success: function (res) { // 32 左右空隙 9 进度宽度 16 左边距离 16 三张图片中间空隙 self_.imgWidth = (res.windowWidth - 32 - 9 - 16 - 16)/3 } }); }, } </script> <style lang="scss" scoped> .progress-works{ /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex-direction: column; } .item-box{ /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex-direction: row; margin-top: 100rpx; } </style>

更多关于uni-app nvue 下iOS 多个video 显示不正常，h5 和安卓显示正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

请提供测试工程

更多关于uni-app nvue 下iOS 多个video 显示不正常，h5 和安卓显示正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的iOS平台下nvue页面中多个video组件同时显示的兼容性问题。根据你的代码和描述，建议尝试以下解决方案：

  1. 给每个video组件添加不同的id属性，确保唯一性

  2. 在iOS平台下，可以尝试使用object-fit样式属性来控制视频显示：

video {
    object-fit: fill;
}

  1. 对于nvue页面，建议使用绝对定位来布局多个video组件，避免flex布局可能带来的问题

  2. 检查HBuilderX版本，建议升级到最新稳定版(3.1.2之后的版本)

  3. 如果问题仍然存在，可以考虑使用条件编译针对iOS平台做特殊处理：

<!-- #ifdef APP-PLUS && IOS -->
<!-- iOS特殊处理 -->
<!-- #endif -->
回到顶部