如何使用與最佳化影片

本頁面概述如何在 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> 標籤嵌入自託管影片，適用於需要詳細控制播放器功能與外觀的場景。這種整合方式讓您能自訂與控制影片內容。
• 使用影片託管服務（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>載入影片中...</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" />
      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="影片播放器">
      <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 整合

• 官方文件與整合指南說明如何在 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 的隨選影片與串流媒體解決方案整合至 Next.js。

ImageKit.io 整合

• 查看 官方快速入門指南 了解如何將 ImageKit 與 Next.js 整合。
• 此整合提供了一個 <IKVideo> 組件，可實現 無縫影片支援。
• 您也可以探索其他 ImageKit 函式庫，例如同樣可用的 Node.js SDK。