影片最佳化

本頁概述如何在 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 儀表板中，導航到「Storage」標籤並選擇您的 Vercel Blob 儲存空間。在 Blob 表格的右上角，找到並點擊「Upload」按鈕。然後，選擇您要上傳的影片檔案。上傳完成後，影片檔案將出現在 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 以進行網路最佳化。如需更多詳細資訊，請參閱 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，同樣也已推出。