从同步 QQ 空间说说到前端呈现，我都做了些啥

if (videoFilename.endsWith(".m3u8")) {
  const videoSliceFilenameMatches = String(responseData).matchAll(
    new RegExp(`^${videoFilename.split(".")[0]}.+$`, "gm"),
  );
  const videoBaseUrl = path.dirname(videoUrl);

  Array.from(videoSliceFilenameMatches).forEach((videoSliceFilenameMatch) => {
    const sliceFilename = videoSliceFilenameMatch[0];
    const sliceDownloadUrl = `${videoBaseUrl}/${sliceFilename}`;
    const sliceSavePath = path.resolve(
      videoSaveDir,
      sliceFilename.split("?")[0],
    );

    axios
      .get(sliceDownloadUrl, {
        responseType: "arraybuffer",
        maxContentLength: Infinity, // 避免文件过大异常跳出；在下载原始视频时也应当配置此项
        maxBodyLength: Infinity, // 同上
      })
      .then((getSliceResponse) => {
        fs.writeFileSync(sliceSavePath, getSliceResponse.data);
      });
  });
}

yarn add fluent-ffmpeg ffmpeg-static

import pathToFfmpeg from "ffmpeg-static";
import Ffmpeg from "fluent-ffmpeg";

Ffmpeg.setFfmpegPath(pathToFfmpeg);

const convertVideoToM3u8 = (videoFilePath: string, outputFilePath: string) => {
  Ffmpeg(videoFilePath)
    .outputFormat("hls")
    .outputOptions(["-hls_list_size 0", "-hls_allow_cache 1"])
    .output(outputFilePath)
    .run();
};

const createPromiseQueue = () => {
  const queue: (() => Promise<void>)[] = [];
  let isProcessing = false;

  const processQueue = async () => {
    if (isProcessing) return;
    isProcessing = true;

    while (queue.length > 0) {
      const task = queue.shift();
      try {
        await task?.(); // 执行任务
      } catch (error) {
        console.error("Queue task failed:", error);
      }
    }

    isProcessing = false; // 处理完成
  };

  return (promiseFunction: () => Promise<void>) => {
    queue.push(promiseFunction);
    processQueue();
  };
};

const addToConvertQueue = createPromiseQueue();

const convertVideoToM3u8 = (videoFilePath: string, outputFilePath: string) => {
  addToConvertQueue(
    () =>
      new Promise((resolve, reject) => {
        Ffmpeg(videoFilePath)
          .outputFormat("hls")
          .outputOptions(["-hls_list_size 0", "-hls_allow_cache 1"])
          .output(outputFilePath)
          .on("end", () => {
            resolve();
          })
          .on("error", (error) => {
            reject(error);
          })
          .run();
      }),
  );
};

import { useEffect, useRef } from "react";
import videojs from "video.js";
import Player from "video.js/dist/types/player";

export interface VideoPlayerProps {
  id: string;
  options: {
    sources: { src: string; type?: string }[];
    controls?: boolean;
    poster?: string;
    preload?: "auto" | "metadata" | "none";
    [key: string]: unknown;
  };
  className?: string;
  onReady?: (player: Player) => void;
}

/** https://videojs.com/guides/react/ */
export const VideoPlayer = (props: VideoPlayerProps) => {
  const { id, options, className = "", onReady } = props;

  const videoRef = useRef<HTMLDivElement>(null);
  const playerRef = useRef<Player>(null);

  useEffect(() => {
    if (!videoRef.current) return;

    if (!playerRef.current) {
      const videoElement = document.createElement("video-js");

      videoElement.classList.add("vjs-default-skin", "vjs-big-play-centered");
      videoElement.dataset.setup = '{"fluid": true}';
      videoRef.current.appendChild(videoElement);

      // @ts-expect-error: playerRef is writable
      const player = (playerRef.current = videojs(videoElement, options, () => {
        videojs.log(`Video player for ${id} is ready.`);
        onReady?.(player);
      }));
    }
  }, [id, onReady, options, videoRef]);

  // Dispose the Video.js player when the functional component unmounts
  useEffect(() => {
    const player = playerRef.current;

    return () => {
      if (player && !player.isDisposed()) {
        player.dispose();
        // @ts-expect-error: playerRef is writable
        playerRef.current = null;
        videojs.log(`Video player for ${id} is disposed.`);
      }
    };
  }, [id, playerRef]);

  // 离开视野后自动暂停播放
  useEffect(() => {
    const video = videoRef.current;
    const player = playerRef.current;

    if (video && player) {
      const pauseObserver = new IntersectionObserver(([entry]) => {
        if (!entry.isIntersecting) {
          player.pause();
        }
      });
      pauseObserver.observe(video);
      return () => {
        pauseObserver.unobserve(video);
      };
    }
  }, [videoRef, playerRef]);

  return <div data-vjs-player ref={videoRef} className={className} />;
};

export default VideoPlayer;

Route (app)                              Size     First Load JS
┌ ○ /                                    217 kB          338 kB
└ ○ /_not-found                          873 B          88.1 kB
+ First Load JS shared by all            87.3 kB
  ├ chunks/364-54e0b660da1a9f95.js       31.7 kB
  ├ chunks/618f8807-5ab9f851e4f8eeba.js  53.6 kB
  └ other shared chunks (total)          1.96 kB

import dynamic from "next/dynamic";
const VideoPlayer = dynamic(() => import("@/components/VideoPlayer"));

Route (app)                              Size     First Load JS
┌ ○ /                                    20.4 kB         142 kB
└ ○ /_not-found                          873 B          88.2 kB
+ First Load JS shared by all            87.4 kB
  ├ chunks/364-54e0b660da1a9f95.js       31.7 kB
  ├ chunks/618f8807-5ab9f851e4f8eeba.js  53.6 kB
  └ other shared chunks (total)          2.06 kB