作者：胡少鹏（棣棠）
出品：大淘宝技术
本文基于对家装家居内容短视频无尽流的开发实践，总结出了一套适应于该场景及衍生场景的前端开发指南，通过阅读本文可以快速了解短视频无尽流的前端开发。
前言
短视频无尽流是当下比较热门的一种业务场景，在日常生活中随处可见。本文基于对家装家居内容短视频无尽流的开发实践，总结出了一套适应于该场景及衍生场景的前端开发指南，通过阅读本文可以快速了解短视频无尽流的前端开发。
短视频无尽流介绍
短视频有着“短、平、快”的特点，用户可以通过短视频快速获得一些输入。在家装家居领域，可以通过几十秒到几分钟的短视频向用户输出装修干货经验、居家好物推荐等等。在短视频无尽流场景中，会基于引流内容以及相关算法推荐出更多内容，用户随着手势上滑可以持续浏览获得内容输入。
短视频无尽流结构拆解
短视频无尽流从结构上可以拆解为两层：滑动轮播容器、单张内容卡片。单张内容卡片又可以拆解为自定义控制栏的视频播放器（下文简称视频播放器）和内容相关信息两部分。
内容相关信息为业务呈现模块，不同的业务有各自的表达方式，本文不对该部分展开介绍。下面将基于react介绍滑动轮播容器和视频播放器的开发指南。
视频播放器
家装家居内容短视频无尽流使用的是淘宝App内置的同层渲染播放器（VideoX桥接），本文为了增强普适性，直接采用HTML5 video标签作为播放器来介绍。
播放器自身的控制栏样式比较单一，往往不能满足业务诉求，需要实现自定义的控制栏。本小节将介绍如何实现播放器状态按钮和播放器进度条，以及播放器的激活和销毁，为应用在滑动轮播容器做前置准备。
带你读《2022技术人的百宝黑皮书》——短视频无尽流前端开发指南(2) https://developer.aliyun.com/article/1243501?groupCode=taobaotech
