如何使用和优化视频

本页面介绍了如何在 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. 创建一个用于视频嵌入的服务器组件

第一步是创建一个 服务器组件，它将生成适当的 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 控制台中，导航到“存储”选项卡并选择您的 Vercel Blob 存储。在 Blob 表的右上角，找到并点击“上传”按钮。然后，选择您希望上传的视频文件。上传完成后，视频文件将出现在 Blob 表中。

或者，您可以使用服务器操作上传您的视频。有关详细说明，请参阅 Vercel 文档中关于 服务器端上传 的内容。Vercel 还支持 客户端上传。这种方法可能适用于某些用例。

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 被获取并且视频准备好显示。

为视频添加字幕

如果您有视频字幕，可以使用 <track> 元素轻松地将其添加到 <video> 标签中。您可以以与视频文件类似的方式从 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 提供了一个 入门模板，用于使用 Mux 和 Next.js 创建视频课程。
• 了解 Mux 关于为您的 Next.js 应用程序嵌入 高性能视频 的建议。
• 探索一个 示例项目，演示 Mux 与 Next.js 的结合。

Fastly

• 了解更多关于将 Fastly 的解决方案集成到 Next.js 中，以实现 视频点播 和流媒体。

ImageKit.io 集成

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