next-videos

Next Videos

Import videos (mp4, webm, mov, 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
  }
})

basePath

You can serve your videos to prefixed path by setting basePath option

const withVideos = require('next-videos')

module.exports = withVideos({
  basePath: '/v2',

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