"Source not supported" Error using Backblaze and next-video in NextJS

However, my Video component is throwing an error when I visit the page. The URL works in a tag in Next.js, but it does not work the same way in the next-video package. I have configured my next.config.mjs file following the guide provided [here](URL to the guide), and I can successfully upload videos to Backblaze. However, I can’t seem to display them using next-video.

I suspect I might be missing some configuration somewhere, but I’m not sure where. Any help would be greatly appreciated.

Here is the error showing on the browser page.

Here is my next.config.mjs file

import { withNextVideo } from "next-video/process";
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        hostname: "s3.us-east-005.backblazeb2.com",
      },
    ],
  },

};

export default withNextVideo(nextConfig, {
  provider: "backblaze",
  providerConfig: {
    backblaze: {
      endpoint: "backblaze-endpoint",
      bucket: "backblaze-bucket-name",
      accessKeyId: "backblaze-access-key-id",
      secretAccessKey: "backblaze-secret-access-key",
    }
  }
});

Here is how I use it, I import it to my page component

"use client";

import React from "react";
import Video from "next-video";

const VideoComponent = () => {
  return (
    <Video
      src={
        "my-video-url"
      }
    />
  );
};

export default VideoComponent;

Problem solved. It is the cors setting on backblaze. Change the bucket cors to allow all origins solves the problem.