javascript - 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;

1. 现在在 playerpage.js 中引入了 player.js 组件。

import Player from '../components/player'

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

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

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

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

现在我很困惑:有没有兼容 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 />
);