Upgrading from v4.0.111 to v4.0.176 (latest) throws error during video playback

[Pushpit07]

Bug Report 🐛

This is the error in console-

Remotion Error displaying video: {
    "_reactName": "onError",
    "_targetInst": null,
    "type": "error",
    "nativeEvent": {
        "isTrusted": true
    },
    "target": {},
    "currentTarget": null,
    "eventPhase": 2,
    "bubbles": false,
    "cancelable": true,
    "timeStamp": 27810.29999999702,
    "defaultPrevented": false,
    "isTrusted": true
}

We are using hls.js-

<HlsVideo
                        videoRef={videoRef}
                        src={src}
                        muted={false}
                        onError={(e) => console.log("Remotion Error displaying video:", e)}
                    />      

HlsVideo.js

import Hls from "hls.js";
import React, { useState, useEffect } from "react";
import { Video, AbsoluteFill } from "remotion";
import { testHlsUrl } from "@/utils/Helpers";
import { VIDEO_FPS } from "@/config/remotion-config";

export const HlsVideo = ({ videoRef, src, muted, style, onError, currentPortion }) => {
    const [processingVideo, setProcessingVideo] = useState(true);
    const [hlsState, setHlsState] = useState(null);

    useEffect(() => {
        const initializeVideo = async () => {
            try {
                if (src.includes(".m3u8")) {
                    if (!src) {
                        throw new Error("src is required");
                    }

                    const m3u8UrlExists = await testHlsUrl(src);
                    if (!m3u8UrlExists) {
                        setProcessingVideo(true);
                        return;
                    }

                    const startFrom = 0;
                    const hls = new Hls({
                        startLevel: -1,
                        maxBufferLength: 10,
                        maxMaxBufferLength: 30,
                        lowLatencyMode: true,
                        highBufferWatchdogPeriod: 0.1,
                        autoStartLoad: true,
                        startFragPrefetch: true,
                        backBufferLength: 20,
                    });
                    setHlsState(hls);

                    if (hls) {
                        hls.on(Hls.Events.MANIFEST_PARSED, () => {
                            hls.startLoad(startFrom);
                        });

                        hls.on(Hls.Events.ERROR, (event, data) => {
                            console.log("Error:", data);
                            if (data.fatal) {
                                switch (data.type) {
                                    case Hls.ErrorTypes.NETWORK_ERROR:
                                        // Handle network errors
                                        break;
                                    case Hls.ErrorTypes.MEDIA_ERROR:
                                        // Handle media errors
                                        break;
                                    default:
                                    // Handle other errors
                                }
                            }
                        });
                        hls.loadSource(src);
                        setProcessingVideo(false);
                    }

                    return () => {
                        if (hls) {
                            hls.destroy();
                        }
                    };
                } else {
                    setProcessingVideo(false);
                }
            } catch (error) {
                console.error("Error initializing video:", error);
            }
        };

        initializeVideo();
    }, [src]);

    useEffect(() => {
        if (!processingVideo && hlsState) {
            hlsState.attachMedia(videoRef.current);
        }
    }, [hlsState, processingVideo]);

    return processingVideo ? (
        <div className="w-full h-full flex flex-col justify-center items-center">
            <span className="processing-loader mr-2"></span>
            <p className="processing-text">Processing video...</p>
        </div>
    ) : (
        <Video
            ref={videoRef}
            src={src}   
            muted={muted}
            onError={onError}
            pauseWhenBuffering={true}
        />
    );
};

[Pushpit07]

Can someone please help me understand what the issue might be?

[JonnyBurger]

We are indeed not handling this well. In the next version this will not crash. But it seems like the video is failing to load without giving a reason. Maybe the DevTools console will tell more.