uni-app中IOS平台使用video标签做视频列表时，视频固定在屏幕上，页面可上下滑动滚动

uni-app中IOS平台使用video标签做视频列表时，视频固定在屏幕上，页面可上下滑动滚动

开发环境 版本号 项目创建方式
Mac macOS Monterey 12.1 Beta HBuilderX 
# 示例代码：
<view class="left" v-if="item.videoUrl"> </view> ````

操作步骤：

IOS中只要滑动视频的列表，视频会固定在页面中脱离文档流，感觉像是固定定位了

预期结果：

可以滑动视频列表，video视频正常显示滚动，和普通视频标签一下就行。

实际结果：

IOS中，视频列表滑动列表，视频脱离文档流的感觉，固定在页面屏幕上，页面可以上下拖动滑动

bug描述：

<view class="content" v-for="(item,index) in targetDetailBox" :key="index">  
    <view class="left" v-if="item.videoUrl">  
        <video :custom-cache="false" :src="item.videoUrl" controls class="RehabilitationVideo"  
            :id="'id'+item.id" @play="videoPlayHandle('id'+item.id)"   
            v-if="showVideo"></video>  
    </view>  
</view>

描述：页面是一个视频列表，视频用的video；但是在ios中，滚动页面，视频固定在页面中脱离文档流了。求解决方式

相关链接：


更多关于uni-app中IOS平台使用video标签做视频列表时，视频固定在屏幕上，页面可上下滑动滚动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

15 回复

我也遇到了 当时是写在了scroll-view标签里 把scroll-view去掉或者别写在scroll-view里面就好了

更多关于uni-app中IOS平台使用video标签做视频列表时，视频固定在屏幕上，页面可上下滑动滚动的实战教程也可以访问 https://www.itying.com/category-93-b0.html


正解

我发现在uview这个UI框架中 用u-list 去包裹 也会存在同样得问题 估计u-list中也是用了scroll

页面改用NVUE试试

与文档核对一下，看是否将视频嵌套到了不允许嵌套的组件之中。

没有啊，我专门单独写div都不行。我上面只写在view上了

页面比较复杂，用nvue有些样式不支持，什么时候video可以同级滑动，同层渲染

写一个简单的示例工程 发到附件 我看一下吧

解决了嘛

遇到同样问题 解决了么

我也遇到了 当时是写在了scroll-view标签里 把scroll-view去掉或者别写在scroll-view里面就好了

楼主解决了吗，我也遇到这个问题了。哭死

参考：https://ext.dcloud.net.cn/plugin?id=3549

回复 DCloud_uniCloud_JSON: 这个解决不了楼主的问题吧

这是一个iOS平台上video标签的常见问题，主要是由于iOS对视频播放的特殊处理机制导致的。以下是解决方案：

  1. 给video标签添加playsinline属性：
<video playsinline :src="item.videoUrl" controls></video>
  1. 或者使用x5内核（针对微信环境）：
<video x5-playsinline :src="item.videoUrl" controls></video>
  1. 如果问题仍然存在，可以尝试添加CSS样式：
.RehabilitationVideo {
    position: relative !important;
    z-index: 0 !important;
}
  1. 对于更复杂的情况，可能需要监听滚动事件并强制重新布局：
onPageScroll(e) {
    // 强制重绘video元素
    this.$forceUpdate();
}
回到顶部