影片優化

本頁面概述如何在 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"
      />
      您的瀏覽器不支援 video 標籤。
    </video>
  )
}

常見 <video> 標籤屬性

小知識：使用 autoPlay 屬性時，建議同時加入 muted 屬性以確保影片在多數瀏覽器中能自動播放，並加入 playsInline 屬性以兼容 iOS 裝置。

完整影片屬性清單請參閱 MDN 文件。

影片最佳實踐

• 備用內容：使用 <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> 標籤嵌入自託管影片，適用於需要詳細控制播放器功能與外觀的場景。這種整合方式讓您能自訂和控制影片內容。
• 使用影片託管服務（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>載入影片中...</p>}>
        <VideoComponent />
      </Suspense>
      {/* 頁面的其他內容 */}
    </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>
      {/* 頁面的其他內容 */}
    </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>載入影片中...</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 標籤。
    </video>
  )
}

在此方法中，頁面使用影片的 @vercel/blob URL 透過 VideoComponent 顯示影片。React Suspense 用於在影片 URL 獲取完成且影片準備顯示前顯示備用內容。

為影片加入字幕

如果您有影片的字幕，可以輕鬆使用 <track> 元素將其加入 <video> 標籤中。您可以從 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="影片播放器">
      <source src={url} type="video/mp4" />
      <track
        src={captionsUrl}
        kind="subtitles"
        srcLang="en"
        label="English">
      您的瀏覽器不支援 video 標籤。
    </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 整合

• 官方 文件與整合指南 說明如何在 Next.js 中使用 Cloudinary。
• 包含 <CldVideoPlayer> 元件以直接支援影片。
• 查看 範例 了解如何將 Cloudinary 與 Next.js 整合，包括自適應位元率串流。
• 其他 Cloudinary 函式庫 包括 Node.js SDK 也可用。

Mux Video API

• Mux 提供一個入門模板，用於使用 Mux 和 Next.js 建立影片課程。
• 了解 Mux 關於為您的 Next.js 應用程式嵌入高效能影片的建議。
• 探索一個範例專案，展示 Mux 與 Next.js 的結合。

Fastly

• 深入了解如何將 Fastly 的 隨選視訊 (video on demand) 與串流媒體解決方案整合至 Next.js。