微信公众号网页开发：播放视频，在列表中滑动会脱离文档流

解决video-react白屏与文档流问题

原创于 2021-04-18 00:17:02 发布 · 359 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs #javascript #视频处理 #小程序

react+antd 同时被 2 个专栏收录

34 篇文章

订阅专栏

bug记录

8 篇文章

订阅专栏

本文针对antd移动端及微信公众号中的video-react组件出现的首次白屏及列表滚动时脱离文档流的问题提供了解决方案。通过设置特定的属性与样式，确保了视频组件在不同环境下的正常显示。

项目场景：

antd移动端端开发
微信公众号移动端网页开发

问题描述：

video-react有问题，在跑马灯中第一次白屏，在列表中滑动会脱离文档流

原因分析：

未知

解决方案：

直接上代码

					<video
                        controls="controls"
                        autoPlay="autoplay"
                        x5-video-player-type="h5"
                        webkit-playsinline="true"
                        x5-video-orientation="landscape"
                        style={{ objectFit: 'fill', width, }}
                    >
                        <source src={currentGoods.UrlVideo || ''} type="video/mp4" />
                    </video>