Skip to main content

HLS support (HTTP Live Streaming)

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

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.

Using hls.js to play HLS videos during Preview​

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

Note the following caveats:

This code only shows how to connect the video tag to the HLS stream, it has not been tested on a real project.
2
 Audio will not work when rendering a video to an MP4 using this code. Use an alternative source during rendering.
See Using a different tag in preview and rendering and useRemotionEnvironment() for how to use different components based on whether you are rendering or previewing.


HlsDemo.tsx
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>
  );
};

Native support in Chrome v142+​

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​