WXOPEN Club

video 在滚动时，视频或者poster总是在顶层

发布于 7 年前作者 qiangli15183 次浏览最后编辑 7 年前来自 ask

video 在滚动时，视频或者poster总是在顶层，无法设置其他标签在顶层，且使用scroll-view时，视频或者poster无法滚动。

可在IDE编辑器调试一切正常；

WXOPEN Club 内容图片 WXOPEN Club 内容图片
5 回复
jinming
jinming1 楼6 年前
注意查看官方文档
Bug & Tip

  1. tip: video 组件是由客户端创建的原生组件，它的层级是最高的。

  2. tip: 请勿在 scroll-view 中使用 video 组件。

  3. tip: css 动画对 video 组件无效。

ygao
ygao2 楼6 年前

个人不建设在一个页面加载很多视频组件，用户打开此页面会预下载所有视频，非常耗流量，建议改为仿视频的图片，点击图片再加载视频组件，视频组件设为自动播放，这样即为用户省流，也不会出现层级的问题。

rcheng
rcheng3 楼6 年前

这是小程序的bug，虽然说这次更新修补了这个问题，但是依然不好使，你可以换一种思路，先显示图片，然后触发video组件

mingfan
mingfan4 楼6 年前
.video_list {
    width: 344rpx;
    height: 300rpx;
    background-color: #171D27;
    text-align: center;
    margin-left: 26rpx;
    padding-top: 20rpx;
}
 
.video_list_right {
    margin-right: 26rpx;
}
qiaogang
qiaogang5 楼5 年前
<view class="video">
        <view class="view-line" style="margin-top: 20rpx;" wx:for="{{[1,1,1,1,1,1,1]}}">
            <view class="video_list">
                <video poster="http://jinby.com/yxhp/king/image/data/video.png" style="width: 320rpx;height: 224rpx;" src="http://ugcdl.video.gtimg.com/flv/161/116/z0541kcnuj5.p712.1.mp4?sdtfrom=v1000&type=mp4&vkey=A309DB723FC62CC831375B73A36C8B0EFD851F1ED7BFBFB22F3F6E7056A634E9D0756EE7C21DE2AFCB15D2A30A397550FE87FD4C4106B9B69CE68D06CA3E3596C68476716E81E66AD23D817ADF6BA7DF5EC81BABD32344CBCE03BE32D055A2B7EEFF83F00083BFF623672D64C58AE510&platform=11&br=59&fmt=hd&sp=0&charge=0&vip=0&guid=EED46C2F17F573EA582C8145BCC89C12" controls></video>
                <view style="margin-top: 15rpx;">王者战队 VS 青铜战队</view>
            </view>
            <view class="video_list video_list_right">
                <video style="width: 320rpx;height: 224rpx;" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" controls></video>
                <view style="margin-top: 15rpx;">王者战队 VS 青铜战队</view>
            </view>
        </view>
    </view>