Javascript react-HTML5视频是否与服务器端渲染兼容？？（使用next.js）

我正在尝试使用react-html5video实现一个示例视频播放器组件，在服务器端渲染中也是如此。我已经习惯了

首先，我在./pages/playerPage.js下创建了一个名为playerPage的文件

然后我在./components/player.js下创建了播放器组件

接着

下面是我的播放器组件的外观

从“React”导入React；
从“react-html5video”导入{默认为视频、控件、播放、静音、搜索、全屏、时间、覆盖}；
类播放器扩展了React.Component{
render（）{
返回(
该软件包似乎确实与SSR不兼容。您可以尝试使用Next.js-native在客户端延迟加载
Player
组件：

从“下一个/动态”导入动态
常量Player=dynamic（导入（'../components/Player'）{
ssr：错，
加载：（）=>加载播放器…
,，
});
导出默认值（）=>(
);
也有同样的问题，所以首先我偶然发现一个
播放请求被打断了…
问题，然后我发布了帖子，没有人回复，所以我尝试如何声明或导入包，但随后我得到了
导航器未定义…
错误，然后我去谷歌查找是否有人遇到了同样的问题（我相信有），但同样没有找到解决办法

这就是到目前为止所做的，它正在工作，尽管仍间歇性地给我播放请求被中断…

错误

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

//我的容器
从“React”导入React
从“道具类型”导入道具类型
...
让玩家=（玩家加载…）
类Post扩展了React.Component{
componentDidMount（）{
/*eslint禁用全局请求*/
Player=require（'react-html5video'）
/*eslint启用全局请求*/
}
render（）{
返回（）
}
}
导出默认帖子
//我的组件
从“React”导入React
从“道具类型”导入道具类型
...
常量SomeComponent=（道具）=>{
常数{
网址
}=道具
const Player=Player.DefaultPlayer？Player.DefaultPlayer:null
返回玩家&&(
)
}
...
导出默认组件

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

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