Skip to main content

HLS support (HTTP Live Streaming)

No native support​

Remotion does not currently support HLS / HTTP Live streaming / .m3u8 files natively.
It is a technically difficult feature to add because:

  • There is no native support for it in the browser.
  • HLS is a special case, where video is split up into different files, and one file may contain many video or audio streams.

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 <OffthreadVideo> while 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>
  );
};

See also​