next video
v2.0.0
next-video วิดีโอถัดไปเป็นองค์ประกอบที่ตอบสนองสำหรับการเพิ่มวิดีโอลงในแอปพลิเคชัน next.js ของคุณ มันขยายทั้งองค์ประกอบ <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 ใช้ MUX (API วิดีโอสำหรับนักพัฒนา) ซึ่งสร้างขึ้นโดยผู้สร้าง Video.js พลังแอพสตรีมมิ่งยอดนิยมเช่น 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
หากคุณใช้โมดูล CommonJS:
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 และตรวจสอบให้แน่ใจว่าการนำเข้าไฟล์วิดีโอของคุณไม่ได้ตะโกนใส่คุณสำหรับประเภทที่หายไป video.d.ts ควรถูกสร้างขึ้นในรูทโครงการของคุณเมื่อคุณเรียกใช้ npx next-video init หากไม่สามารถสร้างได้ด้วยตนเอง:
// video.d.ts
/// <reference types="next-video/video-types/global" /> จากนั้นเพิ่มไฟล์นั้นลงในอาร์เรย์ include ใน tsconfig.json
{
// ...
"include" : [ "video.d.ts" , "next-env.d.ts" , /* ... */ ]
// ...
} เพิ่มวิดีโอในท้องถิ่นลงในไดเรกทอรี /videos จากนั้นเรียกใช้ npx next-video sync วิดีโอจะถูกอัปโหลดโดยอัตโนมัติไปยังที่เก็บข้อมูลระยะไกลและปรับให้เหมาะสม คุณจะสังเกตเห็น /videos/[file-name].json -name-name.json ไฟล์ถูกสร้างขึ้นด้วย สิ่งเหล่านี้ใช้ในการแมปไฟล์วิดีโอในเครื่องของคุณกับสินทรัพย์วิดีโอจากระยะไกลที่เป็นโฮสต์ใหม่ ไฟล์ JSON เหล่านี้จะต้องตรวจสอบเป็น GIT
npx next-video sync
นอกจากนี้คุณยังสามารถเพิ่ม next-video sync -w ลงในสคริปต์ dev เพื่อซิงค์วิดีโอโดยอัตโนมัติตามที่พวกเขาเพิ่มลงใน /videos ในขณะที่เซิร์ฟเวอร์ dev กำลังทำงานอยู่
// 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 ระยะไกลและรีเฟรชหน้า สิ่งนี้จะสร้างไฟล์ JSON ท้องถิ่นในโฟลเดอร์ /videos และสคริปต์การซิงค์จะเริ่มอัปโหลดวิดีโอ
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 ใหม่ในแอพถัดไปของคุณสำหรับ /api/video ด้วยรหัสต่อไปนี้
เราเตอร์แอป (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 Prop ไปยังส่วนประกอบ <Video> >
ดูผู้เล่นสไตล์สำหรับธีมเพิ่มเติม
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 โดยผู้ให้บริการเริ่มต้น
เพื่อให้ได้การเพิ่มประสิทธิภาพในระดับเดียวกันคุณสามารถใช้องค์ประกอบโปสเตอร์ slotted
เพิ่มองค์ประกอบภาพโปสเตอร์ slotted (เช่น next/image ) ลงในวิดีโอโดยส่งผ่านเป็นเด็กที่มีแอตทริบิวต์ slot="poster"
ตอนนี้ภาพของคุณจะได้รับประโยชน์ทั้งหมดของส่วนประกอบรูปภาพที่ใช้แล้วและมันจะถูกวางไว้ด้านหลังตัวควบคุมเครื่องเล่นวิดีโอ
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
องค์ประกอบของผู้เล่นที่กำหนดเองยอมรับอุปกรณ์ประกอบฉากต่อไปนี้:
asset : สินทรัพย์ที่ดำเนินการมีข้อมูลเมตาของสินทรัพย์ที่เป็นประโยชน์และสถานะการอัปโหลดsrc : URL แหล่งวิดีโอสตริงหากสินทรัพย์พร้อมposter : URL แหล่งที่มาของภาพสตริงหากสินทรัพย์พร้อมblurDataURL : url แหล่งที่มาของสตริง 64 ที่สามารถใช้เป็นตัวยึดตำแหน่ง 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> เพื่อเพิ่มวิดีโอเป็นพื้นหลังที่ไม่มีการควบคุมผู้เล่น นี่จะช่วยประหยัดขนาดของเครื่องเล่น JS ได้ประมาณ 50% และได้รับการปรับให้เหมาะสมสำหรับการใช้วิดีโอพื้นหลัง
ส่วนประกอบ <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 ในการเปลี่ยนผู้ให้บริการคุณสามารถเพิ่มตัวเลือก 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' }
}
} ) ;ผู้ให้บริการที่ได้รับการสนับสนุนด้วยตัวแปรสภาพแวดล้อมที่ต้องการ:
| ผู้ให้บริการ | สภาพแวดล้อม vars | ผู้ให้บริการกำหนดค่า | ลิงค์ราคา |
|---|---|---|---|
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 (ไม่บังคับเมื่อ Set R2_CF_API_TOKEN ) | การกำหนดราคา |
| mux (ค่าเริ่มต้น) | หยด vercel | แบ็คเบลนส์ | Amazon S3 | Cloudflare R2 | |
|---|---|---|---|---|---|
| ที่เก็บข้อมูลนอก Repo | |||||
| จัดส่งผ่าน CDN | - | - | |||
| ผู้เล่น BYO | |||||
| บีบอัดสำหรับสตรีมมิ่ง | - | - | - | ||
| ปรับให้เข้ากับเครือข่ายช้า (HLS) | - | - | - | ||
| โปสเตอร์ตัวยึดอัตโนมัติ | - | - | - | ||
| TIMELINE HOVER FUMBNAILS | - | - | - | ||
| สตรีมรูปแบบต้นฉบับใด ๆ | - | - | - | - | |
| คำบรรยายและคำบรรยาย AI | - | - | - | ||
| การวิเคราะห์วิดีโอ | - | - | - | ||
| การกำหนดราคา | อิงกับนาที | ที่ใช้ GB | ที่ใช้ GB | ที่ใช้ GB | ที่ใช้ GB |
*ไฟล์ MP4 ที่เข้ากันได้กับเว็บที่จำเป็นสำหรับการโฮสต์ผู้ให้บริการโดยไม่ต้องประมวลผลวิดีโอ
โดยค่าเริ่มต้นข้อมูลเมตาของสินทรัพย์จะถูกเก็บไว้ในไฟล์ JSON ในไดเรกทอรี /videos หากคุณต้องการจัดเก็บข้อมูลเมตาในฐานข้อมูลหรือที่อื่น ๆ คุณสามารถปรับแต่งตะขอจัดเก็บข้อมูลในไฟล์กำหนดค่าวิดีโอถัดไปแยกต่างหาก
ตัวอย่างด้านล่างการกำหนดค่าแสดงตะขอที่เก็บข้อมูลเริ่มต้นสำหรับที่เก็บไฟล์ 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 ) ) ;
}
} ) ; จากนั้นนำเข้าฟังก์ชั่น withNextVideo ในไฟล์ next.config.mjs ของคุณ
// next.config.mjs
import { withNextVideo } from './next-video.mjs' ;
/** @type {import('next').NextConfig} */
const nextConfig = { } ;
export default withNextVideo ( nextConfig ) ; สุดท้ายนำเข้า GET และ POST หรือฟังก์ชั่น handler ในเส้นทาง API ของคุณตามที่คุณเห็น FIT ตัวจัดการคาดว่าจะมีการสืบค้น 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 (สตริง): URL แหล่งกำเนิดภาพ Base64 ที่สามารถใช้เป็นตัวยึดตำแหน่ง (สร้างอัตโนมัติสำหรับวิดีโอ MUX)theme (ส่วนประกอบปฏิกิริยา): ส่วนประกอบชุดรูปแบบของเครื่องเล่น ดูผู้เล่นสไตล์สำหรับธีมเพิ่มเติมas (ส่วนประกอบปฏิกิริยา): องค์ประกอบของเครื่องเล่นที่กำหนดเอง ดูผู้เล่นที่กำหนดเองtransform (ฟังก์ชั่น): ฟังก์ชั่นที่กำหนดเองเพื่อแปลงวัตถุสินทรัพย์ (SRC และโปสเตอร์)loader (ฟังก์ชั่น): ฟังก์ชั่นที่กำหนดเองที่ใช้ในการแก้ไข URL วิดีโอที่ใช้สตริง (ไม่ใช่การนำเข้า) ส่วนประกอบ <Video> ที่มีแหล่งวิดีโอ MUX ยอมรับอุปกรณ์ประกอบฉากเพิ่มเติมดังต่อไปนี้:
startTime (หมายเลข): เวลาเริ่มต้นของวิดีโอในไม่กี่วินาทีstreamType ("on-demand" | "live"): ประเภทสตรีมของวิดีโอ ค่าเริ่มต้นคือ "ตามความต้องการ"customDomain (String): กำหนดโดเมนที่กำหนดเองที่จะใช้สำหรับวิดีโอ MUXbeaconCollectionDomain (String): กำหนดโดเมนที่กำหนดเองที่จะใช้สำหรับการรวบรวมข้อมูล MUX หมายเหตุ: ต้องตั้งค่าก่อนการเล่น BACKID เพื่อใช้กับการตรวจสอบข้อมูล MUXenvKey (String): นี่คือคีย์สภาพแวดล้อมสำหรับข้อมูล MUX หากคุณใช้วิดีโอ MUX จะถูกตั้งค่าให้คุณโดยอัตโนมัติ หากคุณใช้ผู้ให้บริการอื่นคุณสามารถตั้งค่าไว้เป็นคีย์ของคุณเองdisableTracking (บูลีน): ปิดใช้งานการติดตามข้อมูล MUX ของการเล่นวิดีโอdisableCookies (บูลีน): ปิดใช้งานคุกกี้ที่ใช้โดยข้อมูล MUXpreferPlayback ("MSE" | "Native"): ระบุว่า <mux-video> ควรลองใช้ส่วนขยายของแหล่งสื่อหรือการเล่นดั้งเดิม (ถ้ามี) หากไม่มีการจัดเตรียมค่า <mux-video> จะเลือกตามสิ่งที่ถือว่าดีที่สุดสำหรับสภาพแวดล้อมเนื้อหาและการเล่นmaxResolution ("720p" | "1080p" | "1440p" | "2160p"): ระบุความละเอียดสูงสุดที่คุณต้องการส่งมอบสำหรับวิดีโอนี้minResolution ("480p" | "540p" | "720p" | "1080p" | "1440p" | "2160p"): ระบุความละเอียดขั้นต่ำที่คุณต้องการส่งมอบสำหรับวิดีโอนี้programStartTime (หมายเลข): ใช้คลิปทันทีที่ใช้ PDT กับจุดเริ่มต้นของสตรีมสื่อprogramEndTime (หมายเลข): ใช้คลิปทันทีที่ใช้ PDT ไปยังจุดสิ้นสุดของสตรีมสื่อassetStartTime (หมายเลข): ใช้คลิปทันทีที่ใช้ไทม์ไลน์ของสื่อกับจุดเริ่มต้นของสตรีมสื่อassetEndTime (หมายเลข): ใช้คลิปทันทีที่ใช้สื่อกำหนดเวลาของสื่อจนถึงจุดสิ้นสุดของสตรีมสื่อrenditionOrder (สตริง): เปลี่ยนลำดับที่มีการแสดงผลในเพลย์ลิสต์ SRC สามารถส่งผลกระทบต่อการโหลดเซ็กเมนต์เริ่มต้น ปัจจุบันรองรับ "desc" สำหรับคำสั่งลดลงเท่านั้นmetadataVideoId (String): นี่คือ ID โดยพลการที่ส่งไปยังข้อมูล MUX ที่ควรแมปกลับไปที่บันทึกของวิดีโอนี้ในฐานข้อมูลของคุณmetadataTitle (String): นี่เป็นชื่อโดยพลการสำหรับวิดีโอของคุณที่จะถูกส่งผ่านเป็นข้อมูลเมตาลงในข้อมูล MUX การเพิ่มชื่อจะให้บริบทที่เป็นประโยชน์ในแผงควบคุมข้อมูล MUX ของคุณ (เป็นทางเลือก แต่ได้รับการสนับสนุน)metadataViewerUserId (สตริง): หากคุณมีผู้ใช้ที่เข้าสู่ระบบนี่ควรเป็นค่า ID ที่ไม่ระบุชื่อที่แมปกลับไปยังผู้ใช้ในฐานข้อมูลของคุณที่จะถูกส่งไปยังข้อมูล MUX ระวังอย่าเปิดเผยข้อมูลส่วนบุคคลเช่นชื่อชื่อผู้ใช้หรือที่อยู่อีเมล (เป็นทางเลือก แต่ได้รับการสนับสนุน)metadata* (String): Metadata* ไวยากรณ์นี้สามารถใช้เพื่อส่งผ่านฟิลด์ข้อมูลเมตาดาต้าข้อมูล MUX โดยพลการใด ๆplaybackToken (String): โทเค็นการเล่นสำหรับการลงนาม URL srcthumbnailToken (String): โทเค็นสำหรับการเซ็นชื่อ URL posterstoryboardToken (String): โทเค็นสำหรับการลงนามใน URL StoryboarddrmToken (สตริง): โทเค็นสำหรับการลงนามในใบอนุญาต DRM และ URL ที่เกี่ยวข้องtargetLiveWindow (หมายเลข): ออฟเซ็ตที่แสดงถึงช่วงที่ต้องการสำหรับเนื้อหาสดที่ Infinity ตี้หมายถึงเนื้อหาสดทั้งหมดสามารถค้นหาได้ (aka "DVR มาตรฐาน") ใช้ร่วมกับ streamType เพื่อพิจารณาว่า UI/การควบคุมจะแสดงอะไรliveEdgeOffset (หมายเลข): เวลาเล่นที่เร็วที่สุดที่จะได้รับการปฏิบัติเหมือนเล่น "ที่ The Live Edge" สำหรับเนื้อหาสดdebug (บูลีน): เปิดใช้งานโหมดการดีบักสำหรับเอ็นจิ้นการเล่นพื้นฐาน (ปัจจุบัน HLS.JS) และ MUX-embed ให้ข้อมูลเพิ่มเติมในคอนโซล {
"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จัดเตรียมคีย์ API CloudFlare:
R2_CF_API_TOKENหากคุณต้องการพัฒนาสิ่งนี้ในพื้นที่คุณสามารถโคลนและเชื่อมโยงตัวดูดนี้ เพิ่งรู้ ... ตอนนี้มันไม่ใช่เวลาที่ดี
cd ลงใน reponpm install && npm run buildcd ../ (หรือกลับไปที่ใดก็ได้ที่คุณต้องการสร้างแอพทดสอบ)npx create-next-appcd your-next-appnpx link ../next-video (หรือทุกที่ที่คุณโคลน repo นี้)
