视频优化

本页面概述了如何在 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 并且视频准备好显示。

为您的视频添加字幕

如果您的视频有字幕，您可以轻松地使用 <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 以进行 Web 优化。有关更多详细信息，请参阅 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 视频 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，它也是可用的。