CODEWITHSUNDEEP
javascripthtmlreactjshtml5-videonext.js
Pavan kumar Dasireddy
Pavan kumar Dasireddy

Reputation: 366

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

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;

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

import Player from '../components/player'

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

  1. If run : npm run dev and go to http://localhost:3000/playerPage am getting errors like the image.
  2. Getting errors like this

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.

Upvotes: 2

Views: 4037

Answers (3)

Islam Yahia
Islam Yahia

Reputation: 109

In case someone else is facing the same issue, here's how I got it to work

import dynamic from "next/dynamic";
const Video = dynamic(
  () => import("react-html5video").then((player) => player.DefaultPlayer),
  { ssr: false }
);

Upvotes: 0

Fabian Schultz
Fabian Schultz

Reputation: 18556

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 />
);

Upvotes: 1

littlechad
littlechad

Reputation: 1228

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

Upvotes: 0

Related Questions