带你读《2022技术人的百宝黑皮书》——短视频无尽流前端开发指南(4)

简介: 带你读《2022技术人的百宝黑皮书》——短视频无尽流前端开发指南(4)

带你读《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个(个数可配置)。


image.png



带你读《2022技术人的百宝黑皮书》——短视频无尽流前端开发指南(5) https://developer.aliyun.com/article/1243497?groupCode=taobaotech

相关文章
|
17天前
|
前端开发 JavaScript 持续交付
前端技术趋势:2024年值得关注的几个方面
【10月更文挑战第9天】前端技术趋势:2024年值得关注的几个方面
|
3天前
|
Cloud Native 前端开发 JavaScript
前端开发者必看:不懂云原生你就OUT了!揭秘如何用云原生技术提升项目部署与全栈能力
【10月更文挑战第23天】随着云计算的发展,云原生逐渐成为技术热点。前端开发者了解云原生有助于提升部署与运维效率、实现微服务化、掌握全栈开发能力和利用丰富技术生态。本文通过示例代码介绍云原生在前端项目中的应用,帮助开发者更好地理解其重要性。
18 0
|
27天前
|
前端开发 JavaScript API
前端技术探索:从基础到未来趋势的深度剖析
前端技术探索:从基础到未来趋势的深度剖析
60 1
|
19天前
|
存储 前端开发 JavaScript
前端技术趋势:在动态变化中寻求稳定
【10月更文挑战第7天】前端技术趋势:在动态变化中寻求稳定
33 0
|
19天前
|
前端开发 数据可视化 JavaScript
现代前端开发:掌握关键技术与趋势
【10月更文挑战第7天】现代前端开发:掌握关键技术与趋势
39 0
|
1天前
|
运维 前端开发 JavaScript
前端技术深度探索:从基础到现代的演进
【10月更文挑战第23天】前端技术深度探索:从基础到现代的演进
12 1
|
10天前
|
前端开发 JavaScript 安全
JavaScript前端开发技术
JavaScript(简称JS)是一种广泛使用的脚本语言,特别在前端开发领域,它几乎成为了网页开发的标配。从简单的表单验证到复杂的单页应用(SPA),JavaScript都扮演着不可或缺的角色。
16 3
|
11天前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
|
17天前
|
前端开发 JavaScript 开发者
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门
|
20天前
|
存储 缓存 监控