Is react-html5video is compatible with server side rendering ?? (Using next.js)

Question

I'm trying to implement a sample video player component using react-html5video and that too in server side rendering. I've used next.js for that.

1. First of all I've created a file called playerPage under ./pages/playerPage.js
2. Then i've created player component under ./components/player.js
3. And then followed https://github.com/mderrick/react-html5video/blob/1.4.0/README.md#advanced-usage
4. Here is how my player component looks like.

 import React from 'react'; import { default as Video, Controls, Play, Mute, Seek, Fullscreen, Time, Overlay } from 'react-html5video'; class Player extends React.Component { render() { return ( <div> <Video controls autoPlay loop muted poster=“http://sourceposter.jpg“> <source src=“http://sourcefile.mp4” type=“video/mp4" /> <source src=“http://sourcefile.webm” type=“video/webm” /> <h1>Optional HTML and components can be added also</h1> <Overlay /> <Controls> <Play /> <Seek /> <Time /> <Mute /> <Fullscreen /> </Controls> </Video> </div> ); } } export default Player; 

5. Now imported player.js component in playerpage.js.

 import Player from '../components/player' export default () => ( <Player /> ) 

6. If run : npm run dev and go to http://localhost:3000/playerPage am getting errors like the image.
7. 

I've already mentioned my issue in ZEIT community one of them said :

Sounds like react-html5video is not compatible with server side rendering or something.

Now I'm totally confused: is there any video player that is compatible with react and server-side rendering too??

Suggestions will be appreciated.

Answer 1

It seems the package is indeed not compatible with SSR. You could try to lazy-load your Player component on the client side with Next.js-native Dynamic Imports :

import dynamic from 'next/dynamic'

const Player = dynamic(import('../components/player'), {
  ssr: false,
  loading: () => <p>Loading player...</p>,
});

export default () => (
  <Player />
);

Answer 2

Had the same problem, so first i stumble upon a Play request was interupted ... problem, and then i post a question here in SO , no body answered, so i play around with how i declare or import the package, but then i got Navigator is not defined ... error, and then i went to google to find if anybody experienced the same issue (and i am sure there are), but again no solution found.

This is what did so far, its working, although intermittently still giving me the Play request was interupted ... error

// my container
import React from 'react'
import PropTypes from 'prop-types'
...

let Player = (<div>Player loading....</div>)

class Post extends React.Component {

  componentDidMount() {
    /* eslint-disable global-require */
    Player = require('react-html5video')
    /* eslint-enable global-require */
  }

  render() {
    return (<Component {...this.props} player={Player} />)
  }
}


export default Post



// my component
import React from 'react'
import PropTypes from 'prop-types'
...

const SomeComponent = (props) => {
  const {
    url
  } = props

  const Player = player.DefaultPlayer ? player.DefaultPlayer : null

  return Player && (
    <Player
      autoPlay
      controls={['PlayPause', 'Seek', 'Time', 'Volume', 'Fullscreen']}
      ...
    >
      <source src={url} />
    </Player>)
}

...

export default SomeComponent

I know that this is not a solution, and i am pretty sure that i miss something here, so if there's a better solution, please post an answer here, i will also update this as soon as i come up with a solution