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

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

// ...const StatusButton = forwardRef<IStatusButtonRef>((_, ref) => {  const [status, setStatus] = useState<EStatus>(EStatus.PLAY);
  useImperativeHandle(ref, () => ({    setStatus,  }));
  return (    <div className={styles.statusButton}>      {(() => {        switch (status) {          case EStatus.PAUSE:            return <div>{/* 暂停Icon */}</div>;          case EStatus.WAITING:            return <div>{/* 缓冲Icon */}</div>;          default:            return null;        }      })()}    </div>);});
export default memo(StatusButton);

// ...const VideoPlayer: FC<IVideoPlayer> = (props) => {  const { source } = props;
  const videoPlayerRef = useRef<HTMLVideoElement | null>(null);  const statusButtonRef = useRef<IStatusButtonRef | null>(null);
  const onPlay = () => {    statusButtonRef.current?.setStatus(EPlayerStatus.PLAY);  };
  useEffect(() => {    videoPlayerRef.current?.addEventListener('play', onPlay);    // 暂停(pause)和缓冲(waiting)监听方法类似    // ...
    return () => {      videoPlayerRef.current?.removeEventListener('play', onPlay);    };  }, []);
  return (    <div className={styles.videoPlayerContainer}>      {/* 播放器 */}      <video        ref={videoPlayerRef}        className={styles.item}        src={source}        playsInline        autoPlay      />      {/* 播放器状态按钮 */}      <StatusButton ref={statusButtonRef} />    </div>  );};
export default memo(VideoPlayer);

// ...useEffect(() => {  const gesture = new DragGesture(    // 拖拽“点”    thumbRef.current,    (state) => {      if (state.first) {        setIsDragging(true);      }
      const x = state.xy[0];
      let walked: number;      // 判断是否超出边界      if (x < 0) {        walked = 0;      } else if (x > OVERALL_WIDTH) {        walked = OVERALL_WIDTH;      } else {        walked = x;      }
      setCurrentWalked(walked);
      if (state.last) {        // 用户停止拖拽后，跳帧至当前时间        const duration = Math.ceil((walked / OVERALL_WIDTH) * maxDuration);        onChangeCurrentTime(duration);        setIsDragging(false);      }    },    {      axis: 'x',      pointer: { touch: true },    },  );
  return () => {    gesture.destroy();  };}, []);
return (  <div ref={thumbRef} />);

// ...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);