Skip to main content

HLS 支持（HTTP 实时流媒体）

Remotion 目前不原生支持 HLS / HTTP Live 流媒体 / .m3u8 文件。

🌐 Remotion does not currently support HLS / HTTP Live streaming / .m3u8 files natively.

为了在所有浏览器和渲染期间实现完整的 HLS 支持，一旦 Mediabunny 添加了对它的支持，我们将通过 @remotion/media 支持 HLS。 虽然我们无法控制时间表，但我们已经共同同意应该将 HLS 列为路线图的优先事项。 在这里关注此问题的状态。

🌐 For full HLS support across all browsers and during rendering, we will support HLS through @remotion/media once Mediabunny has added support for it. While we don't control the timeline, we have mutually agreed that HLS should be put high on the roadmap. Follow the status of this issue here.

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

🌐 Using hls.js to play HLS videos during Preview

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

🌐 You can play HLS videos during preview in the <Player> and in the Remotion Studio.

请注意以下注意事项：

🌐 Note the following caveats:

此代码仅展示了如何将 video 标签连接到 HLS 流，它尚未在实际项目中测试。
2
 使用此代码将视频渲染为 MP4 时音频将无法播放。渲染期间请使用其他来源。
请参阅 在预览和渲染中使用不同标签 以及 useRemotionEnvironment() 了解如何根据是否正在渲染或预览使用不同组件。


HlsDemo.tsx
import Hls from 'hls.js';
import React, {useEffect, useRef} from 'react';
import {AbsoluteFill, RemotionVideoProps, Html5Video} 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 <Html5Video ref={videoRef} src={src} />;
};

export const HlsDemo: React.FC = () => {
  return (
    <AbsoluteFill>
      <HlsVideo src="https://stream.mux.com/nqGuji1CJuoPoU3iprRRhiy3HXiQN0201HLyliOg44HOU.m3u8" />
    </AbsoluteFill>
  );
};

Chrome v142+ 原生支持​

🌐 Native support in Chrome v142+

截至 Chrome v142（2025 年 10 月），Chrome 支持原生 HLS 播放。
这意味着 <OffthreadVideo /> 可以在预览（非渲染）期间在 Chrome 浏览器中原生播放 HLS / HTTP 实时流 / .m3u8 文件，无需任何额外设置。

🌐 As of Chrome v142 (October 2025), Chrome supports native HLS playback.
This means <OffthreadVideo /> can play HLS / HTTP Live streaming / .m3u8 files natively during preview (not rendering) without any additional setup in Chrome browsers.

另请参阅​

🌐 See also

Last updated on