影片最佳化

本頁概述如何在 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> 標籤時，請在標籤內加入後備內容，以供不支援影片播放的瀏覽器使用。
• 字幕：為聽障或重聽的使用者提供字幕。在 <video> 元素中使用 <track> 標籤來指定字幕檔案來源。
• 無障礙控制項：建議使用標準 HTML5 影片控制項，以確保鍵盤導航和螢幕閱讀器的相容性。對於進階需求，請考慮使用第三方播放器，例如 react-player 或 video.js，它們提供無障礙控制項和一致的瀏覽器體驗。

<iframe>

HTML <iframe> 標籤允許您嵌入來自 YouTube 或 Vimeo 等外部平台的影片。

export default function Page() {
  return (
    <iframe
      src="https://www.youtube.com/watch?v=gfU1iZnjRZM"
      frameborder="0"
      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} frameborder="0" 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。如需更多詳細資訊，請參閱 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，也可以使用。