c***@163.com
c***@163.com
  • 发布:2021-11-05 17:04
  • 更新:2022-06-29 18:14
  • 阅读:2223

uniapp中IOS中做视频列表使用video标签,滑动页面时候视频固定在手机屏幕上,页面可以上下滑动滚动。

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: macOS Monterey 12.1 Beta

HBuilderX类型: 正式

HBuilderX版本号: 3.2.12

手机系统: iOS

手机系统版本号: iOS 15

手机厂商: 苹果

手机机型: iphone11

页面类型: vue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
        <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>

操作步骤:

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中,滚动页面,视频固定在页面中脱离文档流了。求解决方式

2021-11-05 17:04 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

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

  • 1***@qq.com

    正解

    2024-03-14 15:30

  • 1***@qq.com

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

    2024-03-14 15:31

DCMarvel

DCMarvel

页面改用NVUE试试

DCloud_UNI_GSQ

DCloud_UNI_GSQ

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

  • c***@163.com (作者)

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

    2021-11-08 18:50

  • s***@startsmart.com.cn

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

    2023-07-07 12:19

天生DR

天生DR - 天生我材必有用

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

1***@qq.com

1***@qq.com

解决了嘛

j***@qq.com

j***@qq.com

遇到同样问题 解决了么

  • 1***@qq.com

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

    2022-06-29 18:15

2***@qq.com

2***@qq.com

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

要回复问题请先登录注册