在NextJS中使用Backblaze与next-video时出现‘Source not supported’错误

访问页面时，next-video组件抛出错误，但视频URL在Next.js原生<video>标签中可正常播放。已按指南配置next.config.mjs，且能成功上传视频至Backblaze，但无法通过next-video展示。

错误截图：

当前next.config.mjs配置：

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",
    }
  }
});

页面组件使用方式：

"use client";

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

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

export default VideoComponent;

以下是几个排查和修复方向：

1. 修正Backblaze Endpoint配置 #

你当前的endpoint是占位符"backblaze-endpoint"，需要替换为Backblaze存储桶的实际Endpoint。Backblaze的Endpoint格式为：

https://s3.<区域ID>.backblazeb2.com

或者使用带桶名的格式：

https://<你的桶名>.s3.<区域ID>.backblazeb2.com

比如你的存储桶在us-east-005区域，正确的Endpoint示例：

endpoint: "https://s3.us-east-005.backblazeb2.com"

2. 调整next-video的src传入方式 #

next-video并非直接接收完整远程URL，而是需要传入视频在存储桶内的相对路径，组件会通过你配置的Backblaze provider自动拼接完整访问地址。示例：

<Video src="/videos/your-video-file.mp4" />

3. 配置Backblaze存储桶的CORS规则 #

原生<video>能播放但next-video报错，大概率是CORS配置问题。登录Backblaze控制台，找到目标存储桶，添加以下CORS规则：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>https://你的网站域名</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
        <ExposeHeader>Content-Range</ExposeHeader>
        <ExposeHeader>Accept-Ranges</ExposeHeader>
    </CORSRule>
</CORSConfiguration>

允许你的域名发起GET请求，并暴露必要响应头，确保next-video能正确加载视频流。

4. 验证版本兼容性 #

确保next-video版本与当前Next.js版本兼容，比如Next.js 14需搭配next-video v1.0+版本。可执行命令升级至最新版：

npm install next-video@latest

5. 检查密钥与存储桶权限 #

确认配置的accessKeyId和secretAccessKey拥有存储桶的读取权限，同时存储桶内的视频文件需设置为公开可读（或通过密钥签名访问，next-video会自动处理签名逻辑）。

内容的提问来源于stack exchange，提问作者Xun Ruan