diff --git a/examples/with-videojs/README.md b/examples/with-videojs/README.md new file mode 100644 index 00000000..c7244c08 --- /dev/null +++ b/examples/with-videojs/README.md @@ -0,0 +1,41 @@ +[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-videojs) + +# video.js example + +## How to use + +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +```bash +npx create-next-app --example with-videojs with-videojs-app +# or +yarn create next-app --example with-videojs with-videojs-app +``` + +### Download manually + +Download the example [or clone the repo](https://github.com/zeit/next.js): + +```bash +curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-videojs +cd with-videojs +``` + +Install it and run: + +```bash +npm install +npm run dev +``` + +Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) + +```bash +now +``` + +## The idea behind the example + +This example shows how to use Next.js along with [Video.js](http://videojs.com) including handling of default styles. diff --git a/examples/with-videojs/components/Player.js b/examples/with-videojs/components/Player.js new file mode 100644 index 00000000..5b7d1f40 --- /dev/null +++ b/examples/with-videojs/components/Player.js @@ -0,0 +1,35 @@ +import React, { Component } from 'react' +import videojs from 'video.js' +import 'videojs-youtube' +import 'video.js/dist/video-js.css' + +class Player extends Component { + componentDidMount () { + // instantiate Video.js + this.player = videojs(this.videoNode, this.props, function onPlayerReady () { + console.log('onPlayerReady', this) + }) + } + + // destroy player on unmount + componentWillUnmount () { + if (this.player) { + this.player.dispose() + } + } + + // wrap the player in a div with a `data-vjs-player` attribute + // so videojs won't create additional wrapper in the DOM + // see https://github.com/videojs/video.js/pull/3856 + render () { + return ( +