带你读《2022技术人的百宝黑皮书》——短视频无尽流前端开发指南(3) https://developer.aliyun.com/article/1243499?groupCode=taobaotech
// ... const VideoPlayer = forwardRef<IVideoPlayerRef, IVideoPlayerProps>((props, ref) => { // 播放器状态 默认为非激活状态 const [activeStatus, setActiveStatus] = useState<boolean>(false); // ... /** * 隐藏封面占位 */ const hidePoster = () => { posterRef.current?.hide(); }; /** * 激活播放器 */ const activate = () => { setActiveStatus(true); }; /** * 销毁播放器 */ const inActivate = () => { setActiveStatus(false); // 销毁播放器时展示封面占位 posterRef.current?.show(); }; useImperativeHandle(ref, () => ({ activate, inActivate, })); useEffect(() => { // 监听视频首帧加载完成时再去隐藏封面占位，防止屏幕闪动 videoPlayerRef.current?.addEventListener('loadeddata', hidePoster); // ... return () => { videoPlayerRef.current?.removeEventListener('loadeddata', hidePoster); }; }, []); // ... }); export default memo(VideoPlayer);
滑动轮播容器
对于滑动轮播容器，采用swiper实现。swiper是强大的轮播组件，有丰富的内置能力，封装了react组件可以方便地使用。
虚拟轮播
由于短视频无尽流有”无尽“的特性，用户单次可能会浏览几十篇内容，因此可以使用swiper的virtual能力减少内存占用，会随着手动轮播切换增删节点，仅保留视角内上下有限个swiper slide节点。如下图所示，当前需要用到500个slide，但是通过动态增删节点保证实际渲染出的节点数最多只有5个（个数可配置）。
带你读《2022技术人的百宝黑皮书》——短视频无尽流前端开发指南(5) https://developer.aliyun.com/article/1243497?groupCode=taobaotech
