uni-app video视频标签在苹果手机上点击全屏按钮有几率超过整个屏幕

uni-app video视频标签在苹果手机上点击全屏按钮有几率超过整个屏幕

信息类别 详情
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 win10
HBuilderX 正式
HBuilderX版本号 3.2.2
手机系统 全部
手机厂商 苹果
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

测试过的手机：

苹果X 系统14.7.1

示例代码：

视频用到了定位撑满了整个宽度

操作步骤：

苹果手机视频定位，宽度撑满，一直点击全屏按钮来回操作

预期结果：

正常全屏小屏播放

实际结果：

有几率出现视频超出整个屏幕

bug描述：

video视频播放标签在点击原生全屏按钮会有几率超出整个屏幕

相关文件下载：

aa612d66f56395cdfe794a07aaa975ae.zip


更多关于uni-app video视频标签在苹果手机上点击全屏按钮有几率超过整个屏幕的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

产品不会有明显的bug，所以你遇到的问题大都是在特定环境下才能重现的问题，你需要排查出来具体你哪个页面，甚至哪一行导致的。找出来具体原因后提供一个能复现你描述的bug的最小化demo（上传附件），让我们及时定位问题，及时修复。 【正确报bug的姿势】https://ask.dcloud.net.cn/article/38139

更多关于uni-app video视频标签在苹果手机上点击全屏按钮有几率超过整个屏幕的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的iOS原生video组件在全屏切换时的渲染问题，与uni-app框架本身无关。该问题通常由以下原因导致：

  1. iOS WebView渲染机制问题：iOS系统的WKWebView在处理video元素全屏切换时，偶尔会出现CSS样式计算错误，导致视频层溢出。

  2. CSS定位与全屏冲突：当video元素使用了position: fixed/absolute等定位，并且宽度设置为100%时，在全屏切换过程中可能触发渲染异常。

解决方案：

方法一：重置video样式（推荐） 在全屏切换事件中强制重置video元素的尺寸：

// 监听全屏变化
onFullscreenChange(e) {
    if (!e.detail.fullScreen) { // 退出全屏时
        setTimeout(() => {
            const video = uni.createVideoContext('myVideo')
            // 触发重新渲染
            this.$nextTick(() => {
                // 可尝试重新设置video容器的宽高
            })
        }, 50)
    }
}

方法二：修改CSS结构 避免video直接使用100%宽度，改为外层容器控制：

<view class="video-container">
    <video id="myVideo" class="video-player"></video>
</view>

<style>
.video-container {
    width: 100%;
    height: 400rpx;
    overflow: hidden;
}
.video-player {
    width: 100%;
    height: 100%;
}
</style>
回到顶部