react-html5video 是否与服务器端渲染兼容？（使用 next.js）答案

【问题标题】：Is react-html5video is compatible with server side rendering ?? (Using next.js)react-html5video 是否与服务器端渲染兼容？（使用 next.js）
【发布时间】：2018-12-07 04:12:05
【问题描述】：

我正在尝试使用 react-html5video 以及在服务器端渲染中实现示例视频播放器组件。为此我使用了next.js。

首先，我在 ./pages/playerPage.js 下创建了一个名为 playerPage 的文件
然后我在 ./components/player.js 下创建了播放器组件
然后关注https://github.com/mderrick/react-html5video/blob/1.4.0/README.md#advanced-usage
这是我的播放器组件的外观。

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;

现在在 playerpage.js 中导入 player.js 组件。

import Player from '../components/player'

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

如果运行：npm run dev 并转到 http://localhost:3000/playerPage，我会收到类似图像的错误。

我已经在ZEIT community 中提到了我的问题，其中一位说：

听起来 react-html5video 和服务器端渲染什么的不兼容。

现在我很困惑：有没有兼容 react 和服务器端渲染的视频播放器？？

我们将不胜感激。

【问题讨论】：

标签： javascript html reactjs html5-video next.js

【解决方案1】：

看来这个包确实不兼容SSR。您可以尝试使用 Next.js-native Dynamic Imports 在客户端延迟加载您的 Player 组件：

import dynamic from 'next/dynamic'

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

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

【讨论】：

【解决方案2】：

遇到了同样的问题，所以首先我偶然发现了Play request was interupted ... 问题，然后我发布了a question here in SO，没有人回答，所以我尝试了如何声明或导入包，但后来我得到了@987654323 @error，然后我去谷歌查找是否有人遇到过同样的问题（我相信有），但还是没有找到解决方案。

这是迄今为止所做的，它的工作，虽然间歇性仍然给我Play request was interupted ... 错误

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

我知道这不是解决方案，我很确定我在这里遗漏了一些东西，所以如果有更好的解决方案，请在此处发布答案，我也会在提出解决方案后立即更新

【讨论】：