Startseite>Programmierbezogen>AI-Quellcode
Herunterladen

next-video

Das nächste Video ist eine React -Komponente zum Hinzufügen von Video zu Ihrer nächsten.js -Anwendung. Es erweitert sowohl das <video> Element als auch Ihre nächste App mit Funktionen für die automatische Videooptimierung.

  • Smart Storage: Speichern Sie große Videodateien außerhalb Ihres Git -Repo
  • Automatisch optimiert : Videodateien optimieren und über CDN zur besseren Wiedergabereistung und -qualität liefern
  • Anpassbare Benutzeroberfläche: Wählen Sie aus Themen oder erstellen Sie Ihre eigenen Spielersteuerungen
  • Poster & Vorschau: Null-Config-Platzhalterbilder und Timeline Hover Thumbnails
  • Breitere Kompatibilität: Verwenden Sie Videos, die nicht von allen Browsern nativ unterstützt werden
  • Analytics integriert (optional): Sehen Sie, wie oft Videos angesehen werden, und verfolgen Sie die Videoleistung
  • AI-Betrieben: Fügen Sie Ihren Videos automatische Bildunterschriften hinzu und verwenden Sie Transkripte 
 import Video from 'next-video' ;
import getStarted from '/videos/get-started.mp4' ;

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

Aufstellen

Automatisches Setup

Rennen Sie in der Wurzel Ihres nächsten Projekts: JS -Projekt: 

npx -y next-video init

Dies wird (mit Aufforderung):

  • Installieren Sie als next-video als Abhängigkeit
  • Aktualisieren Sie Ihre next.config.js -Datei
  • Wenn Sie TypeScript verwenden, fügen Sie Typen für Ihre Videodatei -Imports hinzu
  • Erstellen Sie ein /videos -Verzeichnis in Ihrem Projekt, in dem Sie alle Videoquelldateien einstellen.

Es wird auch Ihre .gitignore -Datei aktualisiert, um Videodateien im Verzeichnis /videos zu ignorieren. Videos, insbesondere eine angemessene Größe, sollten von Git nicht gespeichert/verfolgt werden. Wenn Sie die Originaldateien speichern möchten, können Sie die hinzugefügten Gitignore-Linien entfernen und GIT-LFS installieren.

Fernspeicher und Optimierung

Vercel empfiehlt die Verwendung einer dedizierten Inhaltsplattform für Videos, da Videodateien groß sind und zu einer übermäßigen Gebrauchsbandbreite führen können. Standardmäßig verwendet Next-Video Mux (eine Video-API für Entwickler), die von den Erstellern von Video.js erstellt wird, die beliebte Streaming-Apps wie Patreon und deren Video-Performance-Überwachung für die größten Live-Events der Welt verwendet wird.

  • Melden Sie sich für Mux an
  • Erstellen Sie ein Zugriffstoken
  • Fügen Sie Umgebungsvariablen zu .env.local hinzu (oder so exportieren Sie lokale Env -Variablen) 
 # .env.local
MUX_TOKEN_ID=[YOUR_TOKEN_ID]
MUX_TOKEN_SECRET=[YOUR_TOKEN_SECRET]

Handbuch Setup

Klicken Sie hier, um die manuellen Init -Schritte anzuzeigen.

Installieren Sie das Paket 

 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

Fügen Sie das nächste Video zu Ihrer nächsten.js -Konfiguration hinzu

next.config.js

Wenn Sie CommonJS -Module verwenden: 

 const { withNextVideo } = require ( 'next-video/process' ) ;

/** @type {import('next').NextConfig} */
const nextConfig = { } ; // Your current Next Config object

module . exports = withNextVideo ( nextConfig ) ;

next.config.mjs

Wenn Sie ES -Module verwenden: 

 import { withNextVideo } from 'next-video/process' ;

/** @type {import('next').NextConfig} */
const nextConfig = { } ;

export default withNextVideo ( nextConfig ) ;

Fügen Sie Videoimporttypen zu tsconfig.json hinzu

Dies ist nur erforderlich, wenn Sie TypeScript verwenden, und stellt sicher, dass Ihre Videodateiimporte Sie nicht nach fehlenden Typen anschreiten. video.d.ts sollte in Ihrem Projektroot erstellt werden, wenn Sie npx next-video init ausgeführt haben, wenn nicht, wenn Sie es nicht manuell erstellen können: 

 // video.d.ts
/// <reference types="next-video/video-types/global" />

Fügen Sie diese Datei dann in das Array in tsconfig.json include . 

 {
  // ...
  "include" : [ "video.d.ts" , "next-env.d.ts" , /* ... */ ]
  // ...
}

Verwendung

Lokale Videos (Demo)

Fügen Sie Videos lokal zum Verzeichnis /videos hinzu und führen Sie npx next-video sync aus. Die Videos werden automatisch auf Remote -Speicher hochgeladen und optimiert. Sie werden bemerken /videos/[file-name].json -Dateien werden ebenfalls erstellt. Diese werden verwendet, um Ihre lokalen Videodateien den neuen, abgelegenen Video-Assets abzubilden. Diese JSON -Dateien müssen in Git überprüft werden. 

 npx next-video sync

Sie können dem Dev -Skript auch next-video sync -w hinzufügen, um Videos automatisch zu synchronisieren, während sie zu /videos hinzugefügt werden, während der Dev -Server ausgeführt wird. 

 // package.json
"scripts" : {
  "dev" : "next dev & npx next-video sync -w" ,
} ,

Jetzt können Sie die <Video> -Komponente in Ihrer Anwendung verwenden. Angenommen, Sie haben eine Datei namens awesome-video.mp4 zu /videos hinzugefügt 

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

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

Während ein Video hochgeladen und verarbeitet wird, versucht <Video> , die lokale Datei abzuspielen. Dies geschieht nur während der lokalen Entwicklung, da die lokale Datei niemals in Ihr Git -Repo hochgeladen wird.

Fernvideos

Importieren Sie für Videos, die bereits remote gehostet werden (zum Beispiel auf AWS S3), die Remote -URL und aktualisieren Sie die Seite. Dadurch wird im Ordner /videos eine lokale JSON -Datei erstellt und im Sync -Skript wird das Video hochgeladen. 

 import Video from 'next-video' ;
import awesomeVideo from 'https://www.mydomain.com/remote-video.mp4' ;

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

Wenn das gehostete Video eine einzige Datei wie ein MP4 ist, wird die Datei automatisch für eine bessere Lieferbarkeit und Kompatibilität optimiert.

Remote -Videos mit String -Quell -URL

In einigen Fällen haben Sie möglicherweise nicht die Remote -Video -URLs zum Zeitpunkt des Imports zur Verfügung.

Dies kann durch das Erstellen eines neuen API -Endpunkts in Ihrer nächsten.js -App für /api/video mit dem folgenden Code gelöst werden.

App Router (next.js> = 13) 

 // app/api/video/route.js
export { GET } from 'next-video/request-handler' ;

Seiten Router (next.js) 

 // pages/api/video/[[...handler]].js
export { default } from 'next-video/request-handler' ;

Setzen Sie dann das src -Attribut auf die URL des Remote -Videos, aktualisieren Sie die Seite und das Video beginnt mit der Verarbeitung. 

 import Video from 'next-video' ;

export default function Page ( ) {
  return < Video src = "https://www.mydomain.com/remote-video.mp4" /> ;
}

Das Spieler des Spielers (Demo) ändern

Sie können das Player -Thema ändern, indem Sie die theme -Requisite an die <Video> -Komponente weitergeben.
Siehe Player.Style für weitere Themen. 

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

Nur Spieler (Demo)

Da v1.1.0 Sie die Player -Komponente direkt importieren und ohne Upload- und Verarbeitungsfunktionen verwenden können. 

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

Custom Poster und Blurdataurl

Sie können dem Video ein benutzerdefiniertes Poster und Blurdataurl hinzufügen, indem Sie es als Requisiten übergeben. 

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

Dies ist eine gute Lösung, bietet jedoch nicht die gleiche Optimierung wie das automatische Poster und Blurdataurl durch den Standardanbieter.

Um die gleiche Optimierung zu erhalten, können Sie ein geschlitztes Posterelement verwenden.

Plakat -Bildelement (Demo)

Fügen Sie dem Video ein geschlitztes Poster -Bildelement (wie next/image ) hinzu, indem Sie es als Kind mit einem slot="poster" -attribut übergeben.

Jetzt erhält Ihr Bild alle Vorteile der gebrauchten Bildkomponente und wird gut hinter den VIDEO -Player -Steuerelementen platziert. 

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

Benutzerdefinierter Spieler (Demo)

Sie können den Player anpassen, indem Sie eine benutzerdefinierte Player -Komponente an die as -Prop übergeben.
Die benutzerdefinierte Player -Komponente akzeptiert die folgenden Requisiten:

  • asset : Der verarbeitete Asset enthält nützliche Vermögensmetadaten und Upload -Status.
  • src : Eine String -Video -Quell -URL, wenn das Asset fertig ist.
  • poster : Eine String -Bildquellen -URL, wenn das Asset fertig ist.
  • blurDataURL : Eine String Base64 -Bildquellen -URL, die als Platzhalter verwendet werden kann. 
 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 }
  /> ;
}

Hintergrundvideo (Demo)

Sie können eine <BackgroundVideo> -Komponente verwenden, um ein Video als Hintergrund ohne Player -Steuerelemente hinzuzufügen. Dies spart etwa 50% der JS -Player -Größe und ist für die Verwendung von Hintergrundvideos optimiert.

Die <BackgroundVideo> im vorhergehende Abschnitt haben die <G im vorhergehende Abschnitt gesehen.

Der thumbnailTime -Abfrageparameter im folgenden Beispiel wird verwendet, um ein Posterbild zu generieren und das Bild zum angegebenen Zeitpunkt im Video zu verwischen (beschränkt auf die Verwendung mit dem mux -Anbieter). 

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

Hosting- und Verarbeitungsanbieter

Sie können zwischen verschiedenen Anbietern für die Videoverarbeitung und das Hosting wählen. Der Standardanbieter ist Mux. Um den Anbieter zu ändern, können Sie eine provider in der nächsten Videokonfiguration hinzufügen. Einige Anbieter benötigen eine zusätzliche Konfiguration, die in der providerConfig -Eigenschaft übergeben werden kann. 

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

Unterstützte Anbieter mit ihren erforderlichen Umgebungsvariablen:

Anbieter Umgebung Vars Anbieterkonfiguration Preisverbindung
mux (Standard) MUX_TOKEN_ID
MUX_TOKEN_SECRET		 Preisgestaltung
vercel-blob BLOB_READ_WRITE_TOKEN Preisgestaltung
backblaze BACKBLAZE_ACCESS_KEY_ID
BACKBLAZE_SECRET_ACCESS_KEY		 endpoint
bucket (optional)		 Preisgestaltung
amazon-s3 AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY		 endpoint
bucket (optional)		 Preisgestaltung
cloudflare-r2 R2_ACCESS_KEY_ID
R2_SECRET_ACCESS_KEY
R2_CF_API_TOKEN (optional, wenn bucketUrlPublic festgelegt ist)		 bucket (optional)
bucketUrlPublic (optional, wenn R2_CF_API_TOKEN set)		 Preisgestaltung

Anbieterfunktionssatz

Mux (Standard) Vercel Blob Backblaze Amazon S3 Cloudflare R2
Off-Repo-Speicher ✅ ✅ ✅ ✅ ✅
Lieferung über CDN ✅ ✅ - - - - ✅
BYO -Spieler ✅ ✅ ✅ ✅ ✅
Zum Streaming komprimiert ✅ - - - - - -
Sich an langsame Netzwerke (HLS) anpassen ✅ - - - - - -
Automatisches Platzhalter -Poster ✅ - - - - - -
Timeline Hover Thumbnails ✅ - - - - - -
Streamen Sie ein Quellformat ✅ * * * *
KI -Untertitel & Untertitel ✅ - - - - - -
Videoanalyse ✅ - - - - - -
Preisgestaltung Minutenbasis GB-basiert GB-basiert GB-basiert GB-basiert

*Webkompatible MP4-Dateien, die für Hosting-Anbieter ohne Videoverarbeitung erforderlich sind

Asset Metadata Storage Hooks (Rückrufe)

Standardmäßig wird die Asset -Metadaten in einer JSON -Datei im Verzeichnis /videos gespeichert. Wenn Sie die Metadaten in einer Datenbank oder an anderer Stelle speichern möchten, können Sie die Speicherhaken in einer separaten Konfigurationsdatei als nächstes anpassen.

Die folgende Beispielkonfiguration zeigt die Standardspeicherhaken für den Speicher der JSON -Datei an.

Diese Haken können so angepasst werden, dass Sie Ihren Anforderungen entsprechen, indem Sie den Körper der Funktionen von loadAsset , saveAsset und updateAsset -Funktionen ändern. 

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

Importieren Sie dann die withNextVideo -Funktion in Ihrer next.config.mjs -Datei. 

 // next.config.mjs
import { withNextVideo } from './next-video.mjs' ;

/** @type {import('next').NextConfig} */
const nextConfig = { } ;

export default withNextVideo ( nextConfig ) ;

Importieren Sie zuletzt die GET und POST oder handler -Funktionen in Ihren API -Routen, wie Sie es für richtig halten. Die Handler erwarten eine url -Abfrage oder einen Parameter des Körpers mit der Videoquellen -URL.

Dies sind die minimalsten Beispiele für die Handler. In der Regel würden Sie mehr Fehlerbehebung und Validierung, Authentifizierung und Autorisierung hinzufügen.

App Router (next.js> = 13) 

 // app/api/video/route.js
export { GET , POST } from '@/next-video' ;

Seiten Router (next.js) 

 // pages/api/video/[[...handler]].js
export { handler as default } from '@/next-video' ;

Standardspieler

Der Standardspieler ist mit Medienchrom erstellt.

  • Das Standardthema ist Sutro von Mux.
  • Die Videomotor ändert sich automatisch basierend auf dem Quellformat:
    • Videodateien (wie MP4, MP3, WebM), die schrittweise heruntergeladen werden, werden mit dem nativen <video> -Element abgespielt.
    • Mux-Videos werden mit <mux-video> gespielt.
    • HLS-Streams werden mit <hls-video> gespielt.
    • Dash-Streams werden mit <dash-video> gespielt.

Requisiten

Die <Video> -Komponente akzeptiert alle Requisiten des <video> -Elements und die folgenden zusätzlichen Requisiten:

  • src (Asset | String): Das Video -Asset -Objekt (Import) oder Quell -URL.
  • poster (staticimagedata | String): Ein Platzhalterbild für das Video. (Automatisch erzeugt für Mux -Videos)
  • blurDataURL (String): Eine Basis64 -Bildquellen -URL, die als Platzhalter verwendet werden kann. (Automatisch erzeugt für Mux -Videos)
  • theme (React -Komponente): Die Player -Themenkomponente. Siehe Player.Style für weitere Themen.
  • as (React -Komponente): Eine benutzerdefinierte Player -Komponente. Siehe benutzerdefinierten Spieler.
  • transform (Funktion): Eine benutzerdefinierte Funktion zur Transformation des Asset -Objekts (SRC und Poster).
  • loader (Funktion): Eine benutzerdefinierte Funktion, die zum Auflösen von String -basierten Video -URLs (nicht importe) verwendet wird.

Mux Video -Requisiten

Die <Video> -Komponente mit einer Mux -Videoquelle akzeptiert die folgenden zusätzlichen Requisiten:

  • startTime (Nummer): Die Startzeit des Videos in Sekunden.
  • streamType ("On-Demand" | "Live"): Der Stream-Typ des Videos. Standard ist "On-Demand".
  • customDomain (Zeichenfolge): Zuweist eine benutzerdefinierte Domäne, die für MUX -Video verwendet werden soll.
  • beaconCollectionDomain (String): Weisen eine benutzerdefinierte Domäne zu, die für die MUX -Datenerfassung verwendet werden soll. HINWEIS: Muss vor der Wiedergabe festgelegt werden, um die MUX -Datenüberwachung anzuwenden.
  • envKey (String): Dies ist der Umgebungsschlüssel für MUX -Daten. Wenn Sie MUX -Video verwenden, ist dies automatisch für Sie festgelegt. Wenn Sie einen anderen Anbieter verwenden, können Sie dies auf Ihren eigenen Schlüssel setzen.
  • disableTracking (Boolean): Deaktiviert die MUX -Datenverfolgung der Video -Wiedergabe.
  • disableCookies (Boolean): Deaktiviert Cookies, die von MUX -Daten verwendet werden.
  • preferPlayback ("MSE" | "Native"): Geben Sie an, ob <mux-video> versuchen sollte, Medienquellenerweiterung oder native Wiedergabe (falls verfügbar) zu verwenden. Wenn kein Wert bereitgestellt wird, wählt <mux-video> basierend auf dem, was für Inhalt und Wiedergabeumgebung als optimal eingestuft wird.
  • maxResolution ("720p" | "1080p" | "1440p" | "2160p"): Geben Sie die maximale Auflösung an, die Sie für dieses Video geliefert haben möchten.
  • minResolution ("480p" | "540p" | "720p" | "1080p" | "1440p" | "2160p"): Geben Sie die Mindestauflösung an, die Sie für dieses Video geliefert haben möchten.
  • programStartTime (Nummer): Wenden Sie PDT-basierte Instantclips auf den Beginn des Medienstroms an.
  • programEndTime (Nummer): Wenden Sie PDT-basierte Instantclips auf das Ende des Medienstroms an.
  • assetStartTime (Nummer): Timeline-basierte Instantclips mit Medien anwenden auf den Beginn des Medienstroms.
  • assetEndTime (Nummer): Timeline-basierte Instantclips auf Medien anwenden.
  • renditionOrder (String): Ändern Sie die Reihenfolge, in der die Wiederholungen in der SRC -Wiedergabeliste bereitgestellt werden. Kann sich auf die anfänglichen Segmentlasten auswirken. Derzeit unterstützen Sie "Desc" nur für absteigende Reihenfolge.
  • metadataVideoId (String): Dies ist eine beliebige ID, die an MUX -Daten gesendet wird, die auf einen Datensatz dieses Videos in Ihrer Datenbank zurückgegeben werden sollten.
  • metadataTitle (String): Dies ist ein willkürlicher Titel für Ihr Video, das als Metadaten in MUX -Daten übergeben wird. Wenn Sie einen Titel hinzufügen, erhalten Sie einen nützlichen Kontext in Ihrem Mux -Daten Dashboard. (optional, aber ermutigt)
  • metadataViewerUserId (String): Wenn Sie einen angemeldeten Benutzer haben, sollte dies ein anonymisierter ID-Wert sein, der an den Benutzer in Ihrer Datenbank zurückbleibt, der an MUX-Daten gesendet wird. Achten Sie darauf, persönliche identifizierbare Informationen wie Namen, Benutzernamen oder E -Mail -Adressen nicht aufzudecken. (optional, aber ermutigt)
  • metadata* (String): Diese Metadaten* -Syntax kann verwendet werden, um beliebige mux -Datenmetadatenfelder zu bestehen.
  • playbackToken (String): Das Wiedergabentuch für die Unterzeichnung der src -URL.
  • thumbnailToken (String): Das Token zur Unterzeichnung der poster -URL.
  • storyboardToken (String): Das Token für die Unterzeichnung der URL der Storyboard.
  • drmToken (String): Das Token für die Unterzeichnung der DRM -Lizenz und die damit verbundenen URLs.
  • targetLiveWindow (Nummer): Ein Offset, der den suchbaren Bereich für Live -Inhalte darstellt, in dem Infinity bedeutet, dass der gesamte Live -Inhalt suchbar ist (auch bekannt als "Standard -DVR"). Verwendet zusammen mit streamType , um zu bestimmen, welche Benutzeroberflächen/Kontrollen angezeigt werden sollen.
  • liveEdgeOffset (Nummer): Die früheste Wiedergabezeit, die als "am Live Edge" für Live -Inhalte behandelt wird.
  • debug (Boolean): Ermöglicht den Debug-Modus für die zugrunde liegende Wiedergabetaste (derzeit HLS.JS) und MUX-EMBE, und liefert zusätzliche Informationen in der Konsole.

Erforderliche Berechtigungen für Amazon S3

Wenn Sie Amazon S3 als Anbieter verwenden, müssen Sie einen neuen IAM -Benutzer mit den folgenden Berechtigungen erstellen: 
{
  "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 Bucket öffentlicher Zugriff

Standardmäßig sind Cloudflare R2 -Eimer nicht öffentlich zugänglich. Um den öffentlichen Zugang zu ermöglichen, müssen Sie eine der folgenden Sicherheiten sicherstellen:

  1. Konfigurieren Sie den Eimer für den öffentlichen Zugriff:

    • Geben Sie in der Anbieterkonfiguration einen bucket an und stellen Sie sicher, dass er für den öffentlichen Zugriff konfiguriert ist
    • Geben Sie die öffentliche URL in der Anbieterkonfiguration unter dem bucketUrlPublic -Schlüssel an
    • Ausführliche Anweisungen finden Sie in der Cloudflare-Dokumentation: https://developers.cloudflare.com/r2/buckets/public-buckets/

  2. Geben Sie einen Cloudflare -API -Schlüssel an:

    • Sie können einen CloudFlare -API -Schlüssel mit R2 Admin -Lesen und Schreiben von Berechtigungen mit der Umgebungsvariablen angeben: R2_CF_API_TOKEN
    • Mit diesem API -Schlüssel kann der Anbieter den öffentlichen Zugriff auf den Eimer ermöglichen und die öffentliche URL mithilfe der Cloudflare -API abrufen
    • Sie müssen keinen Eimer manuell erstellen
    • Um einen API-Token zu erstellen

Roadmap

v0

  • Automatische Videooptimierung
  • Lieferung über eine CDN
  • Automatisch lokale Quelldateien hochladen und verarbeiten
  • Verarbeiten Sie automatisch remote gehostete Quelldateien

v1

  • Anpassbarer Spieler
  • Anschlüsse für zusätzliche Videodienste
  • KI -Bildunterschriften

Probieren Sie es lokal aus

Wenn Sie sich lokal auf diesem Ding entwickeln möchten, können Sie diesen Trottel klonen und verknüpfen. Ich weiß nur ... es ist momentan keine tolle Zeit.

  1. Klonen Sie dieses Repo
  2. cd in das Repo
  3. npm install && npm run build
  4. cd ../ (oder zurück zu wo Sie eine Test -App erstellen möchten)
  5. npx create-next-app
  6. cd your-next-app
  7. npx link ../next-video (oder wo Sie dieses Repo kloniert haben)
Expandieren
Zusätzliche Informationen
Ähnliche Anwendungen
Empfohlen für Sie
Ähnliche Nachrichten Alle