Next.js - 视频优化

在本章中，我们将学习如何在 Next.js 应用中包含视频，并优化它们的加载以提升性能和用户体验。

在 Next.js 中使用视频

Next.js 没有内置组件来在页面中包含视频。对于本地视频文件，可以使用 HTML <video> 标签嵌入视频；对于外部平台托管的视频，可以使用 <iframe>。

示例

在下面的示例中，我们使用 <video> 标签嵌入一个本地视频文件。只有当视频在视口中可见时，才会加载视频。

export default function Example() {
    return (
    <div>
        <h1>Video:</h1>
        <video
            src="/video.mp4"
            autoPlay
            muted
            loop
            playsInline
        />
    </div>
    );
}

输出

在下面的输出中，我们在 Next.js 页面中显示了一个视频。

视频优化的最佳实践

以下是在 Next.js 应用中优化视频加载的一些最佳实践。

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

嵌入外部托管视频

如前所述，要嵌入外部托管视频，可以使用 HTML <iframe> 标签。以下部分展示如何以优化方式在 Next.js 中嵌入外部视频。

步骤 1：创建用于获取视频的 Server Component

第一步是创建一个 Server Component，用于生成嵌入视频的适当 iframe。此组件将获取视频的源 URL 并渲染 iframe。以下代码展示了如何创建用于获取视频源的 server component。

export default async function VideoComponent() {
  const src = await getVideoSrc()
 
  return <iframe src={src} allowFullScreen />
}

步骤 2：使用 React Suspense 显示视频组件

React Suspense 是 React.js 中的一项功能，允许在组件加载时渲染备用 UI。以下代码展示了如何使用 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>
  )
}