小程序
小游戏
企业微信
微信支付
扫描小程序码分享
video 在滚动时，视频或者poster总是在顶层，无法设置其他标签在顶层，且使用scroll-view时，视频或者poster无法滚动。
可在IDE编辑器调试一切正常；
5 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
tip: video 组件是由客户端创建的原生组件，它的层级是最高的。
tip
video
tip: 请勿在 scroll-view 中使用 video 组件。
scroll-view
tip: css 动画对 video 组件无效。
css
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
这是小程序的bug，虽然说这次更新修补了这个问题，但是依然不好使，你可以换一种思路，先显示图片，然后触发video组件
个人不建设在一个页面加载很多视频组件，用户打开此页面会预下载所有视频，非常耗流量，建议改为仿视频的图片，点击图片再加载视频组件，视频组件设为自动播放，这样即为用户省流，也不会出现层级的问题。
.video_list {
width: 344rpx;
height: 300rpx;
background-color: #171D27;
text-align: center;
margin-left: 26rpx;
padding-top: 20rpx;
}
.video_list_right {
margin-right: 26rpx;
<
view
class
=
"video"
>
"view-line"
style
"margin-top: 20rpx;"
wx:for
"{{[1,1,1,1,1,1,1]}}"
"video_list"
poster
"http://jinby.com/yxhp/king/image/data/video.png"
"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></
"margin-top: 15rpx;"
>王者战队 VS 青铜战队</
</
"video_list video_list_right"
"http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
注意查看官方文档
Bug & Tip
tip:video组件是由客户端创建的原生组件，它的层级是最高的。tip: 请勿在scroll-view中使用video组件。tip:css动画对video组件无效。这是小程序的bug，虽然说这次更新修补了这个问题，但是依然不好使，你可以换一种思路，先显示图片，然后触发video组件
个人不建设在一个页面加载很多视频组件，用户打开此页面会预下载所有视频，非常耗流量，建议改为仿视频的图片，点击图片再加载视频组件，视频组件设为自动播放，这样即为用户省流，也不会出现层级的问题。
.video_list {width: 344rpx;height: 300rpx;background-color: #171D27;text-align: center;margin-left: 26rpx;padding-top: 20rpx;}.video_list_right {margin-right: 26rpx;}<viewclass="video"><viewclass="view-line"style="margin-top: 20rpx;"wx:for="{{[1,1,1,1,1,1,1]}}"><viewclass="video_list"><videoposter="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><viewstyle="margin-top: 15rpx;">王者战队 VS 青铜战队</view></view><viewclass="video_list video_list_right"><videostyle="width: 320rpx;height: 224rpx;"src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"controls></video><viewstyle="margin-top: 15rpx;">王者战队 VS 青铜战队</view></view></view></view>