带你读《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