• 短视频无尽流前端开发指南

    62fc1ca39faaa893e03faea2774087be.gif

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

    前言

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

    3b6b8510b20479f467f326326878d74c.gif

    短视频无尽流介绍

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

    短视频无尽流结构拆解

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

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

    66676df2d7ac391f930366f1949e38cb.png

    ▐  视频播放器

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

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

    • 视频播放器状态按钮

    常规来讲播放器需要展示出两种状态：暂停中、缓冲中，播放中有进度条在推进一般不需要做额外展示。状态按钮组件实现如下：

    tips：将按钮状态内置在组件中，暴露修改状态的方法给父元素，可以避免在改变按钮状态时触发父元素的re-render。

    1. // ...
    2. const StatusButton = forwardRef((_, ref) => {
    3.   const [status, setStatus] = useState(EStatus.PLAY);
    4.  
    5.  
    6.   useImperativeHandle(ref, () => ({
    7.     setStatus,
    8.   }));
    9.  
    10.  
    11.   return (
    12.     <div className={styles.statusButton}>
    13.       {(() => {
    14.         switch (status) {
    15.           case EStatus.PAUSE:
    16.             return <div>{/* 暂停Icon */}div>;
    17.           case EStatus.WAITING:
    18.             return <div>{/* 缓冲Icon */}div>;
    19.           default:
    20.             return null;
    21.         }
    22.       })()}
    23.     div>
    24. );
    25. });
    26.  
    27.  
    28. export default memo(StatusButton);
    1. // ...
    2. const VideoPlayer: FC = (props) => {
    3.   const { source } = props;
    4.  
    5.  
    6.   const videoPlayerRef = useRef<HTMLVideoElement | null>(null);
    7.   const statusButtonRef = useRefnull>(null);
    8.  
    9.  
    10.   const onPlay = () => {
    11.     statusButtonRef.current?.setStatus(EPlayerStatus.PLAY);
    12.   };
    13.  
    14.  
    15.   useEffect(() => {
    16.     videoPlayerRef.current?.addEventListener('play', onPlay);
    17.     // 暂停(pause)和缓冲(waiting)监听方法类似
    18.     // ...
    19.  
    20.  
    21.     return () => {
    22.       videoPlayerRef.current?.removeEventListener('play', onPlay);
    23.     };
    24.   }, []);
    25.  
    26.  
    27.   return (
    28.     <div className={styles.videoPlayerContainer}>
    29.       {/* 播放器 */}
    30.       <video
    31.         ref={videoPlayerRef}
    32.         className={styles.item}
    33.         src={source}
    34.         playsInline
    35.         autoPlay
    36.       />
    37.       {/* 播放器状态按钮 */}
    38.       <StatusButton ref={statusButtonRef} />
    39.     div>
    40.   );
    41. };
    42.  
    43.  
    44. export default memo(VideoPlayer);

    • 视频播放器进度条

    388d80299a2c49588fc4c8a6ce9e5f20.gif

    有两种情况会引起进度条“走动”：

    1. 视频正常播放，进度更新。

    2. 用户手动拖拽进度条。

    对于1，进度条组件对父元素暴露更新进度的方法，父元素监听到播放器 timeupdate 时去调用该方法即可。

    对于2，可以使用 @use-gesture/vanilla 实现跟手的拖拽效果，用户停止拖拽时去做播放器的跳帧操作：

    1. // ...
    2. useEffect(() => {
    3.   const gesture = new DragGesture(
    4.     // 拖拽“点”
    5.     thumbRef.current,
    6.     (state) => {
    7.       if (state.first) {
    8.         setIsDragging(true);
    9.       }
    10.  
    11.  
    12.       const x = state.xy[0];
    13.  
    14.  
    15.       let walked: number;
    16.       // 判断是否超出边界
    17.       if (x < 0) {
    18.         walked = 0;
    19.       } else if (x > OVERALL_WIDTH) {
    20.         walked = OVERALL_WIDTH;
    21.       } else {
    22.         walked = x;
    23.       }
    24.  
    25.  
    26.       setCurrentWalked(walked);
    27.  
    28.  
    29.       if (state.last) {
    30.         // 用户停止拖拽后，跳帧至当前时间
    31.         const duration = Math.ceil((walked / OVERALL_WIDTH) * maxDuration);
    32.         onChangeCurrentTime(duration);
    33.         setIsDragging(false);
    34.       }
    35.     },
    36.     {
    37.       axis: 'x',
    38.       pointer: { touch: true },
    39.     },
    40.   );
    41.  
    42.  
    43.   return () => {
    44.     gesture.destroy();
    45.   };
    46. }, []);
    47.  
    48.  
    49. return (
    50.   <div ref={thumbRef} />
    51. );

    • 视频播放器激活及销毁

    虽然该场景下存在n个内容卡片，但是我们只需要屏幕当中的那一个内容卡片渲染视频播放器，其余内容卡片仅保留封面图占位即可，减少内存占用。

    e4506cc0b78b31d2f0d7f5cdbdc89691.png

    1. // ...
    2. const VideoPlayer = forwardRef((props, ref) => {
    3.   // 播放器状态 默认为非激活状态
    4.   const [activeStatus, setActiveStatus] = useState<boolean>(false);
    5.   // ...
    6.   
    7.   /**
    8.    * 隐藏封面占位
    9.    */
    10.   const hidePoster = () => {
    11.     posterRef.current?.hide();
    12.   };
    13.  
    14.  
    15.   /**
    16.    * 激活播放器
    17.    */
    18.   const activate = () => {
    19.     setActiveStatus(true);
    20.   };
    21.   /**
    22.    * 销毁播放器
    23.    */
    24.   const inActivate = () => {
    25.     setActiveStatus(false);
    26.     // 销毁播放器时展示封面占位
    27.     posterRef.current?.show();
    28.   };
    29.  
    30.  
    31.   useImperativeHandle(ref, () => ({
    32.     activate,
    33.     inActivate,
    34.   }));
    35.  
    36.  
    37.   useEffect(() => {
    38.     // 监听视频首帧加载完成时再去隐藏封面占位，防止屏幕闪动
    39.     videoPlayerRef.current?.addEventListener('loadeddata', hidePoster);
    40.     // ...
    41.  
    42.  
    43.     return () => {
    44.       videoPlayerRef.current?.removeEventListener('loadeddata', hidePoster);
    45.     };
    46.   }, []);
    47.   
    48.   // ...
    49. });
    50.  
    51.  
    52. export default memo(VideoPlayer);

    ▐  滑动轮播容器

    对于滑动轮播容器，采用swiper实现。swiper是强大的轮播组件，有丰富的内置能力，封装了react组件可以方便地使用。

    • 虚拟轮播

    由于短视频无尽流有”无尽“的特性，用户单次可能会浏览几十篇内容，因此可以使用swiper的virtual能力减少内存占用，会随着手动轮播切换增删节点，仅保留视角内上下有限个swiper slide节点。如下图所示，当前需要用到500个slide，但是通过动态增删节点保证实际渲染出的节点数最多只有5个（个数可配置）。

    4205e62211650fd98d2602796609e314.png

    swiper入参配置可参考：

    1. // swiper 6.x版本 和 8.x版本 使用上会有一定区别，注释中会将不同点标注出来
    2. import * as React from 'react';
    3.  
    4.  
    5. // [swiper 8.x] 引入 swiper
    6. import { Virtual } from 'swiper';
    7.  
    8.  
    9. // [swiper 6.x] 引入 swiper
    10. // import SwiperCore, { Virtual } from 'swiper';
    11.  
    12.  
    13. import { Swiper, SwiperSlide } from 'swiper/react';
    14.  
    15.  
    16. import type { FC } from 'react';
    17. import type { IVideoCardItem } from '../../types';
    18.  
    19.  
    20. import styles from './index.module.less';
    21.  
    22.  
    23. // [swiper 6.x] 加载 Virtual 模块
    24. // SwiperCore.use([Virtual]);
    25.  
    26.  
    27. const VideoSwiper: FC = () => {
    28.   return (
    29.     <Swiper
    30.       className={styles.videoSwiperContainer}
    31.       // 切换方向
    32.       direction="vertical"
    33.       // 初始索引
    34.       initialSlide={0}
    35.       // 切换角度，防止误切
    36.       touchAngle={30}
    37.       // [swiper 8.x] 加载 Virtual 模块
    38.       modules={[Virtual]}
    39.       // virtual配置，如下配置会保证至多有5 slide
    40.       virtual={{
    41.         // 在active的slide前多渲染1个slide
    42.         addSlidesBefore: 1,
    43.         // 在active的slide后多预渲染1个slide
    44.         addSlidesAfter: 1,
    45.       }}
    46.     >
    47.       {/* ... */}
    48.     Swiper>
    49.   );
    50. };

    tips：移动端swiper切换时可能存在闪屏/抖动的异常情况，可以使用如下代码开启硬件加速，可以解决大部分异常情况。

    1. .videoSwiperContainer :global {
    2.   .swiper-wrapper {
    3.     transform: translate3d(0, 0, 0);
    4.     
    5.     .swiper-slide {
    6.       transform: translate3d(0, 0, 0);
    7.     }
    8.   }
    9. }

    • 视频播放器实例管理

    上述中提到只需要屏幕当中的那一个内容卡片渲染播放器，其余展示封面图占位即可。在轮播容器完成一次切换即 onTransitionEnd  时销毁上一个内容卡片的播放器，同时激活当前内容卡片的播放器，保证始终只有一个播放器处于激活状态。

    tips：当前内容卡片的播放器激活后，由于还需要加载视频资源，因此切换后会有短暂的等待时间。为了提升用户体验，可以配合视频资源的预加载，优先使用端侧提供的预加载能力，若没有该支持，可以尝试使用blob等预加载方案。

    d57034ede975828c166630065345cc69.gif

    底部悬浮loading条

    61d364720e707045002c618963273299.gif

    无尽流场景不可避免的是加载loading，对于全屏幕的轮播容器，loading的出现/消失尽量避免产生布局偏移，如果loading过程中用户想去做一些点击操作，但刚好操作的瞬间loading结束了，若此时发生了布局偏移，会造成用户点到非预期的行动点，有损用户体验。可以采用类似此轻量级的悬浮式loading：

    1. .loadingBar {
    2.   &Container {
    3.     position: fixed;
    4.     left: 0;
    5.     bottom: 0;
    6.     z-index: 99;
    7.     display: flex;
    8.     align-items: center;
    9.     justify-content: flex-end;
    10.     width: 100vw;
    11.     height: 5rpx;
    12.   }
    13.  
    14.  
    15.   &Item {
    16.     height: 5rpx;
    17.     background-color: #fd0;
    18.     animation: loading 0.6s linear infinite;
    19.   }
    20. }
    21.  
    22.  
    23. @keyframes loading {
    24.   0% {
    25.     width: 0;
    26.     opacity: 0;
    27.   }
    28.   30% {
    29.     width: 30vw;
    30.     opacity: 1;
    31.   }
    32.   70% {
    33.     width: 70vw;
    34.     opacity: 1;
    35.   }
    36.   100% {
    37.     width: 100vw;
    38.     opacity: 0;
    39.   }
    40. }

    总结

    本文通过对短视频无尽流结构的拆解，从各个功能点的角度介绍了如何实现并落地该场景。除了短视频无尽流外，还适用于其衍生场景，如图文卡片无尽流、直播无尽流、3D场景无尽流等等。针对于不同场景，不变的是轮播容器的构建，在此基础上根据不同场景构建单个场景卡片的逻辑即可。

    团队介绍

    我们是大淘宝-家装家居技术-前端团队，团队支撑大淘宝家居家装业务。旗下包括：每平每屋App、淘宝【极有家】频道。我们连通电商平台和商家店铺，覆盖居家生活、装修设计、线下市场，3D场景化展现居家生活，我们力求让每件单品都不再孤立呈现，置身其中，感受家的优选方案。期待与您一起共筑美好的理想家。

    ✿  拓展阅读

    f757eddfa351b57ded5d38662b90970c.jpeg

    f65306af47448e59da6949270bf57719.jpeg

    作者|胡少鹏（棣棠）

    编辑|橙子君

    b0e67bd186e391547bd128709f874448.png

  • 相关阅读:
    5G 3GPP全球频谱介绍
    Win11怎么安装语音包？Win11语音包安装教程
    【雷神笔记本快捷键】雷神笔记本FN功能快捷键大全以及电脑CPU处于低功耗但电脑风扇高速转动噪音较大解决方案
    select多选回显问题 （取巧~）
    CORS（跨域资源共享）
    Calcite parser config介绍
    【Java从入门到精通 07】：面向对象编程（基础部分）
    音视频编码
    怎么成为稚晖君？
    基于Istio的高级流量管理三
  • 原文地址：https://blog.csdn.net/Taobaojishu/article/details/126188038