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

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

作者:胡少鹏(棣棠)

出品:大淘宝技术


本文基于对家装家居内容短视频无尽流的开发实践,总结出了一套适应于该场景及衍生场景的前端开发指南,通过阅读本文可以快速了解短视频无尽流的前端开发。


前言


短视频无尽流是当下比较热门的一种业务场景,在日常生活中随处可见。本文基于对家装家居内容短视频无尽流的开发实践,总结出了一套适应于该场景及衍生场景的前端开发指南,通过阅读本文可以快速了解短视频无尽流的前端开发。


image.png


短视频无尽流介绍


短视频有着“短、平、快”的特点,用户可以通过短视频快速获得一些输入。在家装家居领域,可以通过几十秒到几分钟的短视频向用户输出装修干货经验、居家好物推荐等等。在短视频无尽流场景中,会基于引流内容以及相关算法推荐出更多内容,用户随着手势上滑可以持续浏览获得内容输入。


短视频无尽流结构拆解


短视频无尽流从结构上可以拆解为两层:滑动轮播容器、单张内容卡片。单张内容卡片又可以拆解为自定义控制栏的视频播放器(下文简称视频播放器)和内容相关信息两部分。


内容相关信息为业务呈现模块,不同的业务有各自的表达方式,本文不对该部分展开介绍。下面将基于react介绍滑动轮播容器和视频播放器的开发指南。


image.png


视频播放器


家装家居内容短视频无尽流使用的是淘宝App内置的同层渲染播放器(VideoX桥接),本文为了增强普适性,直接采用HTML5 video标签作为播放器来介绍。


播放器自身的控制栏样式比较单一,往往不能满足业务诉求,需要实现自定义的控制栏。本小节将介绍如何实现播放器状态按钮和播放器进度条,以及播放器的激活和销毁,为应用在滑动轮播容器做前置准备。



带你读《2022技术人的百宝黑皮书》——短视频无尽流前端开发指南(2) https://developer.aliyun.com/article/1243501?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
|
9天前
|
前端开发 JavaScript 安全
JavaScript前端开发技术
JavaScript(简称JS)是一种广泛使用的脚本语言,特别在前端开发领域,它几乎成为了网页开发的标配。从简单的表单验证到复杂的单页应用(SPA),JavaScript都扮演着不可或缺的角色。
16 3
|
11天前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
|
17天前
|
前端开发 JavaScript 开发者
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门
|
20天前
|
存储 缓存 监控