added example of integration with videojs (#4139)

* added videojs integration example * added videojs example * lint fix * Revert "lint fix" This reverts commit 39010fa0b58a66d06b91987a5bef46c044181470. * removed unexpected lint fix
2024-01-19 02:48:18 +00:00 · 2018-04-12 15:52:37 +05:30 · 2018-04-12 15:52:37 +05:30 · fbd023c032
parent 09e5064821
commit fbd023c032
5 changed files with 142 additions and 0 deletions
--- a/examples/with-videojs/README.md
+++ 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.
--- a/examples/with-videojs/components/Player.js
+++ 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 (
+      <div>
+        <div data-vjs-player>
+          <video ref={node => (this.videoNode = node)} className='video-js' />
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Player
--- a/examples/with-videojs/next.config.js
+++ b/examples/with-videojs/next.config.js
@ -0,0 +1,20 @@
+const withCss = require('@zeit/next-css')
+
+module.exports = withCss({
+  webpack (config) {
+    config.module.rules.push({
+      test: /\.(png|svg|eot|otf|ttf|woff|woff2)$/,
+      use: {
+        loader: 'url-loader',
+        options: {
+          limit: 100000,
+          publicPath: './',
+          outputPath: 'static/',
+          name: '[name].[ext]'
+        }
+      }
+    })
+
+    return config
+  }
+})
--- a/examples/with-videojs/package.json
+++ b/examples/with-videojs/package.json
@ -0,0 +1,19 @@
+{
+  "name": "with-videojs",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@zeit/next-css": "^0.1.2",
+    "next": "6.0.0-canary.2",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "url-loader": "^0.6.2",
+    "video.js": "^6.7.3",
+    "videojs-youtube": "^2.4.1"
+  },
+  "license": "ISC"
+}
--- a/examples/with-videojs/pages/index.js
+++ b/examples/with-videojs/pages/index.js
@ -0,0 +1,27 @@
+import Head from 'next/head'
+import React from 'react'
+import Player from '../components/Player'
+
+export default class Index extends React.Component {
+  render () {
+    const videoJsOptions = {
+      techOrder: ['youtube'],
+      autoplay: true,
+      controls: true,
+      sources: [{
+        src: 'https://www.youtube.com/watch?v=jiLkBxw2pbs',
+        type: 'video/youtube'
+      }]
+    }
+
+    return (
+      <div>
+        <Head>
+          <link rel='stylesheet' href='/_next/static/style.css' />
+        </Head>
+
+        <Player {...videoJsOptions} />
+      </div>
+    )
+  }
+}