components-video.js

import React, { Component } from 'react'
import videojs from 'video.js'

class Player extends Component {
  componentDidMount() {
    console.log('v.js mounted')
    // 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 vjs-theme-forest"
            data-setup='{"fluid": true}'
          />
        </div>
      </div>
    )
  }
}

export default Player

pages-a-[id].js

import { useRouter } from 'next/router'
import fetch from 'isomorphic-unfetch'
import VideoJs from '../../components/player'

import { makeStyles } from '@material-ui/core/styles'
import Paper from '@material-ui/core/Paper'
import Container from '@material-ui/core/Container'
import Grid from '@material-ui/core/Grid'

const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
    flexWrap: 'wrap',
    '& > *': {
      margin: theme.spacing(1),
      width: theme.spacing(1600),
      height: theme.spacing(900, 'auto')
    }
  }
}))

const video = (props) => (
  <Grid
    container
    spacing={0}
    direction="column"
    alignItems="center"
    justify="center"
    style={{ minHeight: '100vh' }}
  >
    <h1>{props.video.v.file}</h1>

    <Grid item xs={10}>
      {VideoPaper(props.video.v.file)}
    </Grid>
  </Grid>
)

export function VideoPaper(file) {
  const classes = useStyles()

  return (
    <div className={classes.root}>
      <Paper elevation={24} className={classes.paper}>
        {RenderVideo(file)}
      </Paper>
    </div>
  )
}

const RenderVideo = (path) => {
  const videoJsOptions = {
    autoplay: true,
    controls: true,
    sources: [
      {
        src: path,
        type: 'video/mp4'
      }
    ]
  }

  return <VideoJs {...videoJsOptions} />
}

video.getInitialProps = async function(context) {
  const { id, page } = context.query
  const res = await fetch(
    'https://falling-sea-afd5.kanbaru.workers.dev/?https://gistcdn.githack.com/notkanbaru/8c356071c4c37d8c4656d931d642d5ba/raw/7b30c29a9d5cc42a5ec325b005a8fcd59bf32739/woo.json?temp=' +
      id,
    {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        accept:
          'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9',
        'User-Agent':
          'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4101.0 Safari/537.36 Edg/83.0.474.0'
      }
    }
  )
  const show = await res.json()
  console.log(show)
  let video = { v: show[0] }

  return { video }
}

export default video