• Stars
    star
    757
  • Rank 59,989 (Top 2 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 1 year ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

The easiest way to add video in your Nextjs app.

next-video

Next video is 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.

  • Smart storage: Store large video files outside of your git repo
  • Auto optimized: Automatically optimize video files and deliver via CDN for better playback performance and quality
  • Customizable UI: Choose from themes or build your own player controls
  • Posters & Previews: Zero-config placeholder images and timeline hover thumbnails
  • Wider compatibility: Use videos that arenโ€™t supported natively by all browsers
  • Analytics built-in (optional): See how often videos get watched and track video performance
  • AI-powered: Whisper captions coming soon...
import Video from 'next-video';
import myVideo from '/videos/my-video.mp4';

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

Setup

Install the package

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

Run the init wizard

npx next-video init

This will (with prompting):

  • install next-video as a dependency
  • update your next.config.js file
  • if you're using TypeScript, add types for your video file imports
  • create a /videos directory in your project which is where you will put all video source files.

It will also add a .gitignore file to the /videos directory that ignores video files. Videos, particularly any of reasonable size, shouldn't be stored/tracked by git. Alternatively, if you'd like to store the original files you can remove the added gitignore lines and install git-lfs.

Remote storage and optimization

Vercel recommends using a dedicated content platform for video because video files are large and can lead to excessive bandwidth usage. By default, next-video uses Mux, which is built by the the creators of Video.js, powers popular streaming apps like Patreon, and whose video performance monitoring is used on the largest live events in the world.

# .env.local
MUX_TOKEN_ID=[YOUR_TOKEN_ID]
MUX_TOKEN_SECRET=[YOUR_TOKEN_SECRET]

OPTIONAL Manual Setup

If you choose to do any of the init steps manually.

Add Next Video to next.config.js

/** @type {import('next').NextConfig} */
const { withNextVideo } = require('next-video/process');

const nextConfig = {}; // Your current Next Config object

module.exports = withNextVideo(nextConfig);

Add video import types to tsconfig.json

This is only required if you're using TypeScript, and makes sure your video file imports don't yell at you for missing types. video.d.ts should have been created in your project root when you ran npx next-video init, if not you can create it manually:

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

Then add that file to the include array in tsconfig.json.

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

Usage

Local videos

Add videos locally to the /videos directory then run npx next-video sync. The videos will be automatically uploaded to remote storage and optimized. You'll notice /videos/[file-name].json files are also created. These are used to map your local video files to the new, remote-hosted video assets. These json files must be checked into git.

npx next-video sync

You can also add next-video sync -w to the dev script to automatically sync videos as they're added to /videos while the dev server is running.

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

Now you can use the <Video> component in your application. Let's say you've added a file called 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} />;
}

While a video is being uploaded and processed, <Video> will attempt to play the local file. This only happens during local development because the local file is never uploaded to your git repo.

Remote videos

For videos that are already hosted remotely (for example on AWS S3), import the remote URL and refresh the page. This creates a local JSON file in the /videos folder and the sync script will start uploading the video.

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

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

If the hosted video is a single file like an MP4, the file will be automatically optimized for better deliverability and compatibility.

Alternative

In some cases you might not have the remote video URL's available at the time of import.

That can be solved by creating a new API endpoint in your Next.js app for /api/video with the following code.

App router (Next.js >=13)

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

Pages router (Next.js)

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

Then set the src attribute to the URL of the remote video, refresh the page and the video will start processing.

import Video from 'next-video';

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

Custom Player

You can customize the player by passing a custom player component to the as prop.
The custom player component accepts the following props:

  • asset: The asset that is processed, contains useful asset metadata and upload status.
  • src: A string video source URL if the asset is ready.
  • poster: A string image source URL if the asset is ready.
  • blurDataURL: A string base64 image source URL that can be used as a placeholder.
import Video from 'next-video';
import { ReactPlayerAsVideo } from './player';
import awesomeVideo from '/videos/awesome-video.mp4';

export default function Page() {
  return <Video as={ReactPlayerAsVideo} src={awesomeVideo} />;
}
// player.js
import ReactPlayer from 'react-player';

export function ReactPlayerAsVideo(props) {
  let { asset, src, poster, blurDataURL, ...rest } = props;
  let config = { file: { attributes: { poster } } };

  return <ReactPlayer url={src} config={config} {...rest} />;
}

Hosting & Processing Providers

You can choose between different providers for video processing and hosting. The default provider is Mux. To change the provider you can add a provider option in the next-video config. Some providers require additional configuration which can be passed in the providerConfig property.

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

Supported providers with their required environment variables:

Provider Environment vars Provider config Pricing link
mux (default) MUX_TOKEN_ID
MUX_TOKEN_SECRET
Pricing
vercel-blob BLOB_READ_WRITE_TOKEN Pricing
backblaze BACKBLAZE_ACCESS_KEY_ID
BACKBLAZE_SECRET_ACCESS_KEY
endpoint
bucket (optional)
Pricing
amazon-s3 AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY
endpoint
bucket (optional)
Pricing
More coming...

Provider feature set

Mux (default) Vercel Blob Backblaze Amazon S3
Off-repo storage โœ… โœ… โœ… โœ…
Delivery via CDN โœ… โœ… - -
BYO player โœ… โœ… โœ… โœ…
Compressed for streaming โœ… - - -
Adapt to slow networks (HLS) โœ… - - -
Automatic placeholder poster โœ… - - -
Timeline hover thumbnails โœ… - - -
Stream any soure format โœ… - - -
AI captions & subtitles โœ… - - -
Video analytics โœ… - - -
Pricing Minutes-based GB-based GB-based GB-based

Required Permissions for Amazon S3

If you're using Amazon S3 as the provider, you'll need to create a new IAM user with the following permissions:

{
  "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-*"
    }
  ]
}

Roadmap

v0

  • Automatic video optimization
  • Delivery via a CDN
  • Automatically upload and process local source files
  • Automatically process remote hosted source files

v1

  • Customizable player
  • Connectors for additional video services
  • AI captions

Trying it out locally

If you want to develop on this thing locally, you can clone and link this sucker. Just know...it's not a great time right now.

  1. Clone this repo
  2. cd into the repo
  3. npm install && npm run build
  4. cd ../ (or back to wherever you want to create a test app)
  5. npx create-next-app
  6. cd your-next-app
  7. npx link ../next-video (or wherever you cloned this repo)

More Repositories

1

media-chrome

Custom elements (web components) for making audio and video player controls that look great in your website or app.
TypeScript
1,215
star
2

stream.new

The repo for https://stream.new
TypeScript
499
star
3

upchunk

Uploads Chunks! Takes big files, splits them up, then uploads each one with care (and PUT requests).
TypeScript
335
star
4

meet

A meeting app built on Mux Real-Time Video.
TypeScript
278
star
5

elements

Custom elements for working with media in the browser that Just Workโ„ข
TypeScript
235
star
6

certificate-expiry-monitor

Utility that exposes the expiry of TLS certificates as Prometheus metrics
Go
160
star
7

mux-node-sdk

Official Mux API wrapper for Node projects, supporting both Mux Data and Mux Video.
TypeScript
152
star
8

video-course-starter-kit

A starter template to help create a video course with Mux + Next.js
TypeScript
131
star
9

player.style

A fresh collection of media player themes for every use case!
HTML
125
star
10

examples

Example playground!
TypeScript
110
star
11

mux-go

Official Mux API wrapper for golang projects, supporting both Mux Data and Mux Video.
Go
89
star
12

webrtc-rebroadcaster

A "simple" webrtc rebroadcaster using FFmpeg
C++
88
star
13

mux-elixir

Official Mux API wrapper for Elixir projects, supporting both Mux Data and Mux Video.
Elixir
77
star
14

chromium_broadcast_demo

A simple demo showing how to use chromium as a WebRTC rendering engine
HTML
67
star
15

hlstools

Tools for analyzing and processing hls streams
C++
65
star
16

mux-ruby

Official Mux API wrapper for ruby projects, supporting both Mux Data and Mux Video.
Ruby
50
star
17

mux-python

Official Mux API wrapper for python projects, supporting both Mux Data and Mux Video.
Python
47
star
18

mux-stats-sdk-avplayer

Mux integration with `AVPlayer` for iOS Native Applications
Objective-C
43
star
19

mux-php

Official Mux API wrapper for PHP projects, supporting both Mux Data and Mux Video.
PHP
38
star
20

hls-video-element

A custom element (web component) for playing HTTP Live Streaming (HLS) videos.
JavaScript
38
star
21

youtube-video-element

A custom element (web component) for the YouTube player.
JavaScript
33
star
22

videojs-mux-kit

JavaScript
33
star
23

vmaf_analyzer

Estimates the average delivered VMAF for hls manifests
Go
32
star
24

example-ios-live-streaming

An example app for live streaming from an iOS device using the Mux live streaming service.
Swift
30
star
25

castable-video

Cast your video element to the big screen with ease!
JavaScript
25
star
26

strapi-plugin-mux-video-uploader

A Strapi plugin for managing uploads to Mux.
TypeScript
23
star
27

example-android-live-streaming

C++
23
star
28

videojs-super-resolution

Super Resolution for Video JS
JavaScript
21
star
29

truckload

Migrate your videos to any supported service
TypeScript
19
star
30

mux-stats-sdk-exoplayer

Monitors an ExoPlayer instance and reports player analytics to Mux Data
Java
19
star
31

mux-stats-sdk-react-native-video

JavaScript
17
star
32

stats-sdk-objc

Mux Stats SDK for iOS and tvOS
Objective-C
16
star
33

media-playlist

A custom element for playing through a set of audio and video elements.
JavaScript
15
star
34

bot-watcher

Example of using headless Chrome to test different aspects of a player
JavaScript
15
star
35

blurhash

Using woltapp/blurhash to make nice placeholders for Mux videos. Works nicely with Mux Player.
TypeScript
14
star
36

media-elements

A collection of HTMLMediaElement compatible elements and add-ons
JavaScript
13
star
37

cli

Command Mux from the command line like a boss.
TypeScript
11
star
38

media-group

๐Ÿ‘ฏโ€โ™€๏ธ mediagroup / MediaController which can be used to sync and control multiple audio / video elements
TypeScript
11
star
39

media-offset

โœ‚๏ธ Configures a media element to lock playback to a defined segment of the media
JavaScript
11
star
40

trivia.dev

IT'S TRIVIA! FOR DEVS! GO!
JavaScript
10
star
41

chromium_livestreamer

Take web pages and turn them into a live streams
Shell
8
star
42

custom-media-element

A custom element for extending the native media elements (<audio> or <video>)
JavaScript
8
star
43

chunked-transfer-demo

Webserver that demonstrates delivery of HLS media with HTTP chunked transfer encoding
Go
7
star
44

custom-video-element

A custom element for extending the native video element.
JavaScript
7
star
45

mux-csharp

C#
7
star
46

hls-subtitles-vexillographer

A simple proxy service which changes subtitles flags in HLS manifests.
Ruby
6
star
47

swift-upload-sdk

Mux's Video Upload SDK for iOS. The Swift equivalent of UpChunk.
Swift
6
star
48

shaka-video-element

A custom element (web component) for Shaka Player.
JavaScript
6
star
49

mux-player-swift

Use Mux Player Swift to stream and monitor video from Mux with AVKit and AVFoundation
Swift
6
star
50

android-upload-sdk

Mux's Video Upload SDK for Android. The Android equivalent of UpChunk.
Kotlin
5
star
51

chromecast-mux

JavaScript
5
star
52

roku-mux

Brightscript
5
star
53

mux-stats-sdk-media3

Mux Data SDK for AndroidX Media3
Kotlin
5
star
54

web-player-framework

JavaScript
5
star
55

mux-studio-demo

TypeScript
4
star
56

jamstack-conf-2020-workshop

JavaScript
4
star
57

next-video-site

TypeScript
4
star
58

mux-stats-google-ima

Swift
4
star
59

mux-protobuf

Mux Protobuf definition files
3
star
60

mux-android-distribution

A Gradle Plugin for distributing android builds, with support for Artifactory
Groovy
3
star
61

mux-player-android

Java
3
star
62

packaging_examples

Samples files packaged by mux
3
star
63

spaces-livekit-broadcast-layouts

TypeScript
3
star
64

mux-stats-sdk-theoplayer-ios

Mux Data Integration for THEOplayer's iOS SDK
Swift
2
star
65

meetup_colorspace_demo

HTML
2
star
66

mux-stats-sdk-theoplayer-android

Java
2
star
67

protogen

Protobuf Specification Generator written in Go
Go
2
star
68

media-tracks

Polyfill audio and video tracks with renditions.
TypeScript
2
star
69

video-archivist

A helpful Github bot that listens for links to videos in new issues, then asks maintainers if they want to archive it so it doesn't ever go away.
TypeScript
2
star
70

mux-java

Java
2
star
71

blurup

Generate a blurry image placeholder for a Mux video.
HTML
2
star
72

nextjs-backend-example

JavaScript
2
star
73

kaper

Kapacitor client written in Elixir.
Elixir
1
star
74

mux-stats-sdk-mediaplayer

Java
1
star
75

stackpath-urlauth

Golang library to sign Stackpath CDN URLs
Go
1
star
76

stats-sdk-exoplayer

Mux Stats SDK for ExoPlayer
Java
1
star
77

media-woofer

Kick up the bass on your media element!
JavaScript
1
star
78

webos-mux

LG WebOS
JavaScript
1
star
79

mux-docs

Docs for Mux SDKs and APIs
1
star
80

mux-delete-all-assets

Python
1
star
81

mipp

mipp - Pixel processing in JavaScript
C++
1
star
82

.github

Mux's shared templates and workflows.
1
star
83

stats-sdk-android

Core library for our Data SDKs for Android
Kotlin
1
star
84

tizen-mux

JavaScript
1
star
85

mux-stats-sdk-kaltura-android

A library for integration Mux Data with the Kaltura Playkit on Android
Java
1
star
86

blur-up-thumbs

HTML
1
star
87

simple-local-video-test-server

Uses a simple static server to host media files (with expected mimetype mappings).
HTML
1
star
88

templates

Repository of useful templates for use with Mux products
1
star
89

mux-stats-sdk-jwplayer-ios

Mux Data Integration for JWPlayer's iOS SDK
Objective-C
1
star