Next Videos

Import videos (mp4, webm, ogg, swf, ogv) in Next.js.

Features

Load videos from local
Load videos from remote (CDN for example) with assetPrefix
Adds a content hash to the file name so videos can get cached

Installation

yarn add next-videos -E

Usage

Create a next.config.js in your project

// next.config.js
const withVideos = require('next-videos')

module.exports = withVideos()

And you just import it in your component using require()

export default () => (
  <div>
    <video src={require('./video.mp4')} />
  </div>
)

Options

assetPrefix

You can serve your videos to a remote url by setting assetPrefix option

const withVideos = require('next-videos')

module.exports = withVideos({
  assetPrefix: 'https://example.com',

  webpack(config, options) {
    return config
  }
})

assetDirectory

With Next.js 9.1, assets are now served under public and not static directory. This is an option to manage which path you are using. Default value is now public.

const withVideos = require('next-videos')

module.exports = withVideos({
  assetDirectory: 'static',

  webpack(config, options) {
    return config
  }
})
``

kierangillen / next-videos