الصفحة الرئيسية>المتعلقة بالبرمجة>كود الذكاء الاصطناعي
تنزيل

next-video

الفيديو التالي هو مكون رد فعل لإضافة الفيديو إلى تطبيق Next.js الخاص بك. يمتد كل من عنصر <video> وتطبيقك التالي مع ميزات لتحسين الفيديو التلقائي.

  • التخزين الذكي: قم بتخزين ملفات فيديو كبيرة خارج ريبو git الخاص بك
  • تحسين تلقائي : تحسين ملفات الفيديو والتسليم عبر CDN لتحسين أداء التشغيل وجودة التشغيل
  • واجهة المستخدم القابلة للتخصيص: اختر من الموضوعات أو بناء عناصر تحكم اللاعب الخاصة بك
  • الملصقات والمعاينات: صور صفر نائبة وأحوم الجدول الزمني المصغرة
  • التوافق الأوسع: استخدم مقاطع الفيديو التي لا تدعمها جميع المتصفحات أصليًا
  • Analytics مدمج (اختياري): انظر عدد المرات التي يتم فيها مشاهدة مقاطع الفيديو وتتبع أداء الفيديو
  • من الذكاء الاصطناعي: أضف التسميات التوضيحية التي تم إنشاؤها تلقائيًا إلى مقاطع الفيديو الخاصة بك واستخدم النصوص 
 import Video from 'next-video' ;
import getStarted from '/videos/get-started.mp4' ;

export default function Page ( ) {
  return < Video src = { getStarted } /> ;
}

يثبت

الإعداد التلقائي

في جذر مشروع Next.js الخاص بك ، قم بتشغيل: 

npx -y next-video init

هذا سوف (مع المطالبة):

  • تثبيت next-video كاعتماد
  • قم بتحديث ملف next.config.js الخاص بك
  • إذا كنت تستخدم TypeScript ، فأضف أنواعًا لاستيراد ملفات الفيديو الخاصة بك
  • قم بإنشاء دليل A /videos في مشروعك وهو المكان الذي ستضع فيه جميع ملفات مصدر الفيديو.

كما سيتم تحديث ملف .gitignore الخاص بك لتجاهل ملفات الفيديو في دليل /videos . لا ينبغي تخزين/تعقب مقاطع الفيديو ، لا سيما الحجم المعقول ، بواسطة GIT. بدلاً من ذلك ، إذا كنت ترغب في تخزين الملفات الأصلية ، فيمكنك إزالة خطوط Gitignore المضافة وتثبيت Git-LFS.

التخزين والتحسين عن بعد

توصي Vercel باستخدام منصة محتوى مخصصة للفيديو لأن ملفات الفيديو كبيرة ويمكن أن تؤدي إلى استخدام النطاق الترددي المفرط. بشكل افتراضي ، يستخدم Video Next Mux (واجهة برمجة تطبيقات الفيديو للمطورين) ، الذي تم تصميمه من قبل منشئو Video.js ، وتشغيل تطبيقات البث الشعبية مثل Patreon ، والتي يتم استخدام مراقبة أداء الفيديو في أكبر أحداث حية في العالم.

  • اشترك في MUX
  • إنشاء رمز الوصول
  • أضف متغيرات البيئة إلى .env.local (أو أنت تصدير متغيرات ENV المحلية) 
 # .env.local
MUX_TOKEN_ID=[YOUR_TOKEN_ID]
MUX_TOKEN_SECRET=[YOUR_TOKEN_SECRET]

الإعداد اليدوي

انقر لرؤية خطوات init اليدوية.

تثبيت الحزمة 

 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.js الخاص بك

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. يتم إنشاء ملفات 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 to /videos 

 import Video from 'next-video' ;
import awesomeVideo from '/videos/awesome-video.mp4' ;

export default function Page ( ) {
  return < Video src = { awesomeVideo } /> ;
}

أثناء تحميل مقطع الفيديو ومعالجته ، سيحاول <Video> تشغيل الملف المحلي. يحدث هذا فقط أثناء التطوير المحلي لأن الملف المحلي لا يتم تحميله أبدًا على ريبو GIT الخاص بك.

مقاطع الفيديو البعيدة

بالنسبة لمقاطع الفيديو التي تم استضافتها بالفعل عن بُعد (على سبيل المثال على AWS S3) ، استيراد عنوان URL عن بُعد وتحديث الصفحة. هذا ينشئ ملف JSON محلي في مجلد /videos وسيبدأ البرنامج النصي Sync في تحميل الفيديو. 

 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 لمصدر السلسلة

في بعض الحالات ، قد لا يكون لديك عنوان URL للفيديو عن بُعد متاح في وقت الاستيراد.

يمكن حل ذلك عن طريق إنشاء نقطة نهاية API جديدة في تطبيق NEXT.JS الخاص بـ /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 إلى مكون <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..."
  /> ;
}

ملصق مخصص و plurdataurl

يمكنك إضافة ملصق مخصص و plurdataurl إلى الفيديو عن طريق تمريرها كدعائم. 

 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 } 
  /> ;
}

هذا حل جيد ولكنه لن يوفر نفس المستوى من التحسين مثل الملصق التلقائي و plurdataurl من قبل المزود الافتراضي.

للحصول على نفس المستوى من التحسين ، يمكنك استخدام عنصر الملصقات المحفوظة.

عنصر صورة الملصقات المحاصرة (العرض التوضيحي)

أضف عنصر صورة ملصق مشقوق (مثل 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 Prop.
يقبل مكون اللاعب المخصص الدعائم التالية:

  • 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> لإضافة مقطع فيديو كخلفية بدون عناصر تحكم لاعب. هذا يوفر حوالي 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. لتغيير الموفر ، يمكنك إضافة خيار provider في تكوين Video التالي. يتطلب بعض مقدمي الخدمات تكوينًا إضافيًا يمكن تمريره في خاصية 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_ID
MUX_TOKEN_SECRET		 التسعير
vercel-blob BLOB_READ_WRITE_TOKEN التسعير
backblaze BACKBLAZE_ACCESS_KEY_ID
BACKBLAZE_SECRET_ACCESS_KEY		 endpoint
bucket (اختياري)		 التسعير
amazon-s3 AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY		 endpoint
bucket (اختياري)		 التسعير
cloudflare-r2 R2_ACCESS_KEY_ID
R2_SECRET_ACCESS_KEY
R2_CF_API_TOKEN (اختياري عند مجموعة bucketUrlPublic )		 bucket (اختياري)
bucketUrlPublic (اختياري عندما يكون R2_CF_API_TOKEN SET)		 التسعير

مجموعة ميزة مزود

MUX (افتراضي) vercel blob backblaze Amazon S3 Cloudflare R2
تخزين خارج ريبو ✅ ✅ ✅ ✅ ✅
التسليم عبر CDN ✅ ✅ - - ✅
لاعب BYO ✅ ✅ ✅ ✅ ✅
مضغوطة للبث ✅ - - -
التكيف مع الشبكات البطيئة (HLS) ✅ - - -
ملصق العنصر النائب التلقائي ✅ - - -
الجدول الزمني تحوم الصور المصغرة ✅ - - -
دفق أي تنسيق مصدر ✅ * * * *
Captions و Subtitles AI ✅ - - -
تحليلات الفيديو ✅ - - -
التسعير دقائق تعتمد على GB تعتمد على GB تعتمد على GB تعتمد على GB

*ملفات MP4 المتوافقة مع الويب المطلوبة لاستضافة مقدمي الخدمات دون معالجة الفيديو

السنانير تخزين بيانات تعريف الأصول (عمليات الاسترجاعات)

بشكل افتراضي ، يتم تخزين بيانات تعريف الأصول في ملف JSON في دليل /videos . إذا كنت ترغب في تخزين البيانات الوصفية في قاعدة بيانات أو في مكان آخر ، فيمكنك تخصيص خطافات التخزين في ملف تكوين Video التالي.

يوضح مثال CONFIG أدناه خطافات التخزين الافتراضية لتخزين ملف 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 and POST أو handler في طرق API الخاصة بك كما تراه مناسبًا. يتوقع المعالجون استعلام 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' ;

لاعب افتراضي

تم تصميم اللاعب الافتراضي باستخدام Chrome Media.

  • الموضوع الافتراضي هو Sutro by Mux.
  • يتغير محرك الفيديو تلقائيًا بناءً على تنسيق المصدر:
    • يتم تشغيل ملفات الفيديو (مثل MP4 ، MP3 ، WebM) التي يتم تنزيلها تدريجياً مع عنصر <video> الأصلي.
    • يتم تشغيل مقاطع فيديو Mux مع <mux-video> .
    • يتم تشغيل تدفقات HLS مع <hls-video> .
    • يتم لعب تدفقات DASH مع <dash-video> .

الدعائم

يقبل مكون <Video> جميع الدعائم لعنصر <video> والدعائم الإضافية التالية:

  • src (Asset | String): كائن أصول الفيديو (استيراد) أو عنوان URL المصدر.
  • poster (StaticImagedata | سلسلة): صورة عنصر نائب للفيديو. (تم إنشاؤه التلقائي لمقاطع فيديو MUX)
  • blurDataURL (سلسلة): عنوان URL لمصدر الصورة BASE64 يمكن استخدامه كعنصر نائب. (تم إنشاؤه التلقائي لمقاطع فيديو MUX)
  • theme (مكون رد الفعل): مكون موضوع اللاعب. انظر Player.style لمزيد من الموضوعات.
  • as (مكون React): مكون لاعب مخصص. انظر لاعب مخصص.
  • transform (وظيفة): وظيفة مخصصة لتحويل كائن الأصول (SRC والملصق).
  • loader (وظيفة): وظيفة مخصصة تستخدم لحل عناوين URL للفيديو القائمة على السلسلة (وليس الواردات).

Mux Video Props

يقبل المكون <Video> مع مصدر فيديو MUX الدعائم الإضافية التالية:

  • startTime (رقم): وقت بدء الفيديو في ثوان.
  • streamType ("عند الطلب" | "Live"): نوع الدفق من الفيديو. الافتراضي هو "الطلب".
  • customDomain (سلسلة): يعين مجال مخصص لاستخدامه في فيديو MUX.
  • beaconCollectionDomain (سلسلة): يعين مجال مخصص لاستخدامه في جمع بيانات MUX. ملاحظة: يجب تعيينها قبل التشغيل لتطبيقها على مراقبة بيانات MUX.
  • envKey (سلسلة): هذا هو مفتاح البيئة لبيانات MUX. إذا كنت تستخدم Mux Video ، فسيتم تعيينك تلقائيًا لك. إذا كنت تستخدم مزودًا مختلفًا ، فيمكنك تعيين هذا على المفتاح الخاص بك.
  • disableTracking (Boolean): تعطيل تتبع بيانات MUX لتشغيل الفيديو.
  • disableCookies (منطقية): تعطيل ملفات تعريف الارتباط التي تستخدمها بيانات MUX.
  • preferPlayback ("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 (سلسلة): هذا هو معرف تعسفي يتم إرساله إلى بيانات MUX التي يجب أن تعيد إلى سجل هذا الفيديو في قاعدة البيانات الخاصة بك.
  • metadataTitle (سلسلة): هذا عنوان تعسفي للفيديو الخاص بك سيتم تمريره كبيانات في بيانات MUX. ستمنحك إضافة العنوان سياقًا مفيدًا في لوحة معلومات بيانات MUX الخاصة بك. (اختياري ، ولكن مشجع)
  • metadataViewerUserId (سلسلة): إذا كان لديك مستخدم مسجل ، فيجب أن تكون هذه قيمة معرف مجهولة المصدر تعود إلى المستخدم في قاعدة البيانات الخاصة بك والتي سيتم إرسالها إلى بيانات MUX. احرص على عدم فضح معلومات التعريف الشخصية مثل الأسماء أو أسماء المستخدمين أو عناوين البريد الإلكتروني. (اختياري ، ولكن مشجع)
  • metadata* (سلسلة): يمكن استخدام بناء الجماع هذا لتمرير أي حقول بيانات التعريف التعسفية لبيانات MUX.
  • playbackToken (سلسلة): رمز التشغيل لتوقيع عنوان URL src .
  • thumbnailToken (سلسلة): الرمز المميز لتوقيع عنوان URL poster .
  • storyboardToken (سلسلة): الرمز المميز لتوقيع عنوان URL على لوحة العمل.
  • drmToken (سلسلة): الرمز المميز لتوقيع ترخيص DRM وعناوين URL ذات الصلة.
  • targetLiveWindow (رقم): إزاحة تمثل النطاق الذي يمكن البحث عنه للمحتوى المباشر ، حيث يعني Infinity أن المحتوى المباشر بالكامل يمكن البحث عنه (ويعرف أيضًا باسم "DVR القياسي"). تستخدم جنبا إلى جنب مع streamType لتحديد واجهة المستخدم/عناصر التحكم لإظهارها.
  • liveEdgeOffset (رقم): أقدم وقت تشغيل سيعامل على أنه يلعب "في الحافة المباشرة" للمحتوى المباشر.
  • debug (Boolean): يمكّن وضع التصحيح لمحرك التشغيل الأساسي (حاليًا HLS.JS) و MUX-EMBED ، مما يوفر معلومات إضافية في وحدة التحكم.

أذونات مطلوبة لـ Amazon S3

إذا كنت تستخدم Amazon S3 كمزود ، فستحتاج إلى إنشاء مستخدم IAM جديد مع الأذونات التالية: 
{
  "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-* "
    }
  ]
}

Cloudflare R2 دلو الوصول العام

بشكل افتراضي ، لا يمكن الوصول إلى دلاء CloudFlare R2. لتمكين وصول الجمهور ، يجب عليك التأكد من واحد مما يلي:

  1. تكوين دلو للوصول العام:

    • قدم اسم bucket في تكوين المزود وتأكد من تكوينه للوصول العام
    • حدد عنوان URL العام في تكوين المزود تحت مفتاح bucketUrlPublic
    • للحصول على إرشادات مفصلة ، راجع وثائق CloudFlare: https://developers.cloudflare.com/r2/buckets/public-buckets/

  2. توفير مفتاح API CloudFlare:

    • يمكنك تحديد مفتاح API CloudFlare مع أذونات القراءة والكتابة R2 Admin باستخدام متغير البيئة: R2_CF_API_TOKEN
    • سيسمح مفتاح API هذا للمزود بتمكين الوصول العام للدلو واسترداد عنوان URL العام باستخدام CloudFlare API
    • لا تحتاج إلى إنشاء دلو يدويًا
    • لإنشاء رمز API ، تفضل بزيارة: https://dash.cloudflare.com/؟to=/:Account/r2/api-tokens

خريطة الطريق

V0

  • تحسين الفيديو التلقائي
  • التسليم عبر CDN
  • تحميل ملفات المصدر المحلية ومعالجة ملفات المصدر المحلي تلقائيًا
  • معالجة ملفات المصدر المستضافة عن بُعد تلقائيًا

V1

  • لاعب قابل للتخصيص
  • موصلات لخدمات الفيديو الإضافية
  • التسميات التوضيحية الذكاء الاصطناعي

تجربته محليًا

إذا كنت ترغب في تطوير هذا الشيء محليًا ، فيمكنك استنساخ وربط هذا المصاص. فقط تعرف ... إنه ليس وقتًا رائعًا الآن.

  1. استنساخ هذا الريبو
  2. cd في الريبو
  3. npm install && npm run build
  4. cd ../ (أو العودة إلى أي مكان تريد إنشاء تطبيق اختبار)
  5. npx create-next-app
  6. cd your-next-app
  7. npx link ../next-video
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل