next video
v2.0.0
next-video下一個視頻是用於將視頻添加到您的下一個.js應用程序的React組件。它既擴展<video>元素和您的下一個應用程序，並具有用於自動視頻優化的功能。
import Video from 'next-video' ;
import getStarted from '/videos/get-started.mp4' ;
export default function Page ( ) {
return < Video src = { getStarted } /> ;
} 在您的下一個項目的根源中，運行：
npx -y next-video init這將（隨著提示）：
next-video作為依賴項安裝next.config.js文件/videos目錄，這是您將所有視頻源文件放置的地方。它還將更新您的.gitignore文件，以忽略/videos目錄中的視頻文件。視頻，尤其是任何合理尺寸的視頻，不應由Git存儲/跟踪。另外，如果您想存儲原始文件，則可以刪除添加的gitignore行並安裝git-lfs。
Vercel建議使用專用的內容平台進行視頻，因為視頻文件很大，並且可能導致過多的帶寬使用情況。默認情況下，Next-Video使用MAUX（開發人員的視頻API），它是由Video.js的創建者構建的，Pateers Pater-Paters-Patreon等流行的流媒體應用程序，其視頻性能監視用於世界上最大的現場活動。
.env.local （或者您導出本地env變量） # .env.local
MUX_TOKEN_ID=[YOUR_TOKEN_ID]
MUX_TOKEN_SECRET=[YOUR_TOKEN_SECRET] cd your-next-app
# If your project is using NPM (the default for Next.js)
npm install next-video
# If your project is using Yarn
yarn add next-video
# If your project is using pnpm
pnpm add next-video next.config.js
如果您使用的是CONCORJS模塊：
const { withNextVideo } = require ( 'next-video/process' ) ;
/** @type {import('next').NextConfig} */
const nextConfig = { } ; // Your current Next Config object
module . exports = withNextVideo ( nextConfig ) ; next.config.mjs
如果您正在使用ES模塊：
import { withNextVideo } from 'next-video/process' ;
/** @type {import('next').NextConfig} */
const nextConfig = { } ;
export default withNextVideo ( nextConfig ) ; tsconfig.json僅當您使用TypeScript時才需要這是必需的，並確保您的視頻文件導入不會大喊您丟失類型。當您運行npx next-video init時，應該在您的項目root中創建video.d.ts ，如果不是，則可以手動創建它：
// video.d.ts
/// <reference types="next-video/video-types/global" />然後將該文件添加到tsconfig.json中的include數組。
{
// ...
"include" : [ "video.d.ts" , "next-env.d.ts" , /* ... */ ]
// ...
} 將視頻添加到/videos目錄中，然後運行npx next-video sync 。視頻將自動上傳到遠程存儲並進行了優化。您會注意到/videos/[file-name].json file-name]也創建了json文件。這些用於將您的本地視頻文件映射到新的遠程託管視頻資產。這些JSON文件必須被檢查為git。
npx next-video sync
您還可以將next-video sync -w添加到DEV腳本中以自動同步視頻，因為它們在運行DEV服務器時將其添加到/videos中。
// package.json
"scripts" : {
"dev" : "next dev & npx next-video sync -w" ,
} ,現在，您可以在應用程序中使用<Video>組件。假設您已經添加了一個名為awesome-video.mp4 /videos文件
import Video from 'next-video' ;
import awesomeVideo from '/videos/awesome-video.mp4' ;
export default function Page ( ) {
return < Video src = { awesomeVideo } /> ;
}當視頻上傳和處理視頻時， <Video>將嘗試播放本地文件。這僅在本地開發過程中發生，因為本地文件永遠不會上傳到您的git repo。
對於已經遠程託管的視頻（例如在AWS S3上），請導入遠程URL並刷新頁面。這將在/videos文件夾中創建本地JSON文件，同步腳本將啟動上傳視頻。
import Video from 'next-video' ;
import awesomeVideo from 'https://www.mydomain.com/remote-video.mp4' ;
export default function Page ( ) {
return < Video src = { awesomeVideo } /> ;
}如果託管視頻是像MP4這樣的單個文件，則將自動優化該文件，以更好地提供可交付性和兼容性。
在某些情況下，您可能在導入時可能沒有可用的遠程視頻URL。
可以通過在您的下一個/api/video中使用以下代碼創建新的API端點來解決這一問題。
應用程序路由器（Next.js> = 13）
// app/api/video/route.js
export { GET } from 'next-video/request-handler' ;頁面路由器（next.js）
// pages/api/video/[[...handler]].js
export { default } from 'next-video/request-handler' ;然後將src屬性設置為遠程視頻的URL，刷新頁面，視頻將開始處理。
import Video from 'next-video' ;
export default function Page ( ) {
return < Video src = "https://www.mydomain.com/remote-video.mp4" /> ;
}您可以通過將theme道具傳遞給<Video>組件來更改播放器主題。
有關更多主題，請參見Player.Style。
import Video from 'next-video' ;
import Instaplay from 'player.style/instaplay/react' ;
import awesomeVideo from '/videos/awesome-video.mp4' ;
export default function Page ( ) {
return < Video src = { awesomeVideo } theme = { Instaplay } /> ;
}由於v1.1.0您可以直接導入播放器組件並無需任何上傳和處理功能即可使用它。
import Player from 'next-video/player' ;
// or
import BackgroundPlayer from 'next-video/background-player' ;
export default function Page ( ) {
return < Player
src = "https://www.mydomain.com/remote-video.mp4"
poster = "https://www.mydomain.com/remote-poster.webp"
blurDataURL = "data:image/webp;base64,UklGRlA..."
/> ;
}您可以通過將它們作為道具傳遞給視頻中的自定義海報和Blurdataurl。
import Video from 'next-video' ;
import awesomeVideo from '/videos/awesome-video.mp4' ;
import awesomePoster from '../public/images/awesome-poster.jpg' ;
export default function Page ( ) {
return < Video
src = { awesomeVideo }
poster = { awesomePoster . src }
blurDataURL = { awesomePoster . blurDataURL }
/> ;
}這是一個很好的解決方案，但它不會提供與默認提供商的自動海報和Blurdataurl相同的優化水平。
要獲得相同的優化級別，您可以使用開槽的海報元素。
通過帶有slot="poster"屬性的小時候將視頻傳遞給視頻，將其插入的海報圖像元素（例如next/image ）添加到視頻中。
現在，您的圖像將獲得所用圖像組件的所有好處，它將很好地放置在視頻播放器控件後面。
import Image from 'next/image' ;
import Video from 'next-video' ;
import awesomeVideo from '/videos/awesome-video.mp4' ;
import awesomePoster from '../public/images/awesome-poster.jpg' ;
export default function Page ( ) {
return (
< Video src = { awesomeVideo } >
< Image
slot = "poster"
src = { awesomePoster }
placeholder = "blur"
alt = "Some peeps doing something awesome"
/>
</ Video >
) ;
}您可以通過將自定義播放器組件傳遞給as Prop來自定義播放器。
自定義播放器組件接受以下道具：
asset ：處理的資產包含有用的資產元數據和上傳狀態。src ：如果資產準備就緒，則字符串視頻源URL。poster ：字符串圖像源URL如果準備就緒，則為。blurDataURL ：可以用作佔位符的字符串base64映像源URL。 import Video from 'next-video' ;
import ReactPlayer from './player' ;
import awesomeVideo from '/videos/awesome-video.mp4' ;
export default function Page ( ) {
return < Video as = { ReactPlayer } src = { awesomeVideo } /> ;
} // player.tsx
'use client' ;
import type { PlayerProps } from 'next-video' ;
import ReactPlayer from 'react-player' ;
export default function Player ( props : PlayerProps ) {
let { asset , src , poster , blurDataURL , thumbnailTime , ... rest } = props ;
let config = { file : { attributes : { poster } } } ;
return < ReactPlayer
url = { src }
config = { config }
width = "100%"
height = "100%"
{ ... rest }
/> ;
}您可以使用<BackgroundVideo>組件將視頻添加為沒有玩家控件的背景。這節省了約50％的JS播放器大小，並為背景視頻使用而進行了優化。
<BackgroundVideo>組件是像您在上一節中看到的那樣的自定義播放器。
以下示例中的thumbnailTime查詢參數用於在視頻中的指定時間（僅適用於mux提供商的使用）來生成海報圖像並模糊圖像。
import BackgroundVideo from 'next-video/background-video' ;
import getStarted from '/videos/country-clouds.mp4?thumbnailTime=0' ;
export default function Page ( ) {
return (
< BackgroundVideo src = { getStarted } >
< h1 > next-video </ h1 >
< p >
A React component for adding video to your Next.js application.
It extends both the video element and your Next app with features
for automatic video optimization.
</ p >
</ BackgroundVideo >
) ;
}您可以在不同的提供商之間進行選擇以進行視頻處理和託管。默認提供商是MUX。要更改提供商，您可以在Next-Video配置中添加provider選項。一些提供商需要其他配置，這些配置可以在providerConfig屬性中傳遞。
// next.config.js
const { withNextVideo } = require ( 'next-video/process' ) ;
/** @type {import('next').NextConfig} */
const nextConfig = { } ;
module . exports = withNextVideo ( nextConfig , {
provider : 'backblaze' ,
providerConfig : {
backblaze : { endpoint : 'https://s3.us-west-000.backblazeb2.com' }
}
} ) ;支持提供者所需的環境變量：
| 提供者 | 環境變量 | 提供者配置 | 定價鏈接 |
|---|---|---|---|
mux （默認） | MUX_TOKEN_IDMUX_TOKEN_SECRET | 定價 | |
vercel-blob | BLOB_READ_WRITE_TOKEN | 定價 | |
backblaze | BACKBLAZE_ACCESS_KEY_IDBACKBLAZE_SECRET_ACCESS_KEY | endpointbucket （可選） | 定價 |
amazon-s3 | AWS_ACCESS_KEY_IDAWS_SECRET_ACCESS_KEY | endpointbucket （可選） | 定價 |
cloudflare-r2 | R2_ACCESS_KEY_IDR2_SECRET_ACCESS_KEYR2_CF_API_TOKEN （ bucketUrlPublic集合時可選） | bucket （可選）bucketUrlPublic （ R2_CF_API_TOKEN設置時可選） | 定價 |
| mux（默認） | Vercel Blob | backblaze | 亞馬遜S3 | Cloudflare R2 | |
|---|---|---|---|---|---|
| 反repo存儲 | ✅ | ✅ | ✅ | ✅ | ✅ |
| 通過CDN交付 | ✅ | ✅ | - | - | ✅ |
| BYO播放器 | ✅ | ✅ | ✅ | ✅ | ✅ |
| 壓縮以進行流 | ✅ | - | - | - | |
| 適應緩慢的網絡（HLS） | ✅ | - | - | - | |
| 自動佔位符海報 | ✅ | - | - | - | |
| 時間軸懸停的縮略圖 | ✅ | - | - | - | |
| 流傳輸任何源格式 | ✅ | * | * | * | * |
| AI字幕和字幕 | ✅ | - | - | - | |
| 視頻分析 | ✅ | - | - | - | |
| 定價 | 基於分鐘 | 基於GB | 基於GB | 基於GB | 基於GB |
*與Web兼容的MP4文件無需視頻處理所需的託管提供商
默認情況下，資產元數據存儲在/videos目錄中的JSON文件中。如果要將元數據存儲在數據庫或其他地方，則可以在單獨的Next-Video配置文件中自定義存儲鉤。
下面的示例配置顯示了JSON文件存儲的默認存儲掛鉤。
可以通過更改loadAsset ， saveAsset和updateAsset功能的主體來定制這些鉤子以滿足您的需求。
// next-video.mjs
import { NextVideo } from 'next-video/process' ;
import path from 'node:path' ;
import { mkdir , readFile , writeFile } from 'node:fs/promises' ;
export const { GET , POST , handler , withNextVideo } = NextVideo ( {
// Other next-video config options should be added here if using a next-video config file.
// folder: 'videos',
// path: '/api/video',
loadAsset : async function ( assetPath ) {
const file = await readFile ( assetPath ) ;
const asset = JSON . parse ( file . toString ( ) ) ;
return asset ;
} ,
saveAsset : async function ( assetPath , asset ) {
try {
await mkdir ( path . dirname ( assetPath ) , { recursive : true } ) ;
await writeFile ( assetPath , JSON . stringify ( asset ) , {
flag : 'wx' ,
} ) ;
} catch ( err ) {
if ( err . code === 'EEXIST' ) {
// The file already exists, and that's ok in this case. Ignore the error.
return ;
}
throw err ;
}
} ,
updateAsset : async function ( assetPath , asset ) {
await writeFile ( assetPath , JSON . stringify ( asset ) ) ;
}
} ) ;然後在您的next.config.mjs文件中導入withNextVideo函數。
// next.config.mjs
import { withNextVideo } from './next-video.mjs' ;
/** @type {import('next').NextConfig} */
const nextConfig = { } ;
export default withNextVideo ( nextConfig ) ;最後，如您所見，在API路線中導入GET和POST或handler功能。處理人員期望使用視頻源URL進行url查詢或身體參數。
這些是處理程序最小的示例，通常您會添加更多錯誤處理和驗證，身份驗證和授權。
應用程序路由器（Next.js> = 13）
// app/api/video/route.js
export { GET , POST } from '@/next-video' ;頁面路由器（next.js）
// pages/api/video/[[...handler]].js
export { handler as default } from '@/next-video' ; 默認播放器是使用媒體鉻構建的。
<video>元素播放。<mux-video>一起播放。<hls-video>一起播放。<dash-video>一起播放。<Video>組件接受<video>元素的所有道具和以下其他道具：
src （資產|字符串）：視頻資產對象（導入）或源URL。poster （Staticimagedata | String）：視頻的佔位符圖像。 （為MUX視頻生成的自動）blurDataURL （字符串）：可以用作佔位符的base64映像源URL。 （為MUX視頻生成的自動）theme （React組件）：播放器主題組件。有關更多主題，請參見Player.Style。as （React組件）：自定義播放器組件。請參閱自定義播放器。transform （函數）：用於轉換資產對象（SRC和海報）的自定義功能。loader （功能）：用於解決基於字符串的視頻URL（非導入）的自定義功能。 帶有MUX視頻源的<Video>組件接受以下其他道具：
startTime （數字）：視頻的開始時間秒。streamType （“按需” |“ Live”）：視頻的流類型。默認值為“按需”。customDomain （字符串）：分配一個用於MUX視頻的自定義域。beaconCollectionDomain （字符串）：分配一個用於MUX數據收集的自定義域。注意：必須在播放之前設置以應用於MUX數據監視。envKey （String）：這是MUX數據的環境密鑰。如果您使用MUX視頻，則將自動為您設置。如果您使用其他提供商，則可以將其設置為自己的密鑰。disableTracking （布爾值）：禁用視頻播放的MUX數據跟踪。disableCookies （布爾值）：禁用MUX數據使用的cookie。preferPlayback （“ MSE” |“本機”）：指定<mux-video>是否應該嘗試使用媒體源擴展或本機播放（如果可用）。如果沒有提供值，則<mux-video>將根據認為最佳的內容和播放環境選擇。maxResolution （“ 720p” |“ 1080p” |“ 1440p” |“ 2160p”）：指定您要為此視頻提供的最大分辨率。minResolution （“ 480p” |“ 540p” |“ 720p” |“ 1080p” |“ 1440p” |“ 2160p”）：指定您要為此視頻提供的最小分辨率。programStartTime （編號）：將基於PDT的即時剪輯應用於媒體流的開頭。programEndTime （編號）：將基於PDT的即時剪輯應用於媒體流的末尾。assetStartTime （編號）：將基於媒體時間軸的即時剪輯應用於媒體流的開頭。assetEndTime （編號）：將基於媒體時間軸的即時剪輯應用於媒體流的末尾。renditionOrder （String）：更改SRC播放列表中提供的演繹的順序。可以影響初始段負載。目前僅支持“ desc”下降訂單。metadataVideoId （String）：這是發送到MUX數據的任意ID，該ID應該映射回數據庫中此視頻的記錄。metadataTitle （字符串）：這是您的視頻的任意標題，它將以元數據的形式傳遞到MUX數據中。添加標題將為您提供MIX Data儀表板中有用的上下文。 （可選，但鼓勵）metadataViewerUserId （String）：如果您有登錄用戶，則應該是匿名ID值，該值映射回數據庫中的用戶，將發送到MUX數據。注意不要揭露個人可識別的信息，例如名稱，用戶名或電子郵件地址。 （可選，但鼓勵）metadata* （字符串）：此元數據*語法可用於傳遞任何任意MUX數據元數據字段。playbackToken （字符串）：簽署src URL的播放令牌。thumbnailToken （字符串）：簽名poster URL的代幣。storyboardToken （字符串）：簽署故事板URL的標記。drmToken （字符串）：簽署DRM許可證和相關URL的令牌。targetLiveWindow （編號）：代表實時內容可尋求範圍的偏移，其中Infinity表示整個實時內容都是可尋求的（又稱“標準DVR”）。與streamType一起使用以確定要顯示的UI/控件。liveEdgeOffset （數字）：最早將其視為現場內容的播放時間。debug （布爾值）：啟用基礎播放引擎（目前HLS.JS）和MUX插入的調試模式，並在控制台中提供其他信息。 {
"Version" : " 2012-10-17 " ,
"Statement" : [
{
"Effect" : " Allow " ,
"Action" : [
" s3:ListAllMyBuckets " ,
" s3:CreateBucket " ,
" s3:PutBucketOwnershipControls "
],
"Resource" : " * "
},
{
"Effect" : " Allow " ,
"Action" : [
" s3:PutBucketPublicAccessBlock " ,
" s3:PutBucketAcl " ,
" s3:PutBucketCORS " ,
" s3:GetObject " ,
" s3:PutObject " ,
" s3:PutObjectAcl " ,
" s3:ListBucket "
],
"Resource" : " arn:aws:s3:::next-videos-* "
}
]
}為公共訪問配置存儲桶：
bucket名，並確保將其配置為公共訪問bucketUrlPublic密鑰下的提供商配置中指定公共URL提供CloudFlare API密鑰：
R2_CF_API_TOKEN如果您想在本地開發這件事，則可以克隆並鏈接此吸盤。只是知道...現在這不是一個美好的時光。
cd進入存儲庫npm install && npm run buildcd ../ （或回到要創建測試應用的地方）npx create-next-appcd your-next-appnpx link ../next-video （或任何克隆此回購的地方）
