"Component is not available" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)"

I am trying to do image processing on my videos frame by frame.

My code work well on this video:https://streamable.com/60334

But I get error on this video:https://streamable.com/ut8fq

Error:

[Exception... "Component is not available" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: file:///C:/Users/q/Desktop/web/opencv.js/6-Background%20substraction/opencv.js :: cv/Module.VideoCapture/this.read :: line 831391" data: no]

I do some research on google and i find this topic: NS_ERROR_NOT_AVAILABLE: Component is not available And implement on my code just like this:

function onVideoStarted() {    
    videoInput.onload=function()
    {
        streaming = true;
        startAndStop.innerText = 'Stop';
        videoInput.height = videoInput.width * (videoInput.videoHeight / videoInput.videoWidth);
        canvasContext.height=videoInput.height;
        canvasContext.width=videoInput.width;
        utils.executeCode('codeEditor');
    };
}

But video isn't loaded and image-processing doesn't fire.

My javascript code:

<script id="codeSnippet" type="text/code-snippet">
let video = document.getElementById('videoInput');
let cap = new cv.VideoCapture(video);

let frame = new cv.Mat(video.height, video.width, cv.CV_8UC4);
let fgmask = new cv.Mat(video.height, video.width, cv.CV_8UC1);
let fgbg = new cv.BackgroundSubtractorMOG2(500, 16,false );

const FPS = 30;
function processVideo() {
    try {
        if (!streaming) {
            // clean and stop.
            frame.delete(); fgmask.delete(); fgbg.delete();
            return;
        }
        let begin = Date.now();
        // start processing.
        cap.read(frame);
        fgbg.apply(frame, fgmask);    
        frame.copyTo(fgmask, fgmask);
        cv.imshow('canvasOutput', fgmask);
        // schedule the next one.
        let delay = 1000/FPS - (Date.now() - begin);
        setTimeout(processVideo, delay);
    } catch (err) {
        utils.printError(err);
    }
};

// schedule the first one.
setTimeout(processVideo, 0);
</script>

<script type="text/javascript">
let utils = new Utils('errorMessage');

utils.loadCode('codeSnippet', 'codeEditor');

let streaming = false;
let videoInput = document.getElementById('videoInput');
let startAndStop = document.getElementById('startAndStop');
let canvasOutput = document.getElementById('canvasOutput');
let canvasContext = canvasOutput.getContext('2d');

startAndStop.addEventListener('click', () => {
    if (!streaming) {
        utils.clearError();
        videoInput.play().then(() => {
            onVideoStarted();
        });
    } else {
        videoInput.pause();
        videoInput.currentTime = 0;
        onVideoStopped();
    }
});

function onVideoStarted() {

    videoInput.onload=function()
    {
        streaming = true;
        startAndStop.innerText = 'Stop';
        videoInput.height = videoInput.width * (videoInput.videoHeight / videoInput.videoWidth);
        canvasContext.height=videoInput.height;
        canvasContext.width=videoInput.width;
        utils.executeCode('codeEditor');
    };
}

function onVideoStopped() {
    streaming = false;
    canvasContext.clearRect(0, 0, videoInput.width, videoInput.height);
    startAndStop.innerText = 'Start';
}

utils.loadOpenCv(() => {
    videoInput.addEventListener('canplay', () => {
        startAndStop.removeAttribute('disabled');
    });
   videoInput.src = 'box.mp4';
});
</script>

My whole html: https://anotepad.com/notes/cnpgyt