HLS 支持（HTTP Live Streaming）

没有原生支持

Remotion 目前不原生支持 HLS / HTTP Live streaming / .m3u8 文件。
这是一个技术上困难的功能，因为：

• 浏览器中没有原生支持。
• 当使用低级 API 提取帧时，FFmpeg 不会像处理其他视频格式那样处理它。

为了让 Remotion 支持 HLS 并充分利用在渲染时仅获取视频的相关部分，我们需要实现自定义解析器，这需要很长时间，因为规范很长。

使用 hls.js 在预览期间播放 HLS 视频

您可以在 <Player> 和 Remotion Studio 中在预览期间播放 HLS 视频。

请注意以下注意事项：

1

此代码仅显示如何将视频标签连接到 HLS 流，尚未在真实项目上进行测试。

2

使用此代码将视频渲染为 MP4 时，音频将无法工作。在渲染期间，请使用替代来源。请参阅 <OffthreadVideo> 在渲染时 和 getRemotionEnvironment() 了解如何根据您是在渲染还是预览时使用不同的组件。

HlsDemo.tsx
tsx
import Hls from "hls.js";
import React, { useEffect, useRef } from "react";
import { AbsoluteFill, RemotionVideoProps, Video } from "remotion";
 
const HlsVideo: React.FC<RemotionVideoProps> = ({ src }) => {
  const videoRef = useRef<HTMLVideoElement>(null);
 
  useEffect(() => {
    if (!src) {
      throw new Error("src is required");
    }
 
    const startFrom = 0;
 
    const hls = new Hls({
      startLevel: 4,
      maxBufferLength: 5,
      maxMaxBufferLength: 5,
    });
 
    hls.on(Hls.Events.MANIFEST_PARSED, () => {
      hls.startLoad(startFrom);
    });
 
    hls.loadSource(src);
    hls.attachMedia(videoRef.current!);
 
    return () => {
      hls.destroy();
    };
  }, [src]);
 
  return <Video ref={videoRef} src={src} />;
};
 
export const HlsDemo: React.FC = () => {
  return (
    <AbsoluteFill>
      <HlsVideo src="https://stream.mux.com/nqGuji1CJuoPoU3iprRRhiy3HXiQN0201HLyliOg44HOU.m3u8" />
    </AbsoluteFill>
  );
};

HlsDemo.tsx
tsx
import Hls from "hls.js";
import React, { useEffect, useRef } from "react";
import { AbsoluteFill, RemotionVideoProps, Video } from "remotion";
 
const HlsVideo: React.FC<RemotionVideoProps> = ({ src }) => {
  const videoRef = useRef<HTMLVideoElement>(null);
 
  useEffect(() => {
    if (!src) {
      throw new Error("src is required");
    }
 
    const startFrom = 0;
 
    const hls = new Hls({
      startLevel: 4,
      maxBufferLength: 5,
      maxMaxBufferLength: 5,
    });
 
    hls.on(Hls.Events.MANIFEST_PARSED, () => {
      hls.startLoad(startFrom);
    });
 
    hls.loadSource(src);
    hls.attachMedia(videoRef.current!);
 
    return () => {
      hls.destroy();
    };
  }, [src]);
 
  return <Video ref={videoRef} src={src} />;
};
 
export const HlsDemo: React.FC = () => {
  return (
    <AbsoluteFill>
      <HlsVideo src="https://stream.mux.com/nqGuji1CJuoPoU3iprRRhiy3HXiQN0201HLyliOg44HOU.m3u8" />
    </AbsoluteFill>
  );
};

另请参阅

• 此功能请求的 GitHub 问题