react-html5 video是否与服务器端渲染兼容？(使用next.js)

fnvucqvd 于 2023-03-02 发布在 React

关注(0)|答案(3)|浏览(157)

我正在尝试使用react-html5video实现一个示例视频播放器组件，这也是在服务器端渲染中，我已经使用了next.js。
1.首先，我在./pages/playerPage.js下创建了一个名为playerPage的文件
1.然后我在./components/player.js下创建了播放器组件
1.然后关注www.example.com https://github.com/mderrick/react-html5video/blob/1.4.0/README.md#advanced-usage
1.下面是我的播放器组件的外观。

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，则会出现类似图像的错误。
1.

我已经在ZEIT community中提到了我的问题，其中一个说：
听起来像是react-html5video与服务器端渲染不兼容之类的。
现在我完全糊涂了是否有任何视频播放器是兼容的React和服务器端渲染太？
欢迎提出建议。

next.js

来源：https://stackoverflow.com/questions/51076768/is-react-html5video-is-compatible-with-server-side-rendering-using-next-js

3条答案

按热度按时间

sqxo8psd1#

看起来这个包确实不兼容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 />
);

赞(0）回复(0）举报 2023-03-02

zy1mlcev2#

有同样的问题，所以首先我偶然发现了一个Play request was interupted ...问题，然后我发布了a question here in SO，没有人回答，所以我玩了一下我如何声明或导入包，但后来我得到了Navigator is not defined ...错误，然后我去谷歌看看是否有人遇到了同样的问题（我肯定有），但再次没有找到解决方案。
这是目前为止所做的，它的工作，虽然间歇性地仍然给我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

我知道这不是一个解决方案，而且我非常肯定我在这里遗漏了一些东西，所以如果有更好的解决方案，请在这里发布答案，我也会在找到解决方案后尽快更新

赞(0）回复(0）举报 2023-03-02

cbwuti443#

如果其他人也面临同样的问题，下面是我的解决方法

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

赞(0）回复(0）举报 2023-03-02

我来回答

react-html5 video是否与服务器端渲染兼容？(使用next.js)

3条答案

相关问题

热门标签

最新问答