react-html5video是否與服務器端渲染兼容？ （使用next.js）

Question

我正在嘗試使用react-html5video以及在服務器端渲染中實現示例視頻播放器組件。 我已經使用next.js了。

1. 首先，我在./pages/playerPage.js下創建了一個名為playerPage的文件。
2. 然后我在./components/player.js下創建了播放器組件
3. 然后跟隨https://github.com/mderrick/react-html5video/blob/1.4.0/README.md#advanced-usage
4. 這是我的播放器組件的外觀。

 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. 現在在playerpage.js中導入了player.js組件。

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

6. 如果運行： npm run dev並轉到http://localhost:3000/playerPage收到類似圖像的錯誤。
7. 

我已經在ZEIT社區中提到過我的問題，其中一位說：

聽起來像react-html5video與服務器端渲染不兼容。

現在我完全感到困惑：是否有任何與React和服務器端渲染兼容的視頻播放器？

建議將不勝感激。

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

Answer 2

遇到了同樣的問題，所以我首先偶然發現了一個Play request was interupted ...問題，然后我在這里在SO中發布了一個問題 ，沒有人回答，所以我在玩我如何聲明或導入包，但是然后我得到的Navigator is not defined ...錯誤，然后我去谷歌搜索是否有人遇到相同的問題（而且我敢肯定有），但是再也找不到解決方案。

到目前為止，這確實Play request was interupted ... ，盡管間歇性地仍給我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

我知道這不是解決方案，而且我很確定我會在這里遺漏一些東西，因此，如果有更好的解決方案，請在此處發布答案，一旦我提出解決方案，我也會對此進行更新