本页面介绍了如何在 Next.js 应用程序中使用视频，展示了如何存储和显示视频文件而不会影响性能。

使用 <video> 和 <iframe>

视频可以使用 HTML <video> 标签嵌入页面以用于直接视频文件，使用 <iframe> 嵌入外部平台托管的视频。

<video>

HTML <video> 标签可以嵌入自托管或直接提供的视频内容，从而全面控制播放和外观。

export function Video() {
  return (
    <video width="320" height="240" controls preload="none">
      <source src="/path/to/video.mp4" type="video/mp4" />
      <track
        src="/path/to/captions.vtt"
        kind="subtitles"
        srcLang="en"
        label="English"
      />
      Your browser does not support the video tag.
    </video>
  )
}

常见的 <video> 标签属性

须知：使用 autoPlay 属性时，务必同时包含 muted 属性以确保视频在大多数浏览器中自动播放，以及 playsInline 属性以兼容 iOS 设备。

有关视频属性的完整列表，请参阅 MDN 文档。

视频最佳实践

• 备用内容： 使用 <video> 标签时，请在标签内包含备用内容，以用于不支持视频播放的浏览器。
• 字幕或说明文字： 为听力障碍用户提供字幕或说明文字。利用 <track> 标签与 <video> 元素一起指定字幕文件来源。
• 无障碍控件： 推荐使用标准的 HTML5 视频控件，以实现键盘导航和屏幕阅读器兼容性。对于高级需求，可以考虑使用第三方播放器，如 react-player 或 video.js，它们提供无障碍控件和一致的浏览器体验。

<iframe>

HTML <iframe> 标签允许你嵌入来自 YouTube 或 Vimeo 等外部平台的视频。

export default function Page() {
  return (
    <iframe src="https://www.youtube.com/embed/19g66ezsKAg" allowFullScreen />
  )
}

常见的 <iframe> 标签属性

有关 iframe 属性的完整列表，请参阅 MDN 文档。

选择视频嵌入方法

您可以通过两种方式将视频嵌入到 Next.js 应用程序中：

• 自托管或直接视频文件： 对于需要详细控制播放器功能和外观的场景，使用 <video> 标签嵌入自托管视频。这种在 Next.js 中的集成方法允许自定义和控制您的视频内容。
• 使用视频托管服务（YouTube、Vimeo 等）： 对于 YouTube 或 Vimeo 等视频托管服务，您将使用 <iframe> 标签嵌入其基于 iframe 的播放器。虽然这种方法限制了对播放器的某些控制，但它提供了易用性和这些平台提供的功能。

选择符合您应用程序需求和您希望提供的用户体验的嵌入方法。

嵌入外部托管视频

要嵌入来自外部平台的视频，您可以使用 Next.js 获取视频信息，并使用 React Suspense 处理加载时的回退状态。

1. 创建一个用于视频嵌入的服务器组件

第一步是创建一个 Server Component，用于生成嵌入视频所需的 iframe。此组件将获取视频的源 URL 并渲染 iframe。

export default async function VideoComponent() {
  const src = await getVideoSrc()

  return <iframe src={src} allowFullScreen />
}

2. 使用 React Suspense 流式传输视频组件

创建用于嵌入视频的服务器组件后，下一步是使用 React Suspense 流式传输该组件。

import { Suspense } from 'react'
import VideoComponent from '../ui/VideoComponent.jsx'

export default function Page() {
  return (
    <section>
      <Suspense fallback={<p>Loading video...</p>}>
        <VideoComponent />
      </Suspense>
      {/* Other content of the page */}
    </section>
  )
}

须知：从外部平台嵌入视频时，请考虑以下最佳实践：

• 确保视频嵌入具有响应性。使用 CSS 使 iframe 或视频播放器适应不同的屏幕尺寸。
• 根据网络条件实施 视频加载策略，特别是对于数据套餐有限的用户。

这种方法可以带来更好的用户体验，因为它能防止页面阻塞，这意味着用户可以在视频组件流式加载时与页面进行交互。

为了提供更具吸引力和信息量的加载体验，可以考虑使用加载骨架作为回退 UI。因此，您可以显示一个类似于视频播放器的骨架，而不是显示一个简单的加载消息，如下所示：

import { Suspense } from 'react'
import VideoComponent from '../ui/VideoComponent.jsx'
import VideoSkeleton from '../ui/VideoSkeleton.jsx'

export default function Page() {
  return (
    <section>
      <Suspense fallback={<VideoSkeleton />}>
        <VideoComponent />
      </Suspense>
      {/* Other content of the page */}
    </section>
  )
}

自托管视频

自托管视频可能因多种原因而更受青睐：

• 完全控制和独立性：自托管让您可以直接管理您的视频内容，从播放到外观，确保完全所有权和控制，不受外部平台限制。
• 针对特定需求的定制：非常适合独特的需求，例如动态背景视频，它允许进行量身定制的自定义，以符合设计和功能需求。
• 性能和可扩展性考虑：选择高性能且可扩展的存储解决方案，以有效支持不断增长的流量和内容大小。
• 成本和集成：平衡存储和带宽成本与轻松集成到 Next.js 框架和更广泛技术生态系统中的需求。

使用 Vercel Blob 进行视频托管

Vercel Blob 提供了一种高效的视频托管方式，它提供了一个可扩展的云存储解决方案，与 Next.js 配合良好。以下是您如何使用 Vercel Blob 托管视频的方法：

1. 将视频上传到 Vercel Blob

在您的 Vercel 控制台中，导航到“Storage”选项卡并选择您的 Vercel Blob 存储。在 Blob 表的右上角，找到并单击“Upload”按钮。然后，选择您希望上传的视频文件。上传完成后，视频文件将显示在 Blob 表中。

或者，您可以使用服务器动作上传视频。有关详细说明，请参阅 Vercel 文档中的 server-side uploads。Vercel 还支持 client-side uploads。对于某些用例，此方法可能更可取。

2. 在 Next.js 中显示视频

一旦视频上传并存储，您就可以在 Next.js 应用程序中显示它。以下是如何使用 <video> 标签和 React Suspense 实现此目的的示例：

import { Suspense } from 'react'
import { list } from '@vercel/blob'

export default function Page() {
  return (
    <Suspense fallback={<p>Loading video...</p>}>
      <VideoComponent fileName="my-video.mp4" />
    </Suspense>
  )
}

async function VideoComponent({ fileName }) {
  const { blobs } = await list({
    prefix: fileName,
    limit: 1,
  })
  const { url } = blobs[0]

  return (
    <video controls preload="none" aria-label="Video player">
      <source src={url} type="video/mp4" />
      Your browser does not support the video tag.
    </video>
  )
}

在这种方法中，页面使用视频的 @vercel/blob URL 来通过 VideoComponent 显示视频。React Suspense 用于显示回退内容，直到视频 URL 被获取并且视频准备好显示。

为视频添加字幕

如果您的视频有字幕，您可以使用 <video> 标签内的 <track> 元素轻松添加它们。您可以通过与视频文件类似的方式从 Vercel Blob 获取字幕文件。以下是如何更新 <VideoComponent> 以包含字幕的方法。

async function VideoComponent({ fileName }) {
  const { blobs } = await list({
    prefix: fileName,
    limit: 2,
  })
  const { url } = blobs[0]
  const { url: captionsUrl } = blobs[1]

  return (
    <video controls preload="none" aria-label="Video player">
      <source src={url} type="video/mp4" />
      <track src={captionsUrl} kind="subtitles" srcLang="en" label="English" />
      Your browser does not support the video tag.
    </video>
  )
}

通过遵循此方法，您可以有效地自托管视频并将其集成到您的 Next.js 应用程序中。

资源

要继续了解视频优化和最佳实践，请参阅以下资源：

• 了解视频格式和编解码器：根据您的视频需求选择正确的格式和编解码器，例如用于兼容性的 MP4 或用于网络优化的 WebM。有关更多详细信息，请参阅 Mozilla 的视频编解码器指南。
• 视频压缩：使用 FFmpeg 等工具有效地压缩视频，平衡质量与文件大小。在 FFmpeg 官方网站 了解压缩技术。
• 分辨率和比特率调整：根据观看平台调整 分辨率和比特率，对于移动设备使用较低的设置。
• 内容分发网络 (CDN)：利用 CDN 提高视频分发速度并管理高流量。当使用某些存储解决方案（例如 Vercel Blob）时，CDN 功能会自动为您处理。了解更多 关于 CDN 及其优势。

探索这些视频流媒体平台，将视频集成到您的 Next.js 项目中：

开源 next-video 组件

• 为 Next.js 提供 <Video> 组件，兼容各种托管服务，包括 Vercel Blob、S3、Backblaze 和 Mux。
• 详细文档 介绍了如何将 next-video.dev 与不同的托管服务一起使用。

Cloudinary 集成

• 官方 文档和集成指南，用于将 Cloudinary 与 Next.js 结合使用。
• 包含一个用于 即插即用视频支持 的 <CldVideoPlayer> 组件。
• 查找将 Cloudinary 与 Next.js 集成的 示例，包括 自适应比特率流媒体。
• 其他 Cloudinary 库（包括 Node.js SDK）也可用。

Mux Video API

• Mux 提供了一个 starter template，用于使用 Mux 和 Next.js 创建视频课程。
• 了解 Mux 关于为您的 Next.js 应用程序嵌入高性能视频 的建议。
• 探索一个展示 Mux 与 Next.js 的 示例项目。

Fastly

• 了解更多关于如何将 Fastly 的 视频点播 和流媒体解决方案集成到 Next.js 中的信息。

ImageKit.io 集成

• 查看将 ImageKit 与 Next.js 集成的 官方快速入门指南。
• 该集成提供了一个 <IKVideo> 组件，提供 无缝视频支持。
• 您还可以探索其他 ImageKit 库，例如 Node.js SDK，它也可用。