如何使用和优化视频

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

使用 `<video>` 和 `<iframe>`

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

`<video>`

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

app/ui/video.jsx
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"
      />
      你的浏览器不支持视频标签。
    </video>
  )
}

常见的 `<video>` 标签属性

属性	描述	示例值
`src`	指定视频文件的源。	`<video src="/path/to/video.mp4" />`
`width`	设置视频播放器的宽度。	`<video width="320" />`
`height`	设置视频播放器的高度。	`<video height="240" />`
`controls`	如果存在，显示默认的播放控制集。	`<video controls />`
`autoPlay`	页面加载时自动开始播放视频。注意：自动播放策略因浏览器而异。	`<video autoPlay />`
`loop`	循环播放视频。	`<video loop />`
`muted`	默认静音音频。通常与 `autoPlay` 一起使用。	`<video muted />`
`preload`	指定如何预加载视频。值：`none`、`metadata`、`auto`。	`<video preload="none" />`
`playsInline`	在 iOS 设备上启用内联播放，通常对于在 iOS Safari 上自动播放是必需的。	`<video playsInline />`

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

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

视频最佳实践

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

`<iframe>`

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

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

常见的 `<iframe>` 标签属性

属性	描述	示例值
`src`	要嵌入的页面的 URL。	`<iframe src="https://example.com" />`
`width`	设置 iframe 的宽度。	`<iframe width="500" />`
`height`	设置 iframe 的高度。	`<iframe height="300" />`
`allowFullScreen`	允许 iframe 内容以全屏模式显示。	`<iframe allowFullScreen />`
`sandbox`	对 iframe 内的内容启用额外的限制集。	`<iframe sandbox />`
`loading`	优化加载行为（例如，懒加载）。	`<iframe loading="lazy" />`
`title`	为 iframe 提供标题以支持无障碍。	`<iframe title="Description" />`

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

选择视频嵌入方法

在 Next.js 应用程序中嵌入视频有两种方式：

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

选择与应用程序要求和你旨在提供的用户体验一致的嵌入方法。

嵌入外部托管的视频

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

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

第一步是创建一个服务器组件，为嵌入视频生成适当的 iframe。此组件将获取视频的源 URL 并渲染 iframe。

app/ui/video-component.jsx
export default async function VideoComponent() {
  const src = await getVideoSrc()

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

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

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

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

export default function Page() {
  return (
    <section>
      <Suspense fallback={<p>正在加载视频...</p>}>
        <VideoComponent />
      </Suspense>
      {/* 页面的其他内容 */}
    </section>
  )
}

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

确保视频嵌入是响应式的。使用 CSS 使 iframe 或视频播放器适应不同的屏幕尺寸。

根据网络条件实施视频加载策略，特别是对于数据计划有限的用户。

这种方法提供了更好的用户体验，因为它防止页面阻塞，这意味着用户可以在视频组件流式传输时与页面交互。

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

app/page.jsx
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>
      {/* 页面的其他内容 */}
    </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 执行此操作的示例：

app/page.jsx
import { Suspense } from 'react'
import { list } from '@vercel/blob'

export default function Page() {
  return (
    <Suspense fallback={<p>正在加载视频...</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="视频播放器">
      <source src={url} type="video/mp4" />
      你的浏览器不支持视频标签。
    </video>
  )
}

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

为视频添加字幕

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

app/page.jsx
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="视频播放器">
      <source src={url} type="video/mp4" />
      <track src={captionsUrl} kind="subtitles" srcLang="en" label="English" />
      你的浏览器不支持视频标签。
    </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，也可用。

使用 <video> 和 <iframe>​

<video>​

常见的 <video> 标签属性​

视频最佳实践​

<iframe>​

常见的 <iframe> 标签属性​

选择视频嵌入方法​

嵌入外部托管的视频​

自托管视频​

使用 Vercel Blob 进行视频托管​

为视频添加字幕​

资源​

开源 next-video 组件​

Cloudinary 集成​

Mux Video API​

Fastly​

ImageKit.io 集成​