如何使用與最佳化影片

本頁面概述如何在 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> 標籤與 <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" />
      您的瀏覽器不支援 video 標籤。
    </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" />
      您的瀏覽器不支援 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 的隨選影片和串流媒體解決方案整合到 Next.js 中的資訊。

ImageKit.io 整合

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